Adding static images to React Native app webpack

Question

I've created a project using react-native-webpack-starter-kit and am trying to add static images to the project to use.

https://github.com/jhabdas/react-native-webpack-starter-kit

I tried simply adding an images folder next to the .js React component (in src/components) and tried the following but none seem to work. There's no error messages but the image just doesn't appear.

<Image source={require("image!add_people_icon")} style={styles.icon} />
<Image source={require("image!add_people_icon.png")} style={styles.icon} />
<Image source={require("./images/add_people_icon.png")} style={styles.icon} />

Is there anything I need to do in the actual xcode project, such as add the images to the images catalog there?

I'm using webpack / fileloader for serving images as well.

Pramod Mg Pramod Mg · Accepted Answer · 2015-12-01T23:36:03

The referencing the images to the require is wrong ...

basically it will go and search for those files in the Xcode Project So there are two solutions

solution 1: Add the respective images in the Xcode Project Image assets and then you can use as above

Solution 2: Use some cloudinary which will give you an absolute url and we can use it as

<Image style={/*ifneeded*/} source={{uri: ' //specify the url // '}} />

and the styles of images should contain Height and Width

Adding static images to React Native app webpack

1 Answers