Quantcast
Channel: Active questions tagged react-native+android - Stack Overflow
Viewing all articles
Browse latest Browse all 28479

React Native Facebook SDK Login - App crashes on login

$
0
0

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

enter image description hereenter image description here

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"
  },

Viewing all articles
Browse latest Browse all 28479

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>