in my react native app crash on facebook login button. I use the 0.10.0 tree because the version of my react native is 0.59. https://github.com/facebook/react-native-fbsdk/tree/0.10.0-stable.
Error on platform: Android.
The app is currently on dev, is not on google store.
I've generated the key on Linux using:
keytool -exportcert -alias YOUR_RELEASE_KEY_ALIAS -keystore YOUR_RELEASE_KEY_PATH | openssl sha1 -binary | openssl base64
I put this key only in Facebook Developer when asked.
Facebook Settings
Settings Env
Settings.gradle
include ':react-native-fbsdk'
project(':react-native-fbsdk').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fbsdk/android')
MainApplication.java + MainActivity.java
All the modifications listed on:
https://github.com/facebook/react-native-fbsdk/tree/0.10.0-stable
AndroidManifest.xml
The meta generated by Facebook developer tools:
<meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/> <activity android:name="com.facebook.FacebookActivity" android:configChanges= "keyboard|keyboardHidden|screenLayout|screenSize|orientation" android:label="@string/app_name" /> <activity android:name="com.facebook.CustomTabActivity" android:exported="true"> <intent-filter> <action android:name="android.intent.action.VIEW" /> <category android:name="android.intent.category.DEFAULT" /> <category android:name="android.intent.category.BROWSABLE" /> <data android:scheme="@string/fb_login_protocol_scheme" /> </intent-filter> </activity>
strings.xml
<string name="facebook_app_id">XXXXXXXX</string>
<string name="fb_login_protocol_scheme">fbYYYYYYYYYY</string>
Test.js
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, TextInput, View, ScrollView, Dimensions,TouchableHighlight, TouchableOpacity, Image, ImageBackground, Button, Alert, FlatList, DeviceEventEmitter, PermissionsAndroid} from 'react-native';
import { LoginButton, AccessToken } from 'react-native-fbsdk';
class TestScreen extends React.Component {
//props e constructor
constructor(props){
super(props);
this.state = {
error: null,
credentials: null,
}
} //props e constructor
componentDidMount(){
console.log("Running on:"+appUrl);
console.log("Current locale:"+locale);
}
//Rendering
render() {
return (
<View style={styles.main}>
<Text style={{ color:'#fff' }}>Test</Text>
<LoginButton
onLoginFinished={
(error, result) => {
if (error) {
console.log("login has error: " + result.error);
} else if (result.isCancelled) {
console.log("login is cancelled.");
} else {
AccessToken.getCurrentAccessToken().then(
(data) => {
console.log(data.accessToken.toString())
}
)
}
}
}
onLogoutFinished={() => console.log("logout.")}/>
</View>
); //return
} //Rendering
}//WelcomeScreen
export default TestScreen;
Inside the app the login button appear. When i press it, app crash and in console.log appear this handler error:
Any advice?
UPDATE: putting the login button in the first route all works. If i put the button inside a page the error appears.
const MainStack = createStackNavigator(
{
Welcome: {
screen: WelcomeScreen, // Works here
},
Menu: {
screen: Menu,
},
Test: {
screen: TestScreen,//Not here
},
},
{
defaultNavigationOptions: {
headerStyle: {
backgroundColor: '#1f1f1f',
borderBottomColor: '#2c2828',
borderBottomWidth:1,
height:60
},
headerTintColor: '#cec7b5',
headerTitleStyle: {
fontWeight: 'bold',
},
headerTitle: <LogoTitle />,
},
initialRouteName: 'Welcome',
mode: 'modal',
}
);
//Routing Menu Navigation
//Collego app a React Navigation
const AppContainer = createAppContainer(MainStack);
//Lancio APP
export default class App extends React.Component {
render() {
return <AppContainer />;
}
Menu Item:
<TouchableOpacity onPress={() => this.props.navigation.navigate('Test') }>
<View style={styles.menuItemRow}>
<View style={styles.menuItemSpanContainer}>
<Text style={styles.menuItemSpan}>XX</Text>
</View>
<View style={styles.menuItem}>
<Text style={styles.menuItemText}>Test</Text>
<Icon style={styles.menuItemIcon} name={'chevron-right'} size={25} />
</View>
</View>
</TouchableOpacity>
DEPS:
"dependencies": {
"axios": "^0.18.1",
"qs": "^6.7.0",
"react": "16.8.3",
"react-native": "0.59.9",
"react-native-collapsible": "^1.5.1",
"react-native-directed-scrollview": "^2.0.0",
"react-native-easy-grid": "^0.2.2",
"react-native-fbsdk": "^0.10.0",
"react-native-flash-message": "^0.1.14",
"react-native-gesture-handler": "^1.3.0",
"react-native-linear-gradient": "^2.5.6",
"react-native-render-html": "^4.1.2",
"react-native-super-grid": "^3.1.1",
"react-native-swiper": "^1.5.14",
"react-native-typography": "^1.4.1",
"react-native-vector-icons": "^6.1.0",
"react-navigation": "^3.11.0"
},