26

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

Daniela
  • 471
  • 7
  • 25
Ansal Ali
  • 1,583
  • 1
  • 13
  • 30
  • here is answer：http://stackoverflow.com/questions/35567502/how-to-bundle-images-resources-of-react-native-in-android – luwu Sep 08 '16 at 08:14
  • @luwu I have already gone through it. It doesn't works for me. – Ansal Ali Sep 08 '16 at 09:02
  • @luwu you were right. The problem was with the bundle packaging command. I have solved. I am posting it below as a self answer. Thanks for all your helps.:-) – Ansal Ali Sep 08 '16 at 10:18
  • you need to set `width`, `height` of `Image` component like this `` – lwinkyawmyat Sep 11 '16 at 08:15
  • @ubatin if you are using a local image, it is not required to specify the image dimensions. check out these example:-http://facebook.github.io/react-native/releases/0.33/docs/image.html – Ansal Ali Sep 13 '16 at 05:49

6 Answers6

14

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/
Ansal Ali
  • 1,583
  • 1
  • 13
  • 30
  • 1
    When i try to generate release build i get Duplicate resources error, then for that i have to delete the resources which got generated inside android/app/main/res – Karan Kalsi Dec 26 '18 at 07:11
  • If i just change the asset directory for debug inside build folder then i get no problem 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/build/generated/res/react/debug – Karan Kalsi Dec 26 '18 at 07:19
14

Another solution for the same issue of assets not bundled in development.

Add the following line to your app/build.gradle file in the section project.ext.react:

project.ext.react = [
    ... other properties
    bundleInDebug: true // <-- add this line
]

From the docs in the starter project gradle file:

By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the bundle directly from the development server.

Kat
  • 1,604
  • 17
  • 24
  • 2
    The has the added benefit of avoiding the duplicate resources issue when bundling manually (as highlighted in the other answer's comments). – Omar Nov 29 '19 at 15:43
3

I was having a similar issue on my project. My problem was that the Image is displaying ok on iOS but not showing on android (devices).

So my issue got fixed by adding the following header to my Image:

  <Image
    source={{
      uri: 'https://imageurladdress/img.png',
      headers: {
        Accept: '*/*',
      },
    }}
    style={styles.imageStyle}
  />

So, for some reason the iOS was already working without the need to add this header in the request. But the point is that after add the headers field, the Image is showing correct on both iOS and android devices.

bruno_paiva
  • 61
  • 4
2

i had the same issue. turns out i had import image component from react-native-elements instead of rect-native.fixed my case

Shelton
  • 31
  • 3
2

In my case two things were causing problems

First

I run my backend at http://localhost:3000 and any image asset would have URI similar to

http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOns

but the android simulator exposes it as

http://10.0.2.2:3000/.....

So http://localhost:3000 is inaccessible in simulator. So I made sure appropriate host is set from backend looking which device is requesting the API.

Second

In params supplied to <Image> component, I used url key(property) which was working fine in IOS but I needed to change it to uri for android.

Shiva
  • 11,485
  • 2
  • 67
  • 84
2

What helped me personally (none of the solutions here worked) is opening external image from the https://.... and it worked. So I decided to give a try to use 'file://' + DocumentDirectoryPath + '/' + item.image and it worked.

khandaniel
  • 306
  • 4
  • 13