title: How to use local images in react native?
body: <p>As stated in <a href="http://ryanclark.me/going-native-with-react/" rel="nofollow noreferrer">this Tutorial</a>, it would be easy to add a local stored image to an TabItem (or whatever component):</p>
  
  <ol>
  <li>Add the image in XCode to the images.xcassets</li>
  <li>Require it like so "icon={require('image!pencil')}" (Name of the image is "pencil")</li>
  </ol>
  
  <p>What i get then is an exception in iOS-Simulator with the following text:</p>
  
  <blockquote>
    <p>Requiring unknown module "image!pencil". If you are sure the module is
    there, try restarting the packager</p>
  </blockquote>
  
  <p>What is wrong here? The Tutorial? Or has react native changed complete?</p>
  
  <p>The code:</p>
  
  <pre><code>class devdactic_tabs extends Component {
  
  constructor(props) {
      super(props);
      this.state = {
          selectedTab: 'welcome'
      };
  }
  
  render() {
      return (
          &lt;TabBarIOS selectedTab={this.state.selectedTab}&gt;
              &lt;TabBarIOS.Item
                  selected={this.state.selectedTab === 'welcome'}
                  icon={require('image!pencil')}
                  onPress={() =&gt; {
            this.setState({
                selectedTab: 'welcome',
            });
        }}&gt;
                  &lt;Welcome/&gt;
              &lt;/TabBarIOS.Item&gt;
              &lt;TabBarIOS.Item
                  selected={this.state.selectedTab === 'more'}
                  systemIcon="contacts"
                  onPress={() =&gt; {
              this.setState({
                  selectedTab: 'more',
              });
        }}&gt;
                  &lt;More/&gt;
              &lt;/TabBarIOS.Item&gt;
          &lt;/TabBarIOS&gt;
      );
  }
  </code></pre>
  
  <p>}</p>
  
  <p><a href="https://i.stack.imgur.com/pVjil.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pVjil.png" alt="The images-assets"></a></p>