CODEWITHSUNDEEP
facebook-graph-apireact-native
anonym
anonym

Reputation: 279

Get user's friends's profile picture React-native

I'm trying to retrieve all user's friends profile pictures to render them in a list view.

I get all user's friends that are in the application with this Graph Request: 

`const infoRequest = new GraphRequest(
      '/me',
         {
           parameters: {
               fields: {
                        string: 'email, name, first_name, middle_name, 
                 last_name, picture.type(large), cover, birthday, location, friends'
                    }
                }
            },
            this._responseInfoCallback
        );`

Then, I'm trying to render his friends's profile picture with this function

`renderFriends() {
      if(this.state.user != null) {
        return this.state.user.friends.data.map(friend =>
          <View>
            <Image
              source={{uri:'https://graph.facebook.com/{friend.id}/picture?
                        type=large'}}
              style={styles.profilePicture}
            />
            <Text key={friend.id} >{friend.name}</Text>
          </View>
        )
      }
    }`

All names are rendered correctly but images are not rendered.

You can check the style of the image below:

`profilePicture: {
    height: 120,
    width: 120,
    borderRadius: 60,
    marginTop: height / 15,
  },`

Upvotes: 0

Views: 2313

Answers (1)

yachaka
yachaka

Reputation: 5569

Change

{{ uri: 'https://graph.facebook.com/{friend.id}/picture?type=large' }}

By

{{ uri: 'https://graph.facebook.com/' + friend.id + '/picture?type=large' }}

{friend.id} doesn't get replaced by the friend id, it is interpreted as the literal string {friend.id}, which gives you the wrong url.

Upvotes: 1

Related Questions