title: React-native image - unknown named module '../img/2.jpeg'
body: <p>I'm trying to modify a react-redux tutorial code. I'm trying to load images that are stored locally and the paths are saved in an object.</p>
  
  <pre><code>...
  {
      "id": 2,
      "title": "Redux",
      "subtitle": "A State of Mind",
      "img": "../img/3.jpeg",
      "description": "Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test."
    },
  ...
  </code></pre>
  
  <p>I have got the following error (I've restarted the simulator a few times)</p>
  
  <blockquote>
    <p>Unknown named module: '../img/3.jpeg'</p>
  </blockquote>
  
  <p>Here's the container (eslint also says - unexpected require())</p>
  
  <pre><code>import React, { Component } from 'react';
  import {
    Text,
    TouchableWithoutFeedback,
    View,
    LayoutAnimation,
    Image
  } from 'react-native';
  import { connect } from 'react-redux';
  import { CardSection } from './common';
  import * as actions from '../actions';
  
  class ListItem extends Component {
    componentWillUpdate() {
      LayoutAnimation.spring();
    }
  
    renderDescription() {
      const { library, expanded } = this.props;
  
      if (expanded) {
        return (
          &lt;CardSection&gt;
            &lt;Image
              source={require(library.img)}
              style={styles.imageStyle}
            /&gt;
            &lt;View&gt;
              &lt;Text&gt;{library.subtitle}&lt;/Text&gt;
              &lt;Text style={{ flex: 1 }}&gt;
                {library.description}
              &lt;/Text&gt;
            &lt;/View&gt;
          &lt;/CardSection&gt;
        );
      }
    }
  
    render() {
      const { titleStyle } = styles;
      const { id, title } = this.props.library;
  
      return (
        &lt;TouchableWithoutFeedback
          onPress={() =&gt; this.props.selectLibrary(id)}
        &gt;
          &lt;View&gt;
            &lt;CardSection&gt;
              &lt;Text style={titleStyle}&gt;
                {title}
              &lt;/Text&gt;
            &lt;/CardSection&gt;
            {this.renderDescription()}
          &lt;/View&gt;
        &lt;/TouchableWithoutFeedback&gt;
      );
    }
  }
  
  const styles = {
    titleStyle: {
      fontSize: 18,
      paddingLeft: 15
    },
    descriptionStyle: {
      paddingLeft: 10,
      paddingRight: 10
    },
    imageStyle: {
      height: 100,
      width: 100,
      backgroundColor: 'black'
    }
  };
  
  const mapStateToProps = (state, ownProps) =&gt; {
    const expanded = state.selectedLibraryId === ownProps.library.id;
  
    return { expanded };
  };
  
  export default connect(mapStateToProps, actions)(ListItem);
  </code></pre>
  
  <p>Apart from the image, everything is working fine - just the image is not there.</p>