React-native FacebookSDK showing as empty box with red borders

I have been struggling to get the facebook login button to work for a while. I tried searching and trying a few solutions from others but still couldn't figure it out.

The problem is that the Facebook login button appears as an empty red rectangle.

I followed all the instructions on the facebook site as well as the gitub-action-native-fbsdk documentation but so far no luck.

Exit rnpm link below

rnpm-link info iOS module apphub is already linked 
rnpm-link info Android module react-native-facebook-login is already linked 
rnpm-link info iOS module react-native-facebook-login is already linked 
rnpm-link info Android module react-native-fbsdk is already linked 
rnpm-link info iOS module react-native-fbsdk is already linked 

      

        
        
        
      

    

react-native-fbsdk is already linked

Exit react-native log-ios

Apr 15 21:27:16 MacBook-Pro-3 App[28314] <Warning>: Warning: Native component for "RCTFBLikeView" does not exist
Apr 15 21:27:16 MacBook-Pro-3 App[28314] <Warning>: Warning: Native component for "RCTFBLoginButton" does not exist
Apr 15 21:27:16 MacBook-Pro-3 App[28314] <Warning>: Warning: Native component for "RCTFBSendButton" does not exist
Apr 15 21:27:16 MacBook-Pro-3 App[28314] <Warning>: Warning: Native component for "RCTFBShareButton" does not exist

      

        
        
        
      

    

Xcode Libraries

AppDelegate.m

FacebookLoginButton Component

import React, { PropsType, Component } from 'react';
import {
  View
} from 'react-native';

const FBSDK = require('react-native-fbsdk');

const {
  LoginButton,
  AccessToken
} = FBSDK;

class FacebookLoginButton extends Component {
  render() {
    return (
      <View>
        <LoginButton
          publishPermissions={["publish_actions"]}
          onLoginFinished={
            (error, result) => {
              if (error) {
                alert("login has error: " + result.error);
              } else if (result.isCancelled) {
                alert("login is cancelled.");
              } else {
                AccessToken.getCurrentAccessToken().then(
                  (data) => {
                    alert(data.accessToken.toString())
                  }
                )
              }
            }
          }
          onLogoutFinished={() => alert("logout.")}/>
      </View>
    );
  }
};

export { FacebookLoginButton };

      

        
        
        
      

    

Login element

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { View, TextInput, KeyboardAvoidingView } from 'react-native';
import firebase from 'firebase';
import { emailChanged, passwordChanged, loginUser } from '../../actions';
import { Button, CardSection, Input, Spinner, FacebookLoginButton } from '../common';

class Login extends Component {

  onEmailChange(text) {
    this.props.emailChanged(text);
  }

  onPasswordChange(text) {
    this.props.passwordChanged(text);
  }


  onLoginButtonPress() {
    const { email, password } = this.props;
    console.log('logging in');

    this.props.loginUser({ email, password });
  }

  onFacebookLoginButtonPress() {
    console.log('logging in with facebook');
    var provider = new firebase.auth.FacebookAuthProvider();
    provider.addScope('user_birthday');
    firebase.auth().signInWithPopup(provider).then(function(result) {
      // This gives you a Facebook Access Token.
      var token = result.credential.accessToken;
      // The signed-in user info.
      var user = result.user;
    });
  }

  renderButton() {
    console.log(this.props);
    switch (this.props.loading) {
      case true:
        return (<Spinner size="large" />)
        break;
      default:
        return (
          <View>
            <Button
              onPress={this.onLoginButtonPress.bind(this)}
              buttonStyleOverride={[styles.buttonStyle]}
              textStyleOverride={[styles.loginButtonText]}
            >เข้าสู่ระบบ</Button>
            <Button
              onPress={this.onFacebookLoginButtonPress.bind(this)}
              buttonStyleOverride={[styles.buttonStyle, styles.facebookButton]}
              textStyleOverride={[styles.facebookButtonText]}
            >Login with Facebook</Button>
            <FacebookLoginButton />
          </View>
        );
    }
  }

  render() {

    return (
      <KeyboardAvoidingView behavior="padding" style={styles.container}>
        <View style={styles.formContainer}>
          <TextInput
            placeholder="Email Address"
            autoCorrect={false}
            style={styles.inputStyle}
            onChangeText={this.onEmailChange.bind(this)}
            value={this.props.email}
          />
          <TextInput
            placeholder="Password"
            autoCorrect={false}
            style={styles.inputStyle}
            onChangeText={this.onPasswordChange.bind(this)}
            value={this.props.password}
          />
        </View>
        <View style={styles.buttonContainer}>
          {this.renderButton()}
        </View>
      </KeyboardAvoidingView>
    );
  }
}

const mapStateToProps = ({ auth }) => {
  const { email, password, error, loading } = auth;

  return { email, password, error, loading };
};

const styles = {
  container: {
    marginTop: -65,
    flexDirection: 'column',
    flex: 1,
    backgroundColor: '#f8f8f8'
  },
  formContainer: {
    flexDirection: 'column',
    justifyContent: 'flex-end',
    alignItems: 'center',
    flex: 2,
    paddingLeft: 60,
    paddingRight: 60,
    paddingBottom: 60,
  },
  inputStyle: {
    color: '#646464',
    paddingRight: 15,
    paddingLeft: 15,
    fontSize: 16,
    lineHeight: 23,
    backgroundColor: '#fff',
    height: 50,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
    marginBottom: 15,
  },
  buttonContainer: {
    justifyContent: 'flex-start',
    flexDirection: 'column',
    borderColor: '#ddd',
    position: 'relative',
    marginBottom: 10,
    paddingLeft: 60,
    paddingRight: 60,
    flex: 1,
  },
  buttonStyle: {
    position: 'relative',
    borderRadius: 999,
    marginBottom: 15,
    borderColor: '#F4B9BF',
    backgroundColor: '#F4B9BF',
    flex: 0,
  },
  loginButtonText: {
    fontFamily: 'Prompt',
    fontWeight: '400',
    color: '#FFF',
    lineHeight: 24,
  },
  facebookButton: {
    backgroundColor: '#007aff'
  },
  facebookButtonText: {
    color: '#fff',
    lineHeight: 24,
  }
};

export default connect(mapStateToProps, {
  emailChanged,
  passwordChanged,
  loginUser
})(Login);