Create React Native App ScrollView Example Errors

Question

I created CRNA app following CreateNative GetStarted steps by issuing in terminal

npm install -g create-react-native-app

This creates app AwesomeProject and inside is App.js file which is the app. I replace the content of this file with the content of the demo on how to use ScrollView that is located at http://facebook.github.io/react-native/docs/using-a-scrollview.html

Here is the code I copied from the link above

import React, { Component } from 'react';
import { AppRegistry, ScrollView, Image, Text } from 'react-native';

export default class IScrolledDownAndWhatHappenedNextShockedMe extends Component {
  render() {
      return (
        <ScrollView>
          <Text style={{fontSize:96}}>Scroll me plz</Text>
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Text style={{fontSize:96}}>If you like</Text>
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Text style={{fontSize:96}}>Scrolling down</Text>
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Text style={{fontSize:96}}>What's the best</Text>
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Text style={{fontSize:96}}>Framework around?</Text>
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Image source={require('./img/favicon.png')} />
          <Text style={{fontSize:80}}>React Native</Text>
        </ScrollView>
    );
  }
}

// skip these lines if using Create React Native App
AppRegistry.registerComponent(
  'AwesomeProject',
  () => IScrolledDownAndWhatHappenedNextShockedMe);

However, this shows error at the terminal like below and on device it shows that the module ./img/favicon.png is unknown. I tried adding img directory and favicon.png file in it to the root of AwesomeProject as well as inside the node_modules but the error still exists.

Please note that I just started learning about ReactNative yesterday and I am going through examples one by one but this ScrollView example is failing. Please kindly provide clear explanation how to resolve this.

The terminal shows "10:13:14 PM: Failed building JavaScript bundle" as soon as CRNA app starts.

Answer 1

You need to add the img directory with the favicon.png relative to the file that specifies the requirement.

Lets assume you have a src/index.js with a line like import favicon from './img/favicon.png' or const icon = require('./img/favicon.png'), then your file needs to be at src/img/favicon.png.