How to login with Facebook in React Native in the new format?

Question

I have previously integrated with Facebook in React Native, and for that I changed some lines of code directly in the Android folder of the Application. But in the application I’m doing now I felt a lot of differences, among them the inexistence of Android folder...

I installed the module React-Native-fbsdk, and I also ran the command React-Native link, which returned me success, but I can’t use the login. The call "Loginmanager.logInWithReadPermissions" returns me an error at runtime: "Undefined is not an Object".

I do not know the location of the android folder, I only see that the application now runs on the Expo. How do I resolve this login now?

Answer 1

After some (long) research, I was able to solve my problem, so here is the solution for future searches:

Login with Facebook is provided by the Expo api, so you need to install it:

npm install --save expo

After that, in the component:

import React, {Component} from 'react'
import { Text, Button } from 'native-base'
import Expo from 'expo';

export default class Component extends Component {
  render(
    <Button onPress={() => { this.facebookLogin() }}>
      <Text style={styles.btnText}>SIGN IN WITH FACEBOOK</Text>
    </Button>
  )

  async facebookLogin() {
    const ADD_ID = 'SUA_APP_ID_AQUI'
    const options = {
      permissions: ['public_profile', 'email', 'user_birthday'],
    }
    const {
      type,
      token,
    } = await Expo.Facebook.logInWithReadPermissionsAsync(ADD_ID, options)

    if (type === 'success') {
      const baseUrl = `https://graph.facebook.com/me?access_token=${token}`
      const fields = '&fields=email,first_name,last_name,birthday'
      const response = await fetch(`${baseUrl}${fields}`)

      console.log(await response.json());
      this.authenticate(token);
    }
  }
}