'React-Native-FBSDK login doesn't return email

I'm trying to use the default <'LoginButton ... > for login in the app through Facebook login, but I can't manage to get the user's email.

This is my button:

<LoginButton   
  publishPermissions={["email"]}
  onLoginFinished={
    (error, result) => {
      if (error) {
        alert("Login failed with error: " + error.message);
      } else if (result.isCancelled) {
        alert("Login was cancelled");
      } else {
        alert("Login was successful with permissions: " + result.grantedPermissions)
      }
    }
  }
 onLogoutFinished={() => alert("User logged out")}
/>

And this is how i try to get the user's details:

  async FBGraphRequest(fields, callback) {
    const accessData = await AccessToken.getCurrentAccessToken();

    console.log("token= ", accessData.accessToken )
    // Create a graph request asking for user information
    const infoRequest = new GraphRequest('/me', {
      accessToken: accessData.accessToken,
      parameters: {
        fields: {
          string: fields
        }
      }
    }, this.FBLoginCallback.bind(this));
    // Execute the graph request created above
    new GraphRequestManager().addRequest(infoRequest).start();
  }

  async FBLoginCallback(error, result) {
    if (error) {
      this.setState({
        showLoadingModal: false,
        notificationMessage: "facebook error"
      });
    } else {
      // Retrieve and save user details in state. In our case with 
      // Redux and custom action saveUser
      this.setState({
        id: result.id,
        email: result.email,
        name: result.name
      });
      console.log("facebook login",result)
    }

  }

The console.log("facebook login",result) line returns me only the account name and id, but there is no field for te email...

What am I doing wrong?

PS.: I've also tryed to use a "custom function", but it doesn't work too (for the email, the login worked and i get only the user details like name and id):

async facebookLogin() {
    // native_only config will fail in the case that the user has
    // not installed in his device the Facebook app. In this case we
    // need to go for webview.
    let result;
    try {
      this.setState({showLoadingModal: true});   
      LoginManager.setLoginBehavior('NATIVE_ONLY');
      result = await LoginManager.logInWithReadPermissions(['public_profile', 'email']);
    } catch (nativeError) {
      try {
        LoginManager.setLoginBehavior('WEB_ONLY');
        result = await LoginManager.logInWithReadPermissions(['email']);
      } catch (webError) {
        // show error message to the user if none of the FB screens
        // did not open
      }
    }
    console.log("facebook result 1: ", result)
    // handle the case that users clicks cancel button in Login view
    if (result.isCancelled) {
      this.setState({
        showLoadingModal: false,
        notificationMessage: I18n.t('welcome.FACEBOOK_CANCEL_LOGIN')
      });
    } else {
      // Create a graph request asking for user information
      this.FBGraphRequest('id, email, name', this.FBLoginCallback);
    }
  }
.
.
.
        <LoginButton   
          publishPermissions={["email"]}
          onPress={
            this.facebookLogin()
          }
          onLogoutFinished={() => alert("User logged out")}
          />

this are the field request by the app. I need to insert also the user's Email: Request from the app



Solution 1:[1]

!!!RESOLVED!!!

the <'LoginButton ...> props for the permission is "permissions", not "readPermission"...

so the button code is:

<LoginButton
   permissions={['public_profile', 'email', 'user_birthday', ]}

   onClick={this.facebookLogin}
/>

Solution 2:[2]

// imports
import {
  Settings,
  AccessToken,
  LoginManager,
  AuthenticationToken,
  Profile,
  GraphRequest,
  GraphRequestManager,
} from 'react-native-fbsdk-next';
//put this lines in useEffect
Settings.setAppID('2920461228193006');
    Settings.initializeSDK();
    LoginManager.setLoginBehavior('web_only');
// put this method on button press
LoginManager.logInWithPermissions(['public_profile', 'email'])
                  .then(async data => {
                    if (!data.isCancelled) {
                      console.log(data, 'this is data');
                      if (Platform.OS === 'ios') {
                        let token =
                          await AuthenticationToken.getAuthenticationTokenIOS();
                        console.log(token, 'ios token');
                      } else {
                        let token = await AccessToken.getCurrentAccessToken();
                        console.log(token, 'android token');
                      }
                      const infoRequest = new GraphRequest(
                        '/me?fields=email,name,first_name,last_name',
                        null,
                        (err, res) => {
                          console.log({err, res}, 'this is');
                          if (Object.keys(res).length != 0) {
                            doSocialLogin({
                              registerBy: 2,
                              token: res.id,
                              user: {
                                firstName: res.first_name,
                                email: res.email,
                                lastName: res.last_name,
                              },
                            });
                          }
                        },
                      );
                      new GraphRequestManager().addRequest(infoRequest).start();
                    }
                  })
                  .catch(err => {
                    console.log(err, 'this is fb error');
                  });

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Andrea Favero
Solution 2