Develop Reference

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!

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)

Horizontal scrollView not working on Android

I'm developing app with RN 0.69.6. I am trying to create scrollable item horizontally with ScrollView
Only on main screen in my app it works but on other screens in my app it doesn't work.
But, the scrolling it's also works on iOS but not on Android.
Output of npx react-native info System: OS: Windows 10 10.0.19044 CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU # 1.80GHz Memory: 1.95 GB / 11.85 GB Binaries: Node: 16.14.2 - C:\\Program Files\\nodejs\\node.EXE Yarn: 1.22.19 - \~\\AppData\\Roaming\\npm\\yarn.CMD npm: 8.17.0 - C:\\Program Files\\nodejs\\npm.CMD Watchman: Not Found SDKs: Android SDK: Not Found Windows SDK: Not Found IDEs: Android Studio: Not Found Visual Studio: Not Found Languages: Java: Not Found npmPackages: #react-native-community/cli: Not Found react: 18.0.0 =\> 18.0.0 react-native: 0.69.6 =\> 0.69.6 react-native-windows: Not Found npmGlobalPackages: react-native: Not Found
renderHighlightVideoBanner = (banners) => {
return (
<View style={styles.highlightOverflowContainer}>
<View style={styles.groupTitleContainer}>
<AdjustableText additionalStyle={styles.headerLabel}>What To Watch</AdjustableText>
</View>
<ScrollView
horizontal
showsHorizontalScrollIndicator={false}
contentContainerStyle={styles.horizontalScrollViewContainer}
>
{banners.data.map((value) => {
return (
<View style={styles.container}>
<TouchableOpacity
style={styles.touchableHighlightSliderContainer}
onPress={() => this.navigateToVideoScreen(value)}
>
<Image
resizeMode="cover"
style={styles.sliderImage}
source={{ uri: value.file_path + value.file_name }}
/>
</TouchableOpacity>
<View style={styles.highlightTitleLabelContainer}>
<AdjustableText heading="label" additionalStyle={styles.headerLabel}>{value.title}</AdjustableText>
<AdjustableText heading="label">{value.subtitle}</AdjustableText>
</View>
</View>
)
})}
</ScrollView>
</View>
)
}
The banner can scroll horizontally

react native webview not working in android 10+

react native webview not working in android 10 or higher. It works fine in dev mode but shows just a white screen in production mode.
<WebView
ref={webView}
javaScriptEnabled
injectedJavaScript={initialJs}
source={{
uri: "http://www.example.com",
}}
onMessage={(event) => {
console.log(event);
}}
/>

This might have something to do with clearTextTraffic in your android manifest
<application
android:usesCleartextTraffic="true"

Native-Base Component Picker issue

The app is crashing while i Load this component in the view. It used to working before.
import {Picker, View} from 'native-base';
<View style={{flex:1}}>
<Picker mode="dropdown">
<Picker.Item label="Select" value={0} />
<Picker.Item label="Veg" value={0} />
<Picker.Item label="Non-Veg" value={0} />
</Picker>
</View>

it seems like native base picker has a dependency for #react-native-community/picker
try to install it via
npm install #react-native-community/picker
npx pod-install
once installed it will fix the issue for you

Webview not showing any content(html) react native

Contents did showing up perfectly inside emulator and debug with real device but does not showing anything when testing out with real device (using released .apk). It just only showed blank container with white color. Or do i missed something?
<WebView
ref={(wView) => {this.wView = wView}}
javaScriptEnabled={true}
// onBridgeMessage={this.onBridgeMessage}
onMessage={this.onMessage}
injectedJavaScript="window.postMessage = String(Object.hasOwnProperty).replace('hasOwnProperty', 'postMessage');"
automaticallyAdjustContentInsets={false}
domStorageEnabled={true}
startInLoadingState={true}
source={mainHtml} <-- load with, var mainHtml = require('./MainHtml.html');
style={{width: 320,height:100,flex: 1}}/>
Environment
react-native-cli: 2.0.1
react-native: 0.43.4
react: 16.0.0-alpha.6
Device(ASUS Zenfone)
Android version 6.0.1

From what I've read here this is a known issue with Android when deploying in Release. The workaround is to point to the file with a uri:
{ uri: 'file:///pathto/file.html' }