CODEWITHSUNDEEP
react-nativereactjs
developernaren
developernaren

Reputation: 514

React Native loops with remote data

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.

Upvotes: 0

Views: 1273

Answers (2)

Vikram Belde
Vikram Belde

Reputation: 1188

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

Upvotes: 1

Thomas
Thomas

Reputation: 8013

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>);
        }

Upvotes: 0

Related Questions