This article was originally published in medium
I’m working on an idea for a mobile app built using React Native. To quickly prototype and advance the MVP, we decided to use Firebase. However, we encountered some problems during the integration of Firebase and React Native, and it took quite a while to resolve them. Here is a step-by-step guide detailing the issues we encountered and their solutions.
pre-built
I use Expo when building React Native projects. When starting the Firebase integration, we will first execute the pre-built command.
npx expo prebuild
The Expo CLI generates the native files needed to compile the application. In effect, Expo abstracts away the need to interact with native code. However, when you want to use a module like Firebase that requires native integration, you need to modify these files after executing the pre-build command.
During the pre-build process, you must specify the Android and iOS package names in the app.json file. This is used as the identity of the application, usually starting with a reverse domain (for example, com.company).
{
"name": "TestApp",
"slug": "test-app",
"android": {
"package": "com.company.TestApp"
},
"ios": {
"bundleIdentifier": "com.company.TestApp"
}
}
React Native Firebase installation
Before integrating Firebase, you need to set up the necessary environments for iOS and Android. You can follow the steps outlined in React Native documentation Install the required tools, such as Xcode for iOS development and the Java Development Kit and Android Studio for Android.
Next, install the core Firebase suite:
npm install --save @react-native-firebase/app
If you are using Expo, please follow these steps: Firebase Expo.
You can also install other Firebase modules as needed:
npx expo install
@react-native-firebase/auth
@react-native-firebase/firestore
After that, add the following content to plugins your part app.json:
"plugins": [
"@react-native-firebase/app",
"@react-native-firebase/auth",
[
"expo-build-properties",
{
"ios": {
"useFrameworks": "static"
}
}
]
]
Some packages may be incompatible with the Expo module, and adding them may cause build errors. If expo-build-properties is not installed, add it using the following command:
expo install expo-build-properties
This package helps manage iOS and Android build settings from a single location. this useFrameworks: “static” The setup is crucial because Firebase requires static frames for iOS.
Firebase project configuration
Create a new Firebase project and add iOS and Android applications. In addition to the application name and package name (for example, com.company.TestApp), no additional information is required. you will need SHA-1 Use Android fingerprint later during authentication setup.
Download service files: GoogleService-Info.plist For iOS and google-services.json For Android. Place them in the project directory and reference them in app.json.
Reverse client ID error
When you execute the prebuild command again after adding a service file, you may encounter the following error:
Error: [ios.infoPlist]: withIosInfoPlistBaseMod:
[@react-native-firebase/auth] Failed to parse your GoogleService-Info.plist.
Are you sure it is a valid Info.Plist file with a REVERSED_CLIENT_ID field?
In fact, CLIENT_ID and REVERSED_CLIENT_ID The key will be automatically generated and added to the service file. However, these keys may not be generated on the Firebase side when you first build your application.
To resolve this issue you need to enable Google certification In Firebase. After doing this, download the new service file, which will now contain the required keys.
At this point you will see a screen where you can download the service file again and you will need SHA-1 Fingerprint for Android.
Added SHA-1 fingerprint for Android
Firebase Authentication for Android applications requires SHA-1 fingerprints. To retrieve it, navigate to the android directory and execute the following command:
npx expo prebuild
cd android
./gradlew signingReport
if you get a BUILD FAILED Error, please verify your Java version. You may also want to check the Android SDK path.
Create a local.properties files in the android directory and add the following content:
# Replace "${USERNAME}" with your system username
sdk.dir=/Users/${USERNAME}/Library/Android/sdk
this signingReport Directives are Gradle tasks used in Android projects.
It provides keystore information, including both SHA-1 and SHA-256 signatures debug and release Build.
Variant: debug
Config: debug
Store: /Users/username/TestApp/android/app/debug.keystore
Alias: androiddebugkey
MD5: *:*:*:**:**:**:**:**:**:**:**:**:**:**:**:*
SHA1: *:*:*:**:**:**:**:**:**:**:**:**:**:**:**:*
SHA-256: *:**:**:**:**:**:**:**:**:**:**:**:**:**:**:**:**:**:**:**:**:**:**
Valid until: Wednesday, May 1, 2052
For development, use debug SHA-1 fingerprint and add it to Android Settings in Firebase, then download the updated service file.
Test registration using Firebase
Once Firebase is set up, you can test Firestore and validate using a simple sign-up process:
import auth from '@react-native-firebase/auth';
import firestore from '@react-native-firebase/firestore';
import { Alert } from 'react-native';
import React, { useState } from 'react';
...
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const register = async () => {
try {
await auth().createUserWithEmailAndPassword(email, password);
Alert.alert('Success', 'User account created & signed in!');
createNewUser({ email, firstname: 'John', lastname: 'Doe' });
} catch (error) {
Alert.alert('Error', error.message);
}
};
const createNewUser = async (user) => {
try {
await firestore().collection('users').add(user);
Alert.alert('Success', 'User added to Firestore!');
} catch (error) {
Alert.alert('Error', error.message);
}
};
Native module error
When developing with Expo and Firebase, you may encounter the following error:
ERROR Invariant Violation:
Your JavaScript code tried to access a native module that doesn't exist.
...
This happens because some native mods are not fully compatible with Expo. To resolve this issue, create a local development build by executing the following command:
npx expo run:ios
This command will ensure that the Firebase module works properly.