React-native FacebookSDK show as empty box with red borders - facebook

Question

I've been struggling to make the facebook login button work for awhile. I tried to search around and tried several solutions from others but still couldn't get it sorted out.
The problem is Facebook Login Button show as empty red borders box.
I followed all the instructions on facebook site as well as react-native-fbsdk github documentation but still no luck.
Output from 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
Output from 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 Component
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);

Answer 1

I figured out the problem, what went wrong was how I implement the code in AppDelegate.m
It should be looking like this
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
// Facebook SDK Installation
#import <FBSDKCoreKit/FBSDKCoreKit.h>
#import <FBSDKLoginKit/FBSDKLoginKit.h>
#implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
NSURL *jsCodeLocation;
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:#"index.ios" fallbackResource:nil];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:#"fongdue"
initialProperties:nil
launchOptions:launchOptions];
rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
UIViewController *rootViewController = [UIViewController new];
rootViewController.view = rootView;
self.window.rootViewController = rootViewController;
[self.window makeKeyAndVisible];
[[FBSDKApplicationDelegate sharedInstance] application:application
didFinishLaunchingWithOptions:launchOptions];
return YES;
}
- (void)applicationDidBecomeActive:(UIApplication *)application {
[FBSDKAppEvents activateApp];
}
- (BOOL)application:(UIApplication *)application
openURL:(NSURL *)url
options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
BOOL handled = [[FBSDKApplicationDelegate sharedInstance] application:application
openURL:url
sourceApplication:options[UIApplicationOpenURLOptionsSourceApplicationKey]
annotation:options[UIApplicationOpenURLOptionsAnnotationKey]
];
// Add any custom logic here.
return handled;
}
#end
Now the button is showing and working as expected