CODEWITHSUNDEEP
androidiosreact-nativereact-native-webview
mj4318
mj4318

Reputation: 41

Loading a static HTML file with React Native Webview on Andriod

I'm a React Native newbie and I'm trying to assess the viability of porting to Android a React Native app that was originally written (not by me...) with iOS in mind.

At the moment I'm not trying to have code that will easily generate both Android and iOS bundles, just having the Android app working properly, with whatever alteration needed. We are using React Native 0.65.3

After setting up the Android environment, I'm compiling it on a MacBook Pro M1 with this command:

npx react-native bundle --entry-file ./index.js --platform android --dev false --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

I got the app to start, up to the point that a Webview has to load a static HTML file that is shipped with the assets (and which executes javascript code on its own)

In the original code, the HTML files to be loaded are located in the component folder (so NOT the usual assets folder). The original code that works for iOS is as follows:

const HTML: { [x: string]: any } = {
    app_avatar_1: () => require('../../html/webview/app_avatar_1.html'),
    ...
};

return (
    <View style={styles.container}>
        <WebView
            ref={webViewRef}
            originWhitelist={['*']}
            javaScriptEnabled={true}
            domStorageEnabled={true}
            source={HTML[avatarId]()}
            onMessage={onMessage}
        />
    </View>
);

Because Webview under Android does not "like" require() for static files, I ended up using 'file:///path/to/static/HTML/file' and adding allowFileAccess={true} as Android by default doesn't allow access to static HTML, JS, etc files.

Frustrated with the various ERR_FILE_NOT_FOUND or alternatively ERR_ACCESS_DENIED, I moved the HTML files in the assets folder of the React project...nothing changes...

At this point, I have no clue where the static HTML files should be located or I could invoke them inside the Webview... I also noticed that the static files are being copied to the res folder only if there is a require() statement explicitly including those, otherwise they seem to be simply ignored.

With the following code:

const HTML: { [x: string]: any } = {
    app_avatar_1: () => require('assets/webview/app_avatar_1.html'),
    ...
}

<WebView
    ref={webViewRef}
    originWhitelist={['*']}
    javaScriptEnabled={true}
    domStorageEnabled={true}
    source={{uri: 'file:///assets/webview/app_avatar_1.html'}}
    allowFileAccess={true}
    onMessage={onMessage}
/>

I get a "ERR_ACCESS_DENIED" error.

For whatever reason, static images are displayed correctly with no change required for Android...for instance:

const avatarImages: { [x: string]: ImageSourcePropType } = {
    app_avatar_1: require('assets/avatars/thumb-0.jpg'),
    ....
}

<Image
    style={styles.image}
    source={avatarImages[el.id]}
    resizeMode={'cover'}`
/>

will work on Android right away...

Thank you all the people who will help!

Upvotes: 1

Views: 1244

Answers (1)

mj4318
mj4318

Reputation: 41

This is how I eventually made it work:


    const updateSourceOnLoad = () => {
        setRenderedOnce(true);
    };

    if(Platform.OS === "android") {
        return (
            <View style={styles.container}>
                <WebView
                    ref={webViewRef}
                    originWhitelist={['*']}
                    javaScriptEnabled={true}
                    domStorageEnabled={true}
                    source={{uri: 'file:///android_asset/file.html'}}
                    allowFileAccess={true}
                    allowUniversalAccessFromFileURLs={true}
                    onMessage={onMessage}
                    onLoad={updateSourceOnLoad}
                />
            </View>
        )
    }

The issue seems to be the way the Webview sets flags once being loaded (only on Android)

Upvotes: 2

Related Questions