I created an app (using React Native Expo) that has some images like:
<Image source={require('../assets/facebook_button.png')} />
The images are in the assets directory and I can see them using the npm publish
or the npm start
functionalities.
The problem is when building the app with exp build:android
, now the apk is not showing the static images (but some other images I'm loading from the Internet are being showed).
This is my app.json:
{
"expo": {
"name": "my-interesting-app",
"description": "My Interesting App",
"slug": "my-interesting-app",
"privacy": "public",
"sdkVersion": "29.0.0",
"platforms": ["ios", "android"],
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*",
"assets/*"
],
"ios": {
"supportsTablet": true,
"bundleIdentifier": "com.myinteresting.myinterestingapp"
},
"android": {
"package": "com.myinteresting.myinterestingapp"
},
}
}
Thanks for the help
So far we have been using code from React and React Native in our app. React gives us a nice way to build components and React Native gives us pre-built components that work on iOS, Android, and web — like View , Text , TouchableOpacity . React Native does not provide us with an image picker.
If you are given a project that needs rapid development, and you have picked React Native to build the cross-platform app, Expo is the best fit for you. With Expo, you can build and deploy React Native apps for both iOS and Android with ease. With Expo, you will never touch any native iOS or native Android code.
Try to cache the image before loading.
import React from 'react';
import { Image, Text, View } from 'react-native';
import { Asset, AppLoading } from 'expo';
export default class App extends React.Component {
state = {
isReady: false,
};
render() {
if (!this.state.isReady) {
return (
<AppLoading
startAsync={() => this._cacheResourcesAsync()}
onFinish={() => this.setState({ isReady: true })}
onError={console.warn}
/>
);
}
return (
<View style={{ flex: 1 }}>
<Image source={require('./assets/images/expo-icon.png')} />
<Image source={require('./assets/images/slack-icon.png')} />
</View>
);
}
async _cacheResourcesAsync() {
return Asset.loadAsync([
require('./assets/images/expo-icon.png'),
require('./assets/images/slack-icon.png'),
]);
}
}
References:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With