React Native: Standalone, Expo built app on Android crashes when using Facebook login (works on iOS)

Scott

I have a React Native app I built using the Expo managed workflow. I am using Facebook login for my app along with Firebase authentication. My understanding is this can not be tested when running in the Expo app, and can only be used in a standalone app.

FB login is working fine in my iOS standalone app, however, in android, it crashes before the Facebook login screen even appears. My LandingPage loads, but as soon as I press the "Login With Facebook" button, it crashes.

Below is my app.json file and my login code. Per the instructions, I have also added the Facebook Key Hash to my project on the Facebook developer site. Can anyone help me understand what is wrong?

app.json:

{
  "expo": {
    "name": "Pick Up",
    "slug": "PickUp",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/ball-and-glove-5.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "notification": {
      "icon": "./assets/ball-and-glove-5.png",
      "color": "#fff",
      "androidMode": "default"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true,
      "userInterfaceStyle": "light",
      "config": {
        "googleMobileAdsAppId": "ca-app-pub-xxxxxxxxxxxxxxxx~xxxxxxxxxx",
        "googleMapsApiKey": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
      },
      "bundleIdentifier": "com.myapp.name",
      "buildNumber": "1.0.0"
    },
    "userInterfaceStyle": "automatic",
    "android": {
      "useNextNotificationsApi": true,
      "userInterfaceStyle": "dark",
      "config": {
        "googleMobileAdsAppId": "ca-app-pub-xxxxxxxxxxxxxxxx~xxxxxxxxxx",
        "googleMaps": {
          "apiKey": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
        }
      },
      "package": "com.myapp.name",
      "versionCode": 1
    },
    "web": {
      "favicon": "./assets/favicon.png"
    },
    "facebookScheme": "fbxxxxxxxxxxxxxxxx",
    "facebookAppId": "xxxxxxxxxxxxxxx",
    "facebookDisplayName": "myname"
  }
}


Login Code:


import React, { useState, useEffect, useContext } from 'react';
import { Alert, Animated, Image, StatusBar, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import * as WebBrowser from 'expo-web-browser';
import * as Facebook from 'expo-facebook';
import * as firebase from 'firebase';

import { loginUser } from '../../firebase.js';
import { StoreContext } from '../../contexts/storeContext';

const turquoise = "#4ECDC4";

const LandingPage = ({ navigation }) => {

  const store = useContext(StoreContext);

  const handleFacebook = async () => {

    try {
      await Facebook.initializeAsync();

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

      if (type === "success") {
        const credential = firebase.auth.FacebookAuthProvider.credential(token);
        if (credential) {
          const bool = await loginUser(credential);
        }
      }

      else {
        Alert.alert("", "There was a problem. Please try again.");
      }
    }
    catch (e) {
      console.log("e : ", e);
      Alert.alert("", e);
    }
  }

  return (
    <View>
      <StatusBar barStyle="dark-content" backgroundColor={ turquoise } />

      <View>
        <TouchableOpacity onPress={ handleFacebook }>
          <Ionicons name="logo-facebook" />
          <Text>Continue with Facebookk</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={ () => navigation.navigate("PhoneVerification") }>
          <Text>Use cell phone number</Text>
        </TouchableOpacity>
      </View>
      <View>
        <Image
          resizeMode="contain"
          source={require('../../assets/new-logo.png')}
        />
      </View>
    </View>
  )
}
Scott

The issue was that for Android, Facebook.initializeAsync() needs to be passed an argument -- your FB appID.

  const handleFacebook = async () => {

    try {
      await Facebook.initializeAsync("123456789"); // <-- your FB appID

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

      if (type === "success") {
        const credential = firebase.auth.FacebookAuthProvider.credential(token);
        
        // do the rest of your Firebase login logic
      }

      else {
        Alert.alert("", "There was a problem. Please try again.");
      }
    }
    catch (e) {
      console.log("e : ", e);
      Alert.alert("", e);
    }
  }

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Swift ios facebook login crashes app if user cancel login

React Native Facebook login button crashes app in iOS Simulator

Is Facebook iOS app built in React Native?

React Native: App crashes in simulator only when debugging is on and only on Android

React-native iOS app crashes when taking picture

How to fix Play Store error about 64 bit binaries when publishing app built Expo / React Native?

What is the best way to 'soft launch' a new React Native app built using Expo?

Crashes when using Redux-Persist with React Native on iOS device

React Native app crashes when login

Expo React-Native App doesn't work when run as a standalone APK

Facebook for Flutter App Crashes on IOS and works fine on Android

React-Native: facebook login without Expo

How can I fix this? My app works fine if I use expo app to emulate it on android, but it crashes when I build the apk

Error on using Formik in react native expo app

Imagepicker React Native crashes on iOS but works fine on Android

EXPO app is blink at iOS when it is appeared to front but Android is no problem. It was created automatically by EXPO (react navigation)

React Native Expo App crashes in Production mode

Facebook login in IOS works on emulator but not on device with native app installed

facebook login android app crashes

Android app crashes with Facebook Login

React Native Expo building standalone app

Linking error in react native IOS app after using Facebook SDK

How to install the React Native Expo App in iOS?

modifying a bundled react native app using expo

Save a single string in React Native iOS and Android expo app

react-native-firebase (v6): App is crashing on ios when using secondary app, works fine on Android

How to add properties in AndroidManifest in react native app built with expo?

Expo application on iOS crashes when uploading video to Firebase Storage. Works on android, just not iOS

React Native Expo Flatlist pull to refresh gesture not triggering on iOS but works fine on Android