CODEWITHSUNDEEP
imagereact-native
JV Lobo
JV Lobo

Reputation: 6316

Facebook profile image is not displayed with <Image>

I got an app where I have to show an user profile image.

Some users are logged in by Facebook, so we are saving their Facebook profile image and when I try to render this image with React Native Image component, the image is not displayed.

What I got:

<Image style={ styles.userImage } source={{uri: "http://graph.facebook.com/{userID}/picture?type=small" }} />

And styles:

userInfoContainer: {
  flex: 1,
  alignItems: 'center',
  paddingTop: 30,
  paddingBottom: 30,
  borderBottomWidth: 1,
  borderBottomColor: '#e5e5e5',
  backgroundColor: '#ffffff',
},

userImage: {
  height: 100,
  width: 100,
  borderRadius: 50,
  marginBottom: 20,
},

I don't know if the problem is that this Facebook image URL doesn't have image extension.

Any help is welcome.

Thanks :)

Upvotes: 6

Views: 5872

Answers (5)

Justin Thiele
Justin Thiele

Reputation: 476

For those showing up to this thread years later like me, the thing that fixed it for me was just changing the Facebook Graph URL from http to https. React Native was able to display it properly after that.

Upvotes: 0

Lindo&#233;lio L&#225;zaro
Lindo&#233;lio L&#225;zaro

Reputation: 969

It is possible and easy do this (get user profile's picture) using the Facebook React Native SDK.

1) Import the useful classes for this from react-native-fbsdk.

import { AccessToken, GraphRequest, GraphRequestManager } from 'react-native-fbsdk'

2) Implement the Facebook Graph Request in your method, like 'componentDidMount', as an example.

try {
  const currentAccessToken = await AccessToken.getCurrentAccessToken()

  const graphRequest = new GraphRequest('/me', {
    accessToken: currentAccessToken.accessToken,
    parameters: {
      fields: {
        string: 'picture.type(large)',
      },
    },
  }, (error, result) => {
    if (error) {
      console.log(error)
    } else {
      this.setState({
        picture: result.picture.data.url,
      })
    }
  })

  new GraphRequestManager().addRequest(graphRequest).start()
} catch (error) {
  console.error(error)
}

3) Use the value of this.state.picture where you need.

<Image source={ { uri: this.state.picture } } />

I would recommend pass it by props, instead of handling as a stateful resource, but it will depend of your needs.

Upvotes: 0

Scott Antipa
Scott Antipa

Reputation: 81

The issue is that the facebook graph url is not the actual url for where that image is stored. It is a redirect. There is an issue out on the react-native github which is tracking a similar issue (301 redirect). It looks like it is partially solved (working for 301's on iOS).

https://github.com/facebook/react-native/issues/4940

Some more details about this if you're curious:

Facebook gives you the graph url, but actually stores the image elsewhere on a cdn. This lets facebook move assets around without breaking the facebook graph url that they document. The graph url will redirect to the actual url, which means that the graph url returns a 302 (non-permanent redirect).

For example, currently my profile pic would be queried using this url:

https://graph.facebook.com/207537292916369/picture?type=large

But it will redirect (currently) to this actual location:

https://scontent.xx.fbcdn.net/v/t1.0-1/p200x200/15940479_407531822916914_4834858285678282755_n.jpg?oh=a49a86e0e8042e3df27ce3dfe871b958&oe=59327225

Upvotes: 4

RaphArbuz
RaphArbuz

Reputation: 897

I think the problems lies in the picture url redirection. If you add &redirect=false at the end of your url and you use the url fields in the data object shown, the image should show properly.

I don't know the main reason for that but this workaround should help, even though it means writing more code.

Upvotes: 1

createbang
createbang

Reputation: 2423

Looks like you have to remove one set of quotes from the uri string.

Upvotes: 1

Related Questions