6

I want to load a local HTML file that imports a local javascript library using tag in react-native-webview.
I have tried many solutions but notihng worked on React native 0.60.5.

  • I have tried this approach, but I get Domain Not Found -1100 error on iOS.
  • Tried this solution, but it did not work. (And the instructions were not clear for importing js file)


I am using :

"react": "16.8.6",
"react-native": "0.60.5"

PS: I am trying to implement highcharts.js charting library in webView.

mukesh.kumar
  • 1,100
  • 16
  • 30
  • 1
    You can try to use also our official wrapper for react-native. https://github.com/highcharts/highcharts-react-native – Sebastian Bochan Sep 02 '19 at 08:38
  • Thanks, @SebastianBochan I tried using the wrapper, but currently, there is this [issue](https://github.com/highcharts/highcharts-react-native/issues/8) that is preventing me from using it. – mukesh.kumar Sep 03 '19 at 06:35

1 Answers1

8
<View
        style={{
         flex:1
        }}
        >
          <WebView 
        scalesPageToFit
          originWhitelist={["*"]} 
          source={{ uri:"file:///android_asset/highcharts/index.htm",baseUrl:"file:///android_asset/highcharts/"

         }}/>

        </View>

Here is a working example of highchart in react-native-webview.

  1. 1.First move all your html/js code to the following directory: your_project/android/app/src/main/assets/. If the assets folder does not exist already, create it.
  2. Now paste all your html/css/js code in the assets folder you have created
  3. close your terminal/cmd/bash or whatever you use to run react-native run-android command.
  4. Run the following command now. react-native run-android.

  5. Now paste the above code in your .js file. Set uri to the path to your html file such as uri:"file:///android_asset/YOUR_HTML_FILE" and your baseUrl:"file:///android_asset/YOUR_MAIN_FOLDER/"

    enter image description here

Highcharts working in <code>react-native-webview</code>

Ammar Ahmed
  • 286
  • 1
  • 7
  • Hi @Ammar Thanks for answering. I wanted to import a local js file ( for offline support ). Sorry for the confusion, I have updated the question. Can you please suggest me a way to import local js file within HTML? I have highcharts.js minified locally. – mukesh.kumar Aug 30 '19 at 12:58
  • This might solve your issue: https://stackoverflow.com/questions/33506908/react-native-webview-load-from-device-local-file-system – Ammar Ahmed Aug 30 '19 at 14:00
  • Check the 2nd answer. – Ammar Ahmed Aug 30 '19 at 14:00
  • Unfortunately, I did not understand what that answer does. And those answers are like 3 years old. – mukesh.kumar Aug 30 '19 at 14:35
  • I have made the changes. now it should work with local files – Ammar Ahmed Aug 30 '19 at 17:21
  • Thanks a lot. At first, I thought this is not working, because webView was not visible. But, later I realised you have to give a fixed height to Webview. `flex: 1` was not working for me. – mukesh.kumar Sep 02 '19 at 18:20
  • 1
    Will you able to suggest me a way to suggest a similar approach for ios as well? Which folder should I put HTML and js? – mukesh.kumar Sep 02 '19 at 18:29
  • 1
    I do not use react-native for ios development but it would be simple. you would have to place it in the same folder as you would place some images to load in your app. I have heard ios also has something like an assets folder but I am not sure. – Ammar Ahmed Sep 04 '19 at 05:10
  • Works for me as well. I'm also wondering about the ios asset folder – Adrian Moisa Feb 01 '20 at 13:36