Skip to content

Commit 18b7bd4

Browse files
author
Vishal Garg
committed
Updated the ReadMe file for v 5.1.1
1 parent fb0f904 commit 18b7bd4

File tree

1 file changed

+86
-6
lines changed

1 file changed

+86
-6
lines changed

README.md

Lines changed: 86 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,7 @@ A `React Native` component which provides bindings for `FusionCharts` JavaScript
3333

3434
If you're using this package with Expo Tools, please make sure your Expo SDK version is higher than or equal to `v38.0.0`.
3535

36-
In bare React Native application you need to also install the expo-modules package, and configure the content of ios and android build directories like it's described [here](https://docs.expo.dev/bare/installing-expo-modules/).
37-
38-
To use the export file in iOS you need to get the file’s storage permission and to get notifications in iOS you need to get notifications permission.
36+
In bare React Native application you need to also install the react-native-unimodules package, and configure the content of ios and android build directiories like it's described [here](https://docs.expo.io/bare/installing-unimodules/#installation).
3937

4038
As the original `webview` module will be deprecated from `react-native`, please update `react-native-fusioncharts` and follow the given steps in your project:
4139

@@ -67,11 +65,93 @@ $ pod install
6765

6866
This wrapper can be installed within app based on [Expo tools](https://docs.expo.io/), or bare [React Native](https://reactnative.dev/docs/getting-started) app.
6967

70-
To install `react-native-fusioncharts`, run:
68+
## How to create your own application using FusionCharts – with Expo
7169

72-
```bash
73-
$ npm install --save react-native-fusioncharts
70+
71+
1. Make sure you have Node.js and Git installed in your environment. Check the official [Expo’s documentation](https://docs.expo.dev/get-started/installation/) for more details.
72+
73+
2. Run the following command in Command Prompt to create a new application:
74+
```
75+
expo init My-test-app.
76+
```
77+
3. Move to the previously created app folder: cd My-test-app
78+
79+
4. Install needed libraries for the FusionCharts:
80+
```
81+
npm i @unimodules/react-native-adapter
82+
npm i react-native-fusioncharts --force
7483
```
84+
5. Now create the "metro.config.js" in the root folder of the app and include the following code:
85+
```javascript
86+
const { getDefaultConfig } = require('@expo/metro-config');
87+
module.exports = (async () => {
88+
const {
89+
resolver: { sourceExts, assetExts }
90+
} = await getDefaultConfig(__dirname)
91+
return {
92+
transformer: {
93+
defaultConfig: async () => ({
94+
transform: {
95+
experimentalImportSupport: false,
96+
inlineRequires: false
97+
}
98+
})
99+
},
100+
resolver: {
101+
sourceExts,
102+
assetExts: [...assetExts, 'fcscript']
103+
}
104+
}
105+
})()
106+
```
107+
108+
6. Replace the code in the "App.js" file to receive a desired chart. [Example](https://github.com/fusioncharts/react-native-fusioncharts#quick-start)
109+
110+
7. Run the following command:
111+
```expo start```
112+
Expo should create a QR-code in your Command Prompt window.
113+
114+
8. Open the Expo Go application on your device – you should have installed it in order to run your FusionCharts app on this device.
115+
116+
9. Make sure your device is on the same Wi-Fi network as the computer where you are executing Expo commands.
117+
118+
10. Scan the QR-code with the Expo Go scanner. The application will run on this device. It should display the charts properly.
119+
120+
11. You can make changes to your code while running the application on your device: it should automatically reload after you save the changes.
121+
122+
123+
## How to create your own application using FusionCharts – with React-Native CLI
124+
125+
126+
127+
1. Make sure you have the latest versions of Node and JDK installed in your environment. Dependencies for Android and iOS emulators.
128+
should also be setup properly. Check the official [React Native documentation](https://reactnative.dev/docs/environment-setup) for more details.
129+
130+
2. Run the following command in Command Prompt to install the React Native CLI: ```npm install -g react-native-cli```
131+
132+
3. Run the following command in Command Prompt to create a new application: ```react-native init My-test-app```.
133+
134+
4. Run the command ```cd My-test-app``` to access your app.
135+
136+
5. A new application named ‘My-test-app’ has been created. Update its code to include charts that you need to get displayed. Check [our instructions](https://www.fusioncharts.com/dev/fusiontime/getting-started/create-your-first-chart-in-fusiontime) for details.
137+
138+
6. In order to run your application on a connected Android device or an emulator, execute the following command: npx react-native run-android. It would take a few minutes to run the application.
139+
140+
7. To run it on an iOS device or simulator, execute the following command: ```npx react-native run-iOS```.
141+
142+
143+
## You can also use React-Native CLI to run an application created with Expo. This is how you do it:
144+
145+
1. Follow steps 1-4 of the Expo guide above.
146+
147+
2. You have finished updating the code and accessed your application’s folder. Now run the following command: ```expo eject```
148+
149+
3. Expo will create /Android and /IOs folders in your application allowing you to run it with React-Native CLI
150+
151+
4. Make sure you have configured your environment dependencies for Android and iOS emulators. Check the official React Native documentation for more details.
152+
153+
5. Now you can use the command npx react-native run-android to run your application on Android or the command npx react-native run-iOS to run it on iOS.
154+
75155

76156
After installing `react-native-fusioncharts`, follow the steps below:
77157

0 commit comments

Comments
 (0)