1

I have images placed the usual way in Xcode's Images.xcassets for my ReactJS Native project. However, I don't know the syntax to reference a PNG from an <Image />.

https://facebook.github.io/react-native/docs/image.html gives an example syntax of:

  <Image
    style={styles.icon}
    source={require('image!myIcon')}
  />

If I have a foo.png immediately under Images.xcassets, how can I properly reference it from React Native?

Christos Hayward
  • 5,777
  • 17
  • 58
  • 113
  • Are you seeing the expected image or not? That is not clear in your question. Also, there is a note making sure to rebuild the project when adding image assets: https://facebook.github.io/react-native/docs/image.html#adding-static-resources-to-your-app-using-images-xcassets – Mike D Sep 11 '15 at 19:20
  • I am not seeing the expected image. – Christos Hayward Sep 11 '15 at 20:13

1 Answers1

0

You can do this using uri as referenced here.

If the image name is 'foo.png' you just need to use the following syntax

<Image
   style={styles.icon}
   source={{ uri:'foo' }} // without extension ".png"
 />

Notice that, you don't have to put the extension of the file.

MRPMOHIBURRAHMAN
  • 587
  • 3
  • 14