React Native and Firebase are an amazing pair for building scalable realtime applications. However, one area where developers commonly run into problems is deciding which SDK they need for their app — do you use the Firebase JavaScript SDK or the React Native Firebase SDK? Hybrid development and SDK management can feel tricky at times, so in this article we are going to break it all down so you can build knowing you’re following the right steps.

Firebase has two separate SDKs for React Native apps:

1. React Native Firebase SDK is the official recommended collection of packages that brings React Native support for all Firebase services on both Android and iOS apps. It directly wraps the native SDKs firebase-android-sdk and firebase-ios-sdk into a Javascript API thus allowing native APIs and the full range of Firebase features, including Analytics, Firestore, Dynamic Links, Crashlytics, Cloud Functions, etc..
2. Firebase JavaScript SDK is the official JavaScript library for applications using Firebase services. It provides a similar set of features as React Native Firebase, but it is not optimized for use on mobile as it does not have access to native APIs.

Why are there two choices and which one should you use?

Which SDK should you select for your project?

Just like any decision in life, there are different situations for each choice. However, you can break it down into two separate categories:

When should you use the React Native Firebase SDK?

• If you are using native mobile SDKs in your application
• If you need Firebase functionality not supported by the Firebase JavaScript SDK, like Dynamic Links, App Distribution or Crashlytics. To see a comprehensive list of all of the features offered by the React Native Firebase SDK, see the React Native Firebase SDK documentation.
• If you need Firebase functionality not fully supported by the Firebase JavaScript SDK in non-web environments including App Check, Analytics, Performance, Messaging, and Remote Config

When should you use the Firebase JavaScript SDK?

• If you are using Expo Go (the Expo tool that allows you to test on device)
• If your app targets Android, iOS, and the Web with one React Native codebase

Now we know the two main differences. Let’s focus on setting up the Firebase JavaScript SDK in an app.

Importing Firebase JavaScript SDK for React Native

When importing the Firebase JavaScript SDK, the imports are relatively uniform. However, several packages have their own dedicated React Native bundles including auth, firestore, and firestore-compat. As each package is actually self contained, you do not need to import both package bundles.

Nuances of Importing React Native Bundles

Auth and Firestore

Auth and Firestore provide a separate build for React Native, no special import syntax is needed. For example, you can use import { getFirestore } from "firebase/firestore"; as usual. The firestore and auth packages have a defined “react-native” main field in their package.json files that React Native recognizes and properly incorporates into the compiled result.

Auth Persistence in React Native

Since web APIs for persistent storage aren’t available in React Native, users will need to import and provide React Native’s async storage package: @react-native-async-storage/async-storage. It should be imported and provided to initializeAuth like so:

import { initializeAuth, getReactNativePersistence } from 'firebase/auth';
import ReactNativeAsyncStorage from '@react-native-async-storage/async-storage';

const auth = initializeAuth(app, {
persistence: getReactNativePersistence(ReactNativeAsyncStorage)
});

Otherwise auth will fall back to memory persistence, which means auth state won’t persist when you close and reopen the app. The auth SDK will warn you about memory persistence with the following message:

You are initializing Firebase Auth for React Native without providing
AsyncStorage. Auth state will default to memory persistence and will not
persist between sessions.

Conclusion

In summary, React Native Firebase SDK is the best option for using Firebase in a React Native app. It’s optimized for use with React Native and will provide the best performance and experience in your app. On the other hand, the Firebase JavaScript SDK is optimized for use on the web, and while it may lack select mobile features, there are specific instances where it is preferable.