Firebase is one of the most prominent cloud computing platforms to develop mobile and web apps. Firebase offers numerous MBaaS services for mobile development, including a database (NoSQL and document), file storage, authentication, crash reporting, notifications (FCM), analytics, hosting, dynamic links, remote config, A/B testing, machine learning, and so on.
Uploading images is a common feature in app development to process, store, and share images. Firebase provides a storage API service to store multimedia content. The best feature of the Firebase storage API is its robustness. It will automatically pause or resume the uploading task according to the network strength.
Firebase services can also be integrated with React Native projects, but this requires platform-specific (Android and iOS) setup and configurations. To cover everything, the whole process has been broken down into three guides:
Setting Up a Firebase Project for React Native (this guide)
This guide explains the implementation details to create a project in Firebase console and configure a React Native project with Firebase. The complete optimized codebase is available on the RNFirebaseStorage repository.
React Native follows the development structure and tools of React, so this guide assumes that you have basic knowledge of the following technologies and tools.
Follow the Getting Started with React Native on Android guide to learn the basics of React Native development.
The first step is to create a React Native project and set up the runtime environment:
1npx react-native init RNFirebaseStorage
1cd RNFirebaseStorage
2npx react-native run-android --verbose
3# or to run iOS app
4npx react-native run-iOS --verbose
The above command process may ask to install CocoaPods
, which is a dependency manager for iOS projects and is required to run iOS apps.
In the above command, --verbose
is optional but useful to view any potential issues, like below.
Note: Make sure to follow this guide's Known Gradle Issues section to learn about InvokerHelper
or build tool issues of gradle
in React Native.
Firebase SDK modules allow the apps to directly communicate with the Firebase server app. The react-native-firebase NPM module provides the basic functionality to integrate Firebase services with the React Native apps using JavaScript and native modules. Execute the below commands in the root folder of the React Native project to install the react-native-firebase
module:
1npm install @react-native-firebase/app
2# or using yarn
3# yarn add @react-native-firebase/app
To create Firebase projects for Android and iOS, create an account on Firebase Console, then select the Go to console option for the next steps:
Create/Add a Firebase Project: The first time, Firebase will show a Create a project option to set up a project. If there is already an existing project in the current account, select the Add Project option to create a new project:
-!'"
special characters only. Provide a name and click continue:
Project names can be duplicates, but always use a unique name to avoid possible configuration issues.
Select the default account for analytics:
It might take a couple of minutes to create a project. Press continue to go to the project screen after the successful project creation.
Firebase supports mobile and web apps, so the platform-specific apps need to be added under the Firebase project and the native (Android and iOS) project files need to be configured:
Select the Android app option in the Firebase project console and follow the steps to create and configure an Android project:
applicationId
key in the RNFirebaseStorage/android/app/build.gradle
file:1applicationId "com.rnfirebasestorage"
Add the package name in the Android package name field and provide a nickname to register the Android app.
google-services.json
file, then copy and paste the file in RNFirebaseStorage/android/app
folder.google-services
plugins to build the project, so add the google-services
dependency in the RNFirebaseStorage/android/build.gradle
file:1buildscript {
2ext {//...}
3repositories {//...}
4dependencies {
5//...
6classpath 'com.google.gms:google-services:4.3.3' // add this
7}
8}
Add the google-services
plugin in the RNFirebaseStorage/android/app/build.gradle
file at the top:
1// apply plugin: "com.android.application"
2apply plugin: "com.google.gms.google-services" // add this
There is no need to add any other Firebase SDK dependency for Android. If you've opted for Google Analytics, it should also be added as an NPM module dependency, not as a gradle
dependency.
4. Verify App: Run the Android project to confirm the successful integration with Firebase:
1npx react-native run-android --verbose
Note: In case of any issue, make sure that the google-services.json
is correct, though there can be a slight delay to receive the update status. Alternately, run
1cd android && ./gradlew clean && cd ..
to clean the project and rerun the project.
Select the iOS app option in the Firebase project console and follow the steps to configure the iOS project in the React Native project:
package-name
) is a unique identifier that is required to create an iOS project in the Firebase console. The best way to get the bundle ID is via using XCode
, since often it's not available directly. The configurations files often use the value of globally defined variables. Open the RNFirebaseStorage.xcodeproj
(RNFirebaseStorage.workspace
) file with Xcode
and select the root folder of the project to view the value of Bundle identifier
in General
tab:Copy the identifier and paste it to the iOS bundle field:
GoogleService-Info.plist
file from the Firebase iOS project screen:
Add the file in the React Native's iOS project using Xcode:
Right-click on the project and select the Add Files to RNFirebaseStorage option.
GoogleService-Info.plist
file, then select Create groups and all the target projects:
didFinishLaunchingWithOptions
function:1@import Firebase; // add the import
2//...
3
4@implementation AppDelegate
5
6- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
7{
8// initialize Firebase SDK
9if ([FIRApp defaultApp] == nil) {
10[FIRApp configure];
11}
12// ...
13return YES;
14}
Note: As of Sep 2020, React native is using objective-c for iOS projects. Analytics dependency is required for an iOS project to verify the successful integration.
Now update the pod
dependencies:
1npm install @react-native-firebase/analytics
2# in the root folder
3cd ios && pod install --repo-update && cd ..
Firebase analytics dependency is a must to verify successful Firebase integration with iOS.
1npx react-native run-ios --verbose
The Firebase console may take time to confirm the successful integration of Firebase SDK with the iOS app.
A React Native project can use Firebase services using the NPM react-native-firebase/app
module, but the native (Android & iOS) apps need to be added to the Firebase project. The native projects need to be configured to set up Firebase dependencies and the Firebase SDK initialization (iOS only).
Read the next guide to learn about adding Firebase storage service and implement the image picker feature in React Native code. Happy coding!