Forem: Fatih

Firebase Integration Challenges in React Native

Fatih — Sun, 22 Dec 2024 12:38:41 +0000

This article was originally published at Medium

I was working on a mobile app idea built with React Native. To quickly create a prototype and move forward with an MVP, we decided to use Firebase. However, we encountered several issues during the integration of Firebase with React Native, which took quite some time to resolve. Here’s a step-by-step guide detailing the problems we faced and their solutions.

Prebuild

I used Expo when creating the React Native project. When starting Firebase integration, we will first run the prebuild command.

npx expo prebuild

Expo CLI generates the native files necessary to compile the app. Actually, Expo abstracts away the need to interact with native code. However, when you want to use modules like Firebase that require native integrations, you will need to modify these files after running the prebuild command.

During the prebuild process, you must specify a package name for Android and iOS in the app.json file. This serves as the app's identity, typically starting with a reversed domain name (e.g., 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 both iOS and Android. You can follow the steps outlined in the React Native documentation to 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 package:

npm install --save @react-native-firebase/app

If you’re using Expo, follow these steps: Firebase Expo.

You can also install additional Firebase modules based on your needs:

npx expo install 
    @react-native-firebase/auth 
    @react-native-firebase/firestore

Afterward, add the following to the plugins section in your app.json:

"plugins": [
  "@react-native-firebase/app",
  "@react-native-firebase/auth",
  [
    "expo-build-properties",
    {
      "ios": {
        "useFrameworks": "static"
      }
    }
  ]
]

Some packages may be incompatible with Expo modules, and adding them could result in build errors. If expo-build-properties is not installed, add it with the following command:

expo install expo-build-properties

This package helps manage iOS and Android build settings from a single location. The useFrameworks: “static” setting is essential because Firebase requires static frameworks for iOS.

Firebase Project Configuration

Create a new Firebase project and add both iOS and Android apps. Other than the app name and package name (e.g., com.company.TestApp), no additional information is needed. You will need the SHA-1 fingerprint for Android later during authentication setup.

Download the service files: GoogleService-Info.plist for iOS and google-services.json for Android. Place them in your project directory and reference them in the app.json.

Reverse Client ID Error

When running the prebuild command again after adding the service files, you might 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?

Actually, the CLIENT_ID and REVERSED_CLIENT_ID keys are automatically generated and added to the service file. However, when you create the app for the first time, these keys might not be generated on Firebase's end.

To resolve this, you need to enable Google Authentication in Firebase. After doing so, download the new service files, which will now include the required keys.

At this point, you’ll see a screen where you can download the service files again, and you’ll need the SHA-1 fingerprint for Android.

Adding SHA-1 Fingerprint for Android

Firebase Authentication for Android apps requires a SHA-1 fingerprint. To retrieve this, navigate to the android directory and run the following command:

npx expo prebuild
cd android
./gradlew signingReport

If you get a BUILD FAILED error, verify your Java version. You may also need to check the Android SDK path.

Create a local.properties file in the android directory and add the following:

# Replace "${USERNAME}" with your system username
sdk.dir=/Users/${USERNAME}/Library/Android/sdk

The signingReport command is a Gradle task used in Android projects.

It provides keystore information, including SHA-1 and SHA-256 signatures for both debug and release builds.

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 the debug SHA-1 fingerprint and add it to the Android settings in Firebase, then download the updated service files.

Testing Registration with Firebase

Once the Firebase setup is complete, you can test Firestore and Authentication using a simple registration flow:

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

While 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 occurs because certain native modules are not fully compatible with Expo. To fix this, create a native development build by running:

npx expo run:ios

This command will ensure that Firebase modules work correctly.

The Short Story of JavaScript

Fatih — Tue, 02 May 2023 06:54:51 +0000

I heard that when I began learning JavaScript: “JavaScript has nothing to do with Java.” It’s still the first sentence on Wikipedia under the headline of JavaScript.

I don’t know why, but it came to my mind again on this weekend: If it’s not related to Java, then why is it called JavaScript? What is the meaning of ECMAScript if this is JavaScript? Who’s ECMA? What does Script mean? Then I found myself writing this post when I was deep-diving into all these issues.

JavaScript has been created by Brendan Eich in 1995. It was the early days of WWW. The web pages were nothing more than static text pages. Of course, after a while, people are looking for more dynamic interactions with websites. Netscape’s team started working towards this. At least, Javascript was created which is a scripting language for Netscape browsers.

They used to call it Mocha when it was still being developed. Then obtained ‘LiveScript’ as a name within the test process. At least, in 1997, changed the name LiveScript as JavaScript with the beta of Netscape Navigator 2.0.

While Javascript has no direct relativity to Java, it is made confusing for people. Although there was no relation as technologically, it has an indirect connection.

In the ’90s, Netscape had a major rival in the browser war. This was Microsoft. In 1995, Micros developed Internet Explorer and made it part of its operating systems. Then Netscape started working on an operational system. They invest and support to Java language. They also plan to use Javascript as their scripting language for this operating system. As a result, they selected Java as the name for marketing.

While adding JavaScipt inside the browser, Netscape has opened developing new kind of website. Then Microsoft announced a new scripting language that was added to Explorer. They called JScript.

In 1996, Netscape applied to ECMA for defining JavaScript as industrial standards. In 1997, ECMA published ECMAScript Language Specification for scripting language standardization.
So What and Who is ECMA?

Now let’s go to ECMA. ECMA (European computer manufacturers Association) is a non-profit organization that aims to develop standards for computer hardware, software languages, and communication technologies.

The QWERTY layout for keyboards is one of the standards defined by ECMA. Also, ECMA has set standards for a lot of software and hardware technologies, from floppy disks to C languages, and then they prepare international standards.
They have named ECMA-262 as standard for Javascript. In 1997, ECMA began work to develop the standard. They got JScript and Javascript as a reference point for the new script language standard and they call it ECMAScript. As noted in ECMAScript standards;

ECMAScript is based on several originating technologies, the most well-known being JavaScript (Netscape) and JScript (Microsoft).

The last version was published in June 2021 as the 12th version. The other term is TC39 (Technical Committee 39) that you can see so many times in the document. This term defines the group responsible for the development of ECMA-262.

What is ECMAScript?

ECMAScript is a term that uses defines the standardization of the scripting language. These standards define what a scripting language requires with functions and rules.

We may say that JavaScript is a scripting language that follows the rules and functions that define in ECMAScript.

If we say that JS is the language we use, then ECMAScript is the standard of such languages. You can learn how to create a scripting language by looking at ECMAScript’s standards and learn how to use JavaScript by reading the JavaScript documentation.

What is Scripting — Script Language?

We have called script or script language up to now, but what is script language?
Software languages can be separated into three groups:

Programming languages,
Scripting languages
Markup languages.

Programming languages are essentially defined software languages that we can tell computers what to do. These languages make it possible to manage the hardware by compiling in machine language.

Moreover, scripting languages are different from the programming language, and in fact, we can position them as a subgroup of programming languages.

The script, in the dictionary, refers to the series of instructions, writing using a particular alphabet or a set of works to be made as a scenario. Like a meaning word, script languages are an automated series of statements executed in a particular order.

Scripting languages are programs that work at the runtime, read and interpret by programs without compilation. These are domain-specific languages. So they just work for a certain job.

JavaScipt is a good example of scripting languages:

Runs only inside browsers.
Can’t be compiled.
It is interpreted directly in runtime.
It may modify HTML documents.
Not direct access to the hardware.

JavaScript became the first language in the list of popular software languages for several years. JavaScript gets new updates through 2016 quickly and more than in the past. As written in the documentation, JavaScript is still live and it has not yet completed its evolution, and it will continue to grow with new features.