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)

Video not playing (stuck) in react-native-video

I am using react-native-cli and in my app react-native-video doesn't work.
While running on external device (android) it shows a blank space without error
On running on android simulator, the video screen appears with the first frame but the video is not playing (stuck)
The .mp4 file is stored in the project itself.
<Video
source={require('../../../storage/videos/video1.mp4')}
resizeMode="cover"
repeat={true}
paused={false}
style={{height: 400, width: 400, position: 'absolute'}}
/>
File Structure:
- src
-- components
-- screens
-- Video.js
-- storage
-- videos
-- video1.mp4
- App.js
Versions
React native : 0.70
React : 18.1
React native video: 5.2.1

Please add onError method to log the error.
const videoError = error => {
console.log('--videoError', error);
};
That might help you to get the exact problem.
If you are accessing file from outside of the app, you have to ask for request permission as well.
Please read the Doc

Local Images (as assets) not Loading in iOS; Expo EAS Build (React Native)

I have used several icons in the application, but they are not loading in iOS build, but load perfectly fine in Android build. The icons been used are PNG files in local assets folder. I have tried to use different methods to include Image files;
var chevron_right = require('./chevron-right.png');
import chevron_right from './chevron-right.png';
Third that I used was to put a JS file (i.e. Icons.js) in the folder where there the images are and than export those images from it. Like: export default { chevron_right : require('./chevron-right.png') } and then import where I want Like: import Icons from './path/to/icons' <Image source={Icons.chevron_right} style={{ height: 8, width: 8 }} />
All of the above three methods do not work for iOS builds. The screenshots are attached, the versions of expo and react native are:
Expo CLI: 0.60,
Expo SDK: 46,
React: 18,
React Native: 0.69.4
Screenshots:

The error seems to be with the Xcode. So pls Follow this
React-native iOS not showing images (pods issue). Read the full thread.
The question is answered.(Regards)

I updated my EAS CLI from 0.60 to 1.1.1, now my Images are rendering in iOS build.

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"

Bug in react-native-vector-icons, Icons is in japanese

I have a react-native app.
I have an app but when i use icons(react-native-vector-icons) the icon show in japanese, example:
The icon that i want to use is "add"
Icon
But when i show the icon on my app that show like this:
bug
The code of this app is:
Code
Code:
const App = () => {
return (
<>
<StatusBar barStyle="dark-content" />
<SafeAreaView>
<ScrollView
contentInsetAdjustmentBehavior="automatic"
style={styles.scrollView}>
<Header />
<View style={styles.body}>
<View style={styles.sectionContainer}>
<Text style={styles.sectionTitle}>Step One</Text>
<Text style={styles.sectionDescription}>
Edit <Text style={styles.highlight}>App.js</Text> to change this
screen and then come back to see your edits.
<Icon name="add" color="#000" size={22} />
</Text>
</View>
</ScrollView>
</SafeAreaView>
</>
);
};
});
React-native Doctor:
Common
✓ Node.js
✓ yarn
Android
✖ JDK
- Version found: 1.8.0_265
- Version supported: >= 8
✖ Android Studio - Required for building and installing your app on Android
✓ Android SDK - Required for building and installing your app on Android
✓ ANDROID_HOME
Errors: 2
Warnings: 0
Usage
› Press f to try to fix issues.
› Press e to try to fix errors.
› Press w to try to fix warnings.
› Press Enter to exit.

got same issue.Follow this instruction :
Edit android/app/build.gradle ( NOT android/build.gradle ) and add the following:
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
And rebuild.