Where to store images in response mode for Android and iOS?

Question

I am new to responding to my native language and want to create a small test application in Android and iOS.

I created an image directory next to my index.ios.js and index.android.js files.

In my code below, a red screen error appears that says: "The module could not be resolved. /Images/tree.png ... Invalid directory ...":

'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, View, Image, } = React; var TestApp = React.createClass({ render: function() { return ( <View> <Text>test app</Text> <Image style={styles.thumbnail} source={require('./images/tree.png')} /> /> </View> ); }, }); var styles = StyleSheet.create({ thumbnail: { width: 100, height: 100, }, }); AppRegistry.registerComponent('TestApp', () => TestApp); 

Where should I post my images and how do I link them?

Answer 1

Your code looks correct if the images directory is in the same place as the index.*.js files.

What version of React Native do you have? On the Images doc page:

Available React Native 0.14+. If you created your project using 0.13 or earlier, read this. The new asset system is based on strings for Xcode and Gradle, which are included in new projects created using init-native init. If you created your projects before, you must manually add them to your projects in order to use the new image resource system. See Upgrading for instructions on how to do this.

If you want to test your version based on the reaction, an easy way to do this is to run the following npm command from your project directory:

 npm ls react-native 

The current version is version 0.15.0.

Make sure you remember to run react-native upgrade after upgrading the package, as this is necessary to add assembly hooks for the new asset system to existing projects. If you previously updated your own version without doing this, this may explain the problem you are facing.

If you use Windows for development, see my answer to this question for details on how to work around the error with the new asset system in Windows.