CODEWITHSUNDEEP
reactjsreact-native
MBBk101
MBBk101

Reputation: 13

React Native - How can i display data from an API?

I'm a beginner in React Native and I am developing a movie app using The Movie Database API. I managed to extract the info from each movie. However, I find it difficult to extract information on the casting of films. I only managed to extract data of type "String" using the function "map". I would like to know how we can extract photos from actors and improve the display of data.

Here is an example of the API data:

data

  _displayFilm() {
    const { acteur } = this.state
    if (acteur != undefined) {
      return (
        <ScrollView style={styles.scrollview_container}>


          <Text style={styles.default_text}>Acteurs(s) :{"\n"}{acteur.cast.map(function(casts){
              return (  casts.name + '        ' + casts.character)
            }).join("\n")}
          </Text>


        </ScrollView>
      )
    }
  }

  render() {
    return (
      <View style={styles.main_container}>
        {this._displayLoading()}
        {this._displayFilm()}
      </View>
    )
  }
}

Thank you for your help

Upvotes: 0

Views: 889

Answers (1)

Andrew
Andrew

Reputation: 28539

You would probably want to display this data using a FlatList rather than in a ScrollView.

FlatLists are very easy to set up and manage. You can see more about them in the docs here.

Below is some sample code to get you started. You can update your component to incorporate the following. You would need to add two functions to the body of your component; one is a key extractor and the other is a render item (I've named them appropriately). Then in your component's render method add the code for the FlatList.

Make sure you also import FlatList from react-native

...

_keyExtractor (item, index) {
  return index.toString();
}

 _renderItem ({ actor, index }) {
  return (<Text>{actor.name} - {actor.character}</Text>);
}



render() {
  return(
   ...
   <FlatList style={{ flex: 1 }}
      data={this.state.acteur.cast}
      keyExtractor={this._keyExtractor.bind(this)}
      renderItem={this._renderItem.bind(this)}
    />
   ...
  );
}

...

Adding Images

To add images to your list of characters you could update the _renderItem method to return a better styled item, that could include images etc. For networked images look to the docs again, all the information is there.

Example:

_renderItem({actor, index}) {
  return (
    <View style={{flexDirection: 'row'}}>
      <Image 
        source={`https://webaddress.com${actor.profile_path}`}
        style={{width:40, height:40}}
      />
      <Text>{actor.name} - {actor.character}</Text>
    </View>
  );
}

Remember to import Image from react-native and to use the correct base url for the web address so that you can get the image.

The above should get your started and you should only have to make some minor changes to the code so that it works for you.

Upvotes: 1

Related Questions