Lou
Lou

Reputation: 67

Expo React Native Simulator Error: Facebook SDK has not been initialized yet

I'm getting this "Error: Facebook SDK has not been initialized yet" my code below is...

My package.json file configuration information:

    {
      "main": "node_modules/expo/AppEntry.js",
       "scripts": {
        "start": "expo start",
        "android": "expo start --android",
        "ios": "expo start --ios",
        "web": "expo start --web",
       "eject": "expo eject"
        },
       "dependencies": {
       "expo": "^36.0.0",
       "firebase": "^7.8.2",
       "react": "16.9.0",
       "react-dom": "16.9.0",
       "react-native": "https://github.com/expo/react native/archive/sdk-36.0.1.tar.gz",
       "react-native-web": "^0.11.7",
       "expo-facebook": "~8.0.0"
       },
    "devDependencies": {
    "babel-preset-expo": "^8.0.0",
    "@babel/core": "^7.0.0"
    },
   "private": true
    }

My Code:

   import React from 'react';
   import { StyleSheet, 
   Text, 
   View, 
   TouchableHighlight, 
   TextInput} from 'react-native';
   import { f, auth, database } from './config/config';
   import * as Facebook from 'expo-facebook';


   export default class App extends React.Component {

   constructor(props)
   {

   super(props);
   this.state = {
   loggedin: false
   };
   //this.registerUser('[email protected]',                                                                              
       'fakepassword');var that = this;
   f.auth().onAuthStateChanged(function(user) {
   if(user) {
   //Logged in
  that.setState({
  loggedin: true
 });
 console.log('Logged in', user);
 }else{
//Logged out
that.setState({
loggedin: false
});
 console.log('Logged out');
}
 });
}

loginUser = async(email, pass) => {
 if(email != '' && pass != '') {
 //
   try{
   let user = await auth.signInWithEmailAndPassword(email,          
    pass); console.log(user);
 }catch(error) {
   console.log(error);
 }
 }else{
 //if they are empty
 alert('Missing email or password');
 }
}
async loginWithFacebook (){

const{ type, token } = await Facebook.logInWithReadPermissionsAsync(
'APP_ID',
{ permissions: ['public_profile'] }
 );

  if(type === 'success'){
  const credentials =      f.auth.FacebookAuthProvider.credential(token);
   f.auth().signInWithCredential(credentials).catch((error) => {
     console.log('Error...', error);

   });

   }
  }


  registerUser = (email, password) => {

console.log(email, password);
auth.createUserWithEmailAndPassword(email, password)
.then((userObj) => console.log(email,password, userObj))
.catch((error) => console.log('error logging in', error));

   }

 signUserOut = () => {
auth.signOut()
.then(() => {
 console.log('Logged out...');
}).catch((error) => {
console.log('Error', error);
  });
 }

  render() {
    return (
    <View style={styles.container}>
     <Text>Open up App.js to start working on your app!</Text>
    <Text>---------</Text>
    { this.state.loggedin == true ? (
    <View>
    <TouchableHighlight
    onPress={ () => this.signUserOut()}
    style={{backgroundColor: 'red'}}>
      <Text> Log Out</Text>
    </TouchableHighlight>
    <Text> Logged in...</Text>
    </View>
  ) : (
    <View>

    { this.state.emailloginView == true ? (


      <View>
        <Text>Email:</Text>
        <TextInput
        onChangeText={(text) => this.setState({email: text})}
        value={this.state.email} />

      <Text>Password:</Text>
        <TextInput
        onChangeText={(text) => this.setState({pass: text})}
        secureTextEntry={true}
        value={this.state.pass}
         />

    <TouchableHighlight
    onPress={ () =>  this.loginUser(this.state.email,this.state.pass)}
    style={{backgroundColor: 'red'}}>
      <Text> Login</Text>
    </TouchableHighlight>

      </View>

    ) : (
      <View></View>
    )}

  <TouchableHighlight 
  onPress={() => this.setState({emailloginView: true})}
  style={{backgroundColor: 'green'}}>
  <Text style={{color:'white'}}> Login With Email</Text>
  </TouchableHighlight>

  <TouchableHighlight 
  onPress={() => this.loginWithFacebook()}
  style={{backgroundColor: 'green'}}>
  <Text style={{color:'white'}}> Login With Facebook</Text>
  </TouchableHighlight>
  </View>
  )}
</View>
  );
    }
    }
  const styles = StyleSheet.create({
  container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
  },
});

I'm using the built-in IOS simulator and physical iPhone 7 plus to run my expo React Native app. I've been dealing with this error since yesterday. Can someone please help me?

Error Screenshot:

enter image description here

Upvotes: 1

Views: 1917

Answers (1)

Charlie
Charlie

Reputation: 1042

Before calling logInWitReadPermissions you need to add

Facebook.initializeAsync(appId, appName);

As stated in Expo documentation

Facebook.initializeAsync(appId: string | undefined, appName: string | undefined): Promise Calling this method ensures that the SDK is initialized. You have to call this method before calling logInWithReadPermissionsAsync to ensure that Facebook support is initialized properly. You may or may not provide an optional appId: string argument. If you don't provide it, Facebook SDK will try to use appId from native app resources (which in standalone apps you would define in app.json, in Expo client are unavailable and in bare you configure yourself according to Facebook setup documentation for iOS and Android). If it fails to find one, the promise will be rejected. If you provide an explicit appId, it will override any other source. The same resolution mechanism works for appName.

Upvotes: 2

Related Questions