Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why are images not showing on apk after expo build:android? (React Native)

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

like image 350
David Goudet Avatar asked Aug 04 '18 14:08

David Goudet


People also ask

Does React Native image picker work with Expo?

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.

Is Expo good for React Native?

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.


1 Answers

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:

  • https://docs.expo.io/versions/latest/sdk/app-loading.html#app-loading
  • https://docs.expo.io/versions/latest/sdk/asset.html#expoassetloadasyncmodules
like image 149
Sahil Deliwala Avatar answered Sep 27 '22 21:09

Sahil Deliwala