title: React Native How to Loop render image and skip null object from API
body: <p>React Native How to Loop render image and skip null object from API </p>
  
  <p>I have my api like this
  :</p>
  
  <pre><code>{
      "success": true,
      "result": [
          {
              "localityno": "01",
              "ocationname": "Sushi xA",
              "image1": "www.abc.com/abc1.jpg",
              "image2": "www.abc.com/abc2.jpg",
              "image3": "www.abc.com/abc3.jpg",
              "image4": "www.abc.com/abc4.jpg",
              "image5": "www.abc.com/abc5.jpg",
          },
          {
              "localityno": "02",
              "ocationname": "Park Zoo",
              "image1": "www.abc.com/w1.jpg",
              "image2": "www.abc.com/w2.jpg",
              "image3": "",                 &lt;&lt;&lt;&lt;&lt;&lt;&lt; it's null *****
              "image4": "www.abc.com/w4.jpg",
              "image5": "",                 &lt;&lt;&lt;&lt;&lt;&lt;&lt; it's null *****
          },
      ]
  
  }
  </code></pre>
  
  <h2>----------------------------------------------</h2>
  
  <p>And this is my static render code :
  it's return blank image if image url it's null</p>
  
  <p><strong>I want to looping and skip null object</strong></p>
  
  <p>Thank You.</p>
  
  <pre><code>    componentWillMount() {
  
        return fetch("www.myservice.com/endpoint")
           .then((response) =&gt; response.json())
           .then((responseJson) =&gt; {
             let ds = new ListView.DataSource({rowHasChanged: (r1, r2) =&gt; r1 !== r2});
             this.setState({
               isLoading: false,
  
               dataSource: ds.cloneWithRows(responseJson.result),
             }, function() {
  
             });
           })
           .catch((error) =&gt; {
             alert("0 : Recrods On This Module ")
           });
  
      }
  
      render() {
  
        return (
          &lt;View style={{flex: 1, padding: 7,overflow: 'hidden'}}&gt;
  
          &lt;ListView
            enableEmptySections={true}
            dataSource={this.state.dataSource}
            renderRow={
              (rowData) =&gt;
  
                    &lt;Image source={{uri: rowData.image1}} style={{width: 100, height: 100}} /&gt;
                    &lt;Image source={{uri: rowData.image2}} style={{width: 100, height: 100}} /&gt;
                    &lt;Image source={{uri: rowData.image3}} style={{width: 100, height: 100}} /&gt;
                    &lt;Image source={{uri: rowData.image4}} style={{width: 100, height: 100}} /&gt;
                    &lt;Image source={{uri: rowData.image5}} style={{width: 100, height: 100}} /&gt;
  
            }
          /&gt;
  
          &lt;/View&gt;
  
        );
      }
  }
  
  export default Feed;
  </code></pre>