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)
Related
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.
I would like to load a local html file in my React Native App. Its works in IOS but failed in Android. Here I my code:-
<WebView
originWhitelist={['*']}
source={Platform.OS === 'android' ? { uri: 'file:///android_asset/index.html' } : require('../screens/index.html')}
startInLoadingState={true}
/>
Here is my local html file path.
I have no idea where should I configure in order to get it works...Please help. Thank you.
Code is working. Remember to restart your react server everytime you change in android folder
I'm new in app dev and I wanted to start with vue native and as I saw in the documentation,vue native is not able to acces some device API's like local file,but react native can and vue is just wrapper around the React Native,
So how can I use import react native compoment and API's inside vue project?
and use expo to development
For example ionicons:
In script part:
import { Ionicons } from "#expo/vector-icons";
export default {
components: {Ionicons},
}
After that you can use it in template:
<template>
<view class="container">
<ionicons name="md-checkmark-circle" size=92 color="green" />
</view>
</template>
You can see examples here:
https://vue-native.io/docs/community-libraries-doc.html
Another example with Expo-Speech:
Installing package:
expo install expo-speech
Add it in script:
import * as Speech from 'expo-speech';
export default {
methods: {
sayHi: function(){
Speech.speak('Hi');
}
}
}
In template:
<template>
<view class="container">
<button title="Say Hi" :on-press="sayHi" />
</view>
</template>
Good luck!
I have the following line of code in my sample demo app to display a static image from asset folder.It works fine but the image disappears when i load offline bundle(Production apk).
<Image source={require('./assets/image/sample.png')} style={{width: 400, height: 450 , padding:10}}/>
and my project structure looks like this:-
After i tried to bundle the app for offline apk using the below command:-
react-native bundle --platform android --dev false --entry-file index.js --bundle-output [path for bundle output] --assets-dest [assets-path for image files]
I have the following structure in draw able folder
The confusion here is why react native changes the image name when bundling in this way.And i am not able to see the image after offline bundle please guide me on this as i have googled enough but not able to understand the behaviour.
Should not the image source be
require('./assets/image/sample.png')
instead of
require('./assets/sample.png')
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' }