Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React-native: Images not showing in android device; but shows perfectly in emulator

I am working on a sample react native project. And almost all features except the <Image source=''/> work well with it. The image shows well in android emulator supplied with android studio and genymotion, but does not work on any real devices (moto G3 turbo, nexus 5, galaxy s4 etc...). I don't know what went wrong with my code. Here is my code

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image
} from 'react-native';

class ImageTester extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.android.js
        </Text>
        <Text style={styles.instructions}>
          Double tap R on your keyboard to reload,{'\n'}
          Shake or press menu button for dev menu
        </Text>
        <Image source={require('./img/first_image.png')}></Image>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('ImageTester', () => ImageTester);

project structure:

enter image description here

React-native version : react-native: 0.32.1

like image 273
Ansal Ali Avatar asked Sep 08 '16 07:09

Ansal Ali


People also ask

Is Android Studio good for React Native?

While you can use any editor of your choice to develop your app, you will need to install Android Studio in order to set up the necessary tooling to build your React Native app for Android.


1 Answers

The problem was with my bundle packaging command. As @luwu said in his comment, I checked this, and surprised that there is no difference with mine. Then only I noticed a message while running the command

"Assets destination folder is not set, skipping..."

That message was bit confusing since bundle was already created in the assets folder. The 'Assets' in that messages actually indicates my images. And I solved the issues with the following command:

react-native bundle --platform android --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --dev false --reset-cache --assets-dest android/app/src/main/res/
like image 70
Ansal Ali Avatar answered Sep 22 '22 04:09

Ansal Ali