title: Dynamically changing Image URLs in React Native
body: <p>I'm trying to set the image URL dynamically. The images are locally stored and their location paths are in a JSON file.</p>
  
  <p><strong>JSON File</strong></p>
  
  <pre><code>{
    "total": 2,
    "categories": [
      {
        "id": "cat1",
        "name": "Burgers",
        "itemCount": 10,
        "images":{
          "main":"./../images/items/Burgers.jpg"
        }
      },
      {
        "id": "cat2",
        "name": "Pizzas",
        "itemCount": 5,
        "images":{
          "main":"./../images/items/Pizzas.jpg"
        }
      }
    ]
  }
  </code></pre>
  
  <p><strong>Code</strong></p>
  
  <pre><code>renderItem: function (item) {
      var imageURL = require(item.images.main);
      return (
          &lt;View style={styles.mainContainer}&gt;
              &lt;Image source={imageURL} style={styles.image}&gt;
                  &lt;Text style={styles.textMain}&gt;{item.name}&lt;/Text&gt;
              &lt;/Image&gt;
          &lt;/View&gt;
      );
  }
  </code></pre>
  
  <p>This gives the following error.</p>
  
  <p><em>2015-12-10 16:02:45.295 [error][tid:com.facebook.React.RCTExceptionsManagerQueue] Unhandled JS Exception: Requiring unknown module "./../images/items/Burger.jpg". If you are sure the module is there, try restarting the packager.</em></p>
  
  <p>But if I replace <strong><em>var imageURL = require(item.images.main);</em></strong> with <strong><em>var imageURL = require("./../images/items/Pizzas.jpg");</em></strong> it shows the image perfectly.</p>
  
  <p>What is causing this? How do this correctly?</p>