Not working latest version of react native cli and java version 11

[rexin1995]

Since expo dependency is mandatory not syncing with the latest version of react native CLI

[osvald0]

I have the same problem. I can provide more information about it:

Example project to reproduce the error 👉 here.

React:

react: 18.1.0 => 18.1.0
react-native: 0.70.4 => 0.70.4

Android:

buildToolsVersion = "31.0.0"
minSdkVersion = 21
compileSdkVersion = 31
targetSdkVersion = 31

if (System.properties['os.arch'] == "aarch64") {
    // For M1 Users we need to use the NDK 24 which added support for aarch64
    ndkVersion = "24.0.8215888"
} else {
     // Otherwise we default to the side-by-side NDK version from AGP.
     ndkVersion = "21.4.7075529"
 }

Error:

info JS server already running.
info Installing the app...

Deprecated Gradle features were used in this build, making it incompatible with Gradle 8.0.

You can use '--warning-mode all' to show the individual deprecation warnings and determine if they come from your own scripts or plugins.

See https://docs.gradle.org/7.5.1/userguide/command_line_interface.html#sec:command_line_warnings
5 actionable tasks: 5 up-to-date

FAILURE: Build completed with 2 failures.

1: Task failed with an exception.
-----------
* Where:
Build file '/Users/osvaldo/Projects/Osvaldo/RN/ChartsTest/node_modules/@unimodules/react-native-adapter/android/build.gradle' line: 3

* What went wrong:
A problem occurred evaluating project ':unimodules_react-native-adapter'.
> Plugin with id 'maven' not found.

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.
==============================================================================

2: Task failed with an exception.
-----------
* What went wrong:
A problem occurred configuring project ':unimodules_react-native-adapter'.
> com.android.builder.errors.EvalIssueException: compileSdkVersion is not specified. Please add it to build.gradle

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.
==============================================================================

[rexin1995]

hi osvald0 @unimodules/react-native-adapter this package has been deprecated you can use this (npx install-expo-modules@latest) to get expo dependency. I have tried this also but my kotlin version is not matching with expo kotlin dependency. if you got any progress on this please let me know. thanks in advance..

[osvald0]

@rexin1995 I tried that option too but I got more errors. I removed @unimodules/react-native-adapter and installed install-expo-modules@latest. Also I installed react-native-webview and I patched node_modules/react_native/index.js to solve an issue with deprecated prop-types (see error here).
Finally the result was this error:

[osvald0]

Any comment about this issue?

[kristianfjelde]

Did you manage to get any further @osvald0? Are the devs even paying attention to this package or updating it? Seems like the documentation is outdated and will not work with later versions of Expo.

[osvald0]

@kristianfjelde Nothing from my last message :(

[rexin1995]

no more updates yet

On Mon, 16 Jan 2023 at 18:28, Osvaldo Colina @.***> wrote:

@kristianfjelde https://github.com/kristianfjelde Nothing from my last message :(

— Reply to this email directly, view it on GitHub https://github.com/fusioncharts/react-native-fusioncharts/issues/165#issuecomment-1384018486, or unsubscribe https://github.com/notifications/unsubscribe-auth/AP5SQ6TKZPO3BL7WQXPGZKLWSVAXFANCNFSM6AAAAAARJ2OHMY . You are receiving this because you were mentioned.Message ID: @.***>

[osvald0]

@rexin1995 Could you fix the problem? It looks like the packages is abandoned. The last commit was 9 month ago.

[osvald0]

This is the workaround I made to continue using fusioncharts until they update the package or we switch to another chart library.

import React from 'react';
import WebView from 'react-native-webview';
import { StyleSheet, View } from 'react-native';

const FUSIONCHARTS_BASE_HTML = `
    <!doctype html>
    <html>
    <head>
        <script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
    </head>
    <body>
        <div id="chart-container"></div>
        <script>
            FusionCharts.ready(function () {
                var chart = new FusionCharts(CHART_CONFIG).render();
            });
        </script>
    </body>
    </html>
`;

const buildFusionChartsHTML = (chartConfig) => {
  return FUSIONCHARTS_BASE_HTML.replace(
    'CHART_CONFIG',
    JSON.stringify(chartConfig),
  );
};

const FusionCharts = ({ chartConfig }) => {
  const sourceHtml = buildFusionChartsHTML(chartConfig);

  return (
    <View style={styles.chartContainer}>
      <WebView originWhitelist={['*']} source={{ html: sourceHtml }} />
    </View>
  );
};

const styles = StyleSheet.create({
  chartContainer: {
    height: 200,
    width: '100%',
  },
});

export default FusionCharts;

You need to pay around the styling because the web version works a little bit different.

[osvald0]

Another option is to create a web project only to "host" the fusioncharts project.

From the react native project:

import React from 'react';
import WebView from 'react-native-webview';
import { StyleSheet, View } from 'react-native';

const FusionCharts = ({ chartConfig }) => {
  const encodedConfig = encodeURI(JSON.stringify(chartConfig));

  return (
    <View style={styles.chartContainer}>
      <WebView
        source={{
          uri: `http://my_web_url.com?chart=${encodedConfig}`,
        }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  chartContainer: {
    height: 400,
    width: '100%',
  },
});

export default FusionCharts;

And the react web project should be something like this:

import FusionCharts from "fusioncharts";
import ReactFC from "react-fusioncharts";
import Charts from "fusioncharts/fusioncharts.charts";
import FusionTheme from "fusioncharts/themes/fusioncharts.theme.fusion";

import { Routes, Route, useLocation } from "react-router-dom";

FusionCharts.options.license({
  key: 'LICENSE_KEY HERE',
  creditLabel: false,
});

ReactFC.fcRoot(FusionCharts, Charts, FusionTheme);

const decodeParams = (url) => {
  return decodeURIComponent(decodeURIComponent(url.split('chart=')[1]));
}

const App = () => {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
    </Routes>
  );
}

const Home = () => {
  const { search } = useLocation();
  const data = decodeParams(search);
  return (
    <ReactFC {...JSON.parse(data)} />
  );
}

export default App;

It isn't perfect and both options have advantages and disadvantages. But It's the best I have right now with the lack of support from the fusioncharts team.

[rexin1995]

Thanks, I'll check it out.

On Thu, 2 Mar 2023 at 18:31, Osvaldo Colina @.***> wrote:

Another option is to create a web project only to "host" the fusioncharts project.

From the react native project:

import React from 'react'; import WebView from 'react-native-webview'; import { StyleSheet, View } from 'react-native';

const FusionCharts = (chartConfig) => { const encodedConfig = encodeURI(JSON.stringify(chartConfig));

return ( <View style={styles.chartContainer}> <WebView source={{ uri: http://my_web_url.com?chart=${encodedConfig} http://my_web_url.com?chart=$%7BencodedConfig%7D, }} /> </View> ); };

const styles = StyleSheet.create({ chartContainer: { height: 400, width: '100%', }, });

export default FusionCharts;

And the react web project should be something like this:

import FusionCharts from "fusioncharts"; import ReactFC from "react-fusioncharts"; import Charts from "fusioncharts/fusioncharts.charts"; import FusionTheme from "fusioncharts/themes/fusioncharts.theme.fusion";

import { Routes, Route, useLocation } from "react-router-dom";

FusionCharts.options.license({ key: 'LICENSE_KEY HERE', creditLabel: false, });

ReactFC.fcRoot(FusionCharts, Charts, FusionTheme);

const decodeParams = (url) => { return decodeURIComponent(decodeURIComponent(url.split('chart=')[1])); }

const App = () => { return ( <Routes> <Route path="/" element={<Home />} /> </Routes> ); }

const Home = () => { const { search } = useLocation(); const data = decodeParams(search); return ( <ReactFC {...JSON.parse(data)} /> ); }

export default App;

It isn't perfect and both options have advantages and disadvantages. But It's the best I have right now with the lack of support from the fusioncharts team.

— Reply to this email directly, view it on GitHub https://github.com/fusioncharts/react-native-fusioncharts/issues/165#issuecomment-1451832440, or unsubscribe https://github.com/notifications/unsubscribe-auth/AP5SQ6QY7DFKNF5OZKMOZ2DW2CK3ZANCNFSM6AAAAAARJ2OHMY . You are receiving this because you were mentioned.Message ID: @.***>