Not able to display static images in android with react-native

Question

I am trying to display static images in my react-native android and iOS apps. It's working fine with iOS app. But I am not able to display image in android app. Following is my code:

<Image source ={require('../images/background.png')}
              style ={styles.imageStyle}>
</Image>

var styles = StyleSheet.create({
  container: {
    flex: 1,
    alignSelf: 'stretch'
  },
  imageStyle: {
    flex: 1,
    margin:10,
    width: undefined,
    height: undefined,
    backgroundColor:'transparent',
    justifyContent: 'center',
    alignItems: 'center'

  }

I have put the image 'background.png' under drawable-**dpi folders as well as under the mentioned images folder.

It works well in my iOS app picking image from images folder but not on android. I am using react-native version 0.33

Any help in this will be greatly appreciated!

Edit: It doesn't work here also:

<View key={answer.ID}>
  <OnTouchHighlightWidget key={answer.ID} onPress={() =>  {this.props.onSelect(answer)}}>
           <Image source={this.getImageUrl(answer)} style={{flex:1,margin:10,width: 90, height: 95}} />
</OnTouchHighlightWidget>
</View>

I have put the image_holo.png under same directory as js file and respective drawable-**dpi folders. It works on iOS. But not on android!

This is a full cover background image ? – EQuimper Oct 03 '16 at 22:21 — EQuimper, Oct 03 '16 at 22:21
Yes. It's a background image. – Sachin Oct 04 '16 at 02:51 — Sachin, Oct 04 '16 at 02:51

score 0 · Answer 1 · answered Oct 03 '16 at 22:15

0

You need to define the width and height in your imageStyle.

answered Oct 03 '16 at 22:15

Georgios

4,764
35
48

Thanks for suggestion but I had already done that. No success. – Sachin Oct 04 '16 at 04:45

score 0 · Answer 2 · answered Oct 04 '16 at 04:25

0

Try this for a full background image cover.

<Image source ={require('../images/background.png')}
              style ={styles.imageStyle}>
</Image>

var styles = StyleSheet.create({
  container: {
    flex: 1,
    alignSelf: 'stretch'
  },
  imageStyle: {
    flex: 1,
    margin:10,
    width: null,
    height: null,
    backgroundColor:'transparent',
    justifyContent: 'center',
    alignItems: 'center'

  }

answered Oct 04 '16 at 04:25

EQuimper

5,811
8
29
42

Nopes. It doesn't work. I have used images at other places as updated in my question. But there also it doesn't work. It works on iOS but not on android :( – Sachin Oct 04 '16 at 04:44
And you have add width and height nothing ? So you just see nothing ? If yes I gonna look I think have get this issue one time – EQuimper Oct 04 '16 at 04:46
Do your image are inside a View ? – EQuimper Oct 04 '16 at 04:54
Yes bro. Its always in the View tag. Sorry for not posting the complete code. Updated it now. Even the earlier one is inside View tag. But how does it work on iOS and not on android? – Sachin Oct 04 '16 at 05:01
I dont know sorry, with react-native sometimes ios is a pain sometimes android. – EQuimper Oct 04 '16 at 05:02
Ok. Np. Thanks. Will try more to find the solution. – Sachin Oct 04 '16 at 05:06
Can you try this `image!` – EQuimper Oct 04 '16 at 05:10
Yup tried that too. It says unknown required module. – Sachin Oct 04 '16 at 05:12
Can you try with external picture with `source={{uri: 'the-url'}}` ? – EQuimper Oct 04 '16 at 05:16
I have tried that also. It works when the image are sourced from any external uri as you mentioned. – Sachin Oct 04 '16 at 05:56

Thanmai C · Answer 3 · 2017-06-22T07:10:21.017

0

Try creating a drawable folder in your android Studio under the res folder and copy your image to this folder,refer the link below to set it up (Android Studio: Drawable Folder: How to put Images for Multiple dpi?). Clean and rebuild your project on android studio,it works.

edited Jun 22 '17 at 07:10

answered Jun 15 '17 at 08:53

Thanmai C

741
1
7
10

Not able to display static images in android with react-native

3 Answers3