Question: I have a remote api that gives this data

```
{ "images" :
    [
    { "image_link" : "http://example.com/image1.png"},
    { "image_link" : "http://example.com/image2.png"},
    ]
}

```

I have a class with the functions. I have not included constructor here.

```
componentWillMount() {

    var url = 'https://naren.com/images.json';
    var that = this;
    fetch( url )
        .then((response) => response.json())
        .then((responseJson) => { that.setState({ images : responseJson.images }); })
        .catch((error) => { console.error(error); });
    }

render() {
    return ( <View>
        this.state.images.map(( image, key ) => {
           console.log(image); 
           return ( 
              <View key={key}>
                 <Image source={{ uri : image.image_link }} /> 
              </View>
           );
            });  
       </View>);
        }

```

I cannot seem to get the images fetched from the api to loop through the view. If I use a static array without the remote source i.e. `fetch`. THis seems to work perfectly.But when I use the fetch and get data from the api this does not work. I can confirm that I am getting the data because the `console.log(image)` inside the `return` statements consoles the expected data.

Answer: 
I quickly Simulated this, and it does not seem to have an issue to loop over the Image array and Render each Image.

```
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image
} from 'react-native';

export default class ImageLoop extends Component {

  constructor(props){
    super(props)
    this.state = {
      images : []
    }
  }

  componentWillMount() {

    var url = 'https://api.myjson.com/bins/2xu3k';
{/* 

or any API that can return the following JSON
{"images":[{"image_link":"https://facebook.github.io/react/img/logo_og.png"},{"image_link":"https://facebook.github.io/react/img/logo_og.png"},{"image_link":"https://facebook.github.io/react/img/logo_og.png"},{"image_link":"https://facebook.github.io/react/img/logo_og.png"},{"image_link":"https://facebook.github.io/react/img/logo_og.png"},{"image_link":"https://facebook.github.io/react/img/logo_og.png"}]}

*/}

var that = this;
        fetch( url )
            .then((response) => response.json())
            .then((responseJson) => {
              console.log('responseJson.images',responseJson.images);
              that.setState({ images : responseJson.images });
            })
            .catch((error) => { console.error(error); });
        }

render() {
  return (
    <View style={{height:100,width:100}}>
      {this.state.images.map((eachImage)=>{
        console.log('Each Image', eachImage);
        return (
          <Image key = {Math.random()} style={{height:100,width:100}} source ={{uri:eachImage.image_link}}/>
        );
      })}
    </View>
   );

    }
}

AppRegistry.registerComponent('ImageLoop', () => ImageLoop);

```

Please see the output Here: <https://rnplay.org/apps/bJcPhQ>
Try setting a `width` and a `height` on the `Image` style. Because the images come from a remote url, react-native does not know what size it is going to be.

```
 render() {
    return ( <View>
        this.state.images.map(( image, key ) => {
           console.log(image); 
           return ( 
              <View key={key}>
                 <Image
                   source={{ uri : image.image_link }}
                   style={{ width: 120, height: 120 }}
                 /> 
              </View>
           );
            });  
       </View>);
        }

```