How can I get a high quality profile picture using React Native Facebook SDK GraphRequest?

Question

I'm trying to get a high resolution picture using the React Native Facebook SDK, however the default image quality is very poor. It's 50x50 and very low resolution.

Request:

new GraphRequest('/135121013672357',
  {
    parameters: {
      fields: {
        string: 'picture'
      }
    }
  },
  _responseInfoCallback
)

Response

{
  "picture": {
    "data": {
      "is_silhouette": false,
      "url": "https://scontent.xx.fbcdn.net/v/t1.0-1/p50x50/16864988_145199975997794_4154735936748679550_n.jpg?oh=bb5f32ecb73dd9b8fb8ac45920e2ffc5&oe=593223A8"
    }
  },
  "id": "135121013672357"
}

Looking at Facebook's Graph API docs, there is a parameter, "type", whereby one can request a particular size (small, medium, large). What isn't clear however, is how to format that request.

picture?type=large // Error

picture{type:large} // 200 However, picture is omitted from Response

Answer 1

Try using Graph API field expansion to get the resource:

picture.type(large)

Answer 2

You can also use .height and .width to get an even higher resolution picture or a resolution you need it at:

Example endpoint for 480x{any-width} image: /me?fields=id,name,picture.height(480),[:other_fields]

Example endpoint for {any-height}x480 image: /me?fields=id,name,picture.width(480),[:other_fields]

Example endpoint for maximum resolution image: /me?fields=id,name,picture.height(10000),[:others_fields]

Official documentation is at the /{node-id}/picture page at https://developers.facebook.com/docs/graph-api/reference/user/picture/. And you can try the API out without debugging through the app at: https://developers.facebook.com/tools/explorer/

Answer 3

Here is an example about how we can get a large Facebook user profile's picture on a simple way using the react-native-fbsdk package.

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.error(error)
    } else {
      console.log(result.picture.data.url)
    }
  })

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

Answer 4

onFBLogin = async () => {
        try{
        const result = await LoginManager.logInWithPermissions([
           'public_profile',
           'email',
        ]);
       const tokenObj = await AccessToken.getCurrentAccessToken();
        const infoRequest = new GraphRequest(
            '/me',
            {
                accessToken: tokenObj.accessToken,
                parameters: {
                    fields: {
                        string: 'email,name,first_name,middle_name,last_name,gender,address,picture.type(large)',
                    },
                },
            },
            this.infoResponseCallback,
        );
       new GraphRequestManager().addRequest(infoRequest).start()
    }catch(err){
        console.log("error",err)
    }

infoResponseCallback = (error,success) =>{
        if(error){
              console.log("eeeeeeeeeee",error)
        }else{
              console.log(success)
        }
    }