react-native-fbsdk LoginManger is not defined

Question

I am having an issue with react-native-fbsdk LoginManager. I am keep getting error, "Cannot read property 'loginWithReadPermissions' of undefined.

I have tried multiple solutions that I have found in other posts but nothing seem to fix my issue.

I successfully install ed react-native-fbsdk and properly imported FBSDK frameworks into the Xcode project. I also properly linked libRCTFBSDK.a file. After doing this, my build comes out to be successful but I just keep getting that error saying "LoginManager is not defined"..

Could anyone please help me with this?

Here is my code with LoginManager and LoginButton:

import React from 'react';
import { Container, Content, Text, Button, View } from 'native-base';
import Loading from './Loading';
import { AccessToken, LoginManager, LoginButton } from 'react-native-fbsdk';

    class Login extends React.Component {
      constructor(props) {
        super(props);
      }

      onLoginFacebook = () => {
        LoginManager
          .logInWithReadPermissions(["public_profile", "email"])
          .then((result) => {
            if(result.isCancelled) {
              return Promise.reject(new Error("The user cancelled the request"));
            }

            console.log(`Login success with permissions: ${result.grantedPermissions.toString()}`);
            //get the access token
            return AccessToken.getCurrentAccessToken();
          })

          .then((data) => {
            const credential = firebase.auth.FacebookAuthProvider.credential(data.accessToken);
            return firebase.auth().signInWithCredential(credential);
          })

          .then((currentUser) => {
            console.log(`Facebook Login with user : ${JSON.stringify(currentUser.toJSON())}`);
          })

          .catch((error) => {
            console.log(`Facebook Login fail with error: ${error}`);
          });
      }

      render() {
        const {
          loading,
          error,
          success,
          locale,
        } = this.props;
        const { email } = this.state;

        if (loading) return <Loading />;

        return (

          <Container style={{backgroundColor: 'white'}}>
            <Content>
                <View padder>
                  <Button
                    containerStyle={{
                      padding: 10, 
                      width: 150, 
                      margin: 20, 
                      borderRadius: 4, 
                      backgroundColor: 'rgb(73, 104, 173)',
                    }}
                    style={{marginTop: 20}}
                    onPress={this.onLoginFacebook}
                  >
                    <Text style={{fontSize: 18, color: 'white'}}>
                      Login Facebook
                    </Text>
                  </Button>
                </View>
            </Content>
          </Container>
        );
      }
    }

    export default Login;

Here are the screenshots of xCode configuration:

Is your Facebook SDK in the default location ~/Documents/FacebookSDK? — Pritish Vaidya

needsleep needsleep · Accepted Answer · 2019-01-17T07:57:26

I had the same error and after a long search I found out I had to downgrade to SDK version 4.38.0 (I was using v4.39.0 at the time).

After installing the previous version everything worked as expected. Hope it helps.

react-native-fbsdk LoginManger is not defined

1 Answers