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

For auth, it has a defined React Native bundle and users of auth in React Native should only import auth methods from the 'firebase/auth/react-native path.

import { initializeAuth, getReactNativePersistence } from 'firebase/auth/react-native';
import { getFunctions } from 'firebase/functions;

Firestore

Although Firestore, like Auth, provides a separate build for React Native, no special import syntax is needed. You can use import { getFirestore } from "firebase/firestore"; as usual. The firestore package has a defined “react-native” main field in its package.json that React Native recognizes and properly incorporates into the compiled result.

Common Mistakes

The pattern below (importing some methods from 'firebase/auth' and some from 'firebase/auth/react-native' is incorrect.) firebase/auth/react-native is a complete firebase auth bundle, as is firebase/auth. You should only import from the react-native path because importing from both paths will import duplicate auth bundles.

import { initializeAuth } from 'firebase/auth'
import { getReactNativePersistence } from 'firebase/auth/react-native';
import { initializePerformance } from 'firebase/performance';

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.