React Native WebView with local javascript

Question

I'm going to create a React Native app with WebView. This View must contain local HTML and Javascript files. This is the code.

---> WVView.js

...
    render(){
        return (
            <View style={{flex:1}}>
                <StatusBar/>
                <WebView
                    nativeConfig={{props: {webContentsDebuggingEnabled: true}}}
                    ref={webview => { this.myWebView = webview; }}
                    source={require('./Resources/index.html')}
                    javaScriptEnabled={true}
                    injectedJavaScript={} 
                    onMessage={this.onWebViewMessage}
                    style={{flexBasis: 1, flexGrow:1}}
                    scrollEnabled={false}
                    />
            </View>
        );
    }
...

---> index.html

<div class="widget-container">
    <div id="test12"></div>
    <script type="text/javascript" src="./Utils.js"></script> 
    <script type="text/javascript" src="./WebViewBrdge.js"></script>   
    <script type="text/javascript" src="./TVS.js"></script>
</div>

---> Directory

|__ WVView.js
|__ Resources
       |__ index.html
       |__ Utils.js
       |__ WebViewBridge.js
       |__ TVS.js

Please, can you suggest the best way to develop this solution? When I read the documentation, I find code like source{{html:...}} or injectedJavascript for loading static local javascript. I don't find a similar example.

Now I can't load javascript files. Thanks

Ankit Makwana · Accepted Answer · 2019-12-20 10:07:01Z

10

First of all add your files(Resources folder itself) in android assets directory in case of android and in XCode project in case of ios.
android: "YourApp/android/app/src/main/assets"
ios: "YourApp/ios"

Then take path of that folder in variable and set it as baseUrl.
android: "file:///android_asset/Resources"
ios: "Resources/"

You can use native file path to load html file

htmlPath = "file:///android_asset/Resources/index.html"; //file path from native directory;
<WebView
    source={{ uri: htmlPath, baseUrl: baseUrl }}
/>

After this your script will get loaded in webview.
Here is the link for your reference: https://github.com/react-native-community/react-native-webview/blob/master/docs/Guide.md#loading-local-html-files

edited Dec 20, 2019 at 10:07

answered Dec 5, 2019 at 5:43

Ankit Makwana

2,56116 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

zp26 Over a year ago

Thanks. Is there a way to do this procedure in expo project? How can I add the files into assets directory? I found a partial response to this problem.

Ankit Makwana Over a year ago

First of all in question you should mention that you are working with expo project. Above solution is only useful if you've create project using react native cli or ejected expo project to native one.

Ankit Makwana Over a year ago

@zp26 There was one mistake in answer which I've corrected. I've also tested it on android, it's working fine. Try it out and let me know if you face any issue.

zp26 Over a year ago

I test your solution on ios but I can't replicate it. The htmlPath is like "Resources/index.html"? In my opinion, the source property is like: source={{ uri: htmlPath, baseUrl: baseUrl }}

Aman Deep Over a year ago

baseUrl is not worked on android file:///android_asset/img-editor/example03-mobile.html worked for me.

Collectives™ on Stack Overflow

React Native WebView with local javascript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related