Firebase is a Backend as a Service (BaaS) that provides an advantage to mobile developers who use React Native for developing mobile applications. As a React Native developer, by using Firebase you can start building an MVP (minimum viable product), keeping the costs low and prototyping the application pretty fast.
In this tutorial, we will learn how to get started by integrating Firebase in a React Native application. We will also create a small application from scratch with the help of Firebase & React Native to see how they work together.
Getting Started
Firebase is a platform that got acquired by Google and has a healthy and active community. Most users in this community are web and mobile developers as Firebase can help with mobile analytics, push notification, crash reporting, and out-of-the-box it also provides email as well as social authentication.
To get started, you will need a target mobile OS, whether you choose to go with iOS or Android or both. Please refer to the React Native official documentation if you are setting up a React Native development environment for the first time. You will need SDK tools and Android Studio especially to set up a developer environment for Android. For iOS, you need Xcode installed on your macOS. You will also need:
-
Nodejs (
>= 12.x.x
) and npm/yarn installed -
react-native-cli (
>= 2.0.1
) - Or use npx
React Native is distributed as two npm packages, react-native-cli
, and react-native
. We are going to use the react-native-cli
to generate an app. Begin by installing it:
npm install -g react-native-cli
Now, let’s create a new React Native project called “rnFirebaseDemo”:
react-native init rnFirebaseDemo
When the above command is done running, traverse into the project directory using cd rnFirebaseDemo
. Now, let’s check if everything is working correctly and our React Native application has been properly initialized by running one of the following commands:
# For iOS
Yarn run run-ios
# For Windows/Unix users
yarn run android
This command will run the default screen as shown below in an iOS simulator or Android emulator but it will take a few moments since we are running it for the first time.
Configuring a Firebase Project
To start a new Firebase app with a frontend framework or a library, you need the API keys. To obtain these API keys, you need access to a Firebase project. A new Firebase project is created from the Firebase console.
Initially, you can create a free tier Firebase project known as Spark Plan. To know about pricing and more information on Firebase plans, take a look here.
Now, click on the Add project button and then enter the name of the Firebase project.
Then, click the Continue on the step 2 screen.
On the step 3 screen, you can leave everything as default and press the Create project button to create a new Firebase project.
When the loading finishes, press the button and you’ll be welcomed by the main dashboard screen of the Firebase project.
Adding Firebase to a React Native project
The react-native-firebase library is the officially recommended collection of packages that brings React Native support for all Firebase services on both Android and iOS apps.
To add it to our existing React Native application, we need to install the following dependency:
yarn add @react-native-firebase/app
To connect the iOS app with your Firebase project’s configuration, you need to generate, download, and add a GoogleService-Info.plist
file to the iOS bundle.
From the Firebase dashboard screen, click on Project Overview > Settings and in the General tab, go to Your Apps section. Click on the Add app button. A modal appears as shown below.
Select iOS in the modal and then, in step 1, enter your app details and click the Register app button.
In step 2, download the GoogleService-Info.plist
file.
Then, using Xcode, open the projects /ios/{projectName}.xcworkspace
.
Right-click on the project name and "Add files" to the project:
Select the downloaded GoogleService-Info.plist
file from your computer, and ensure the "Copy items if needed" checkbox is enabled.
To allow Firebase on iOS to use the credentials, the Firebase iOS SDK must be configured during the bootstrap phase of your application. Open the /ios/{projectName}/AppDelegate.m
file and, at the top of the file, add:
#import <Firebase.h>
Within the same file, add the following at the top of the didFinishLaunchingWithOptions
function:
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
if ([FIRApp defaultApp] == nil) {
[FIRApp configure];
}
// … the rest of the function body remains the same
Next, rebuild the iOS app. Execute the following commands:
cd ios/
pod install --repo-update
cd ..
npx react-native run-ios
To connect the Android app to your Firebase project’s configuration, you need to generate, download and add a google-services.json
file to the iOS bundle.
From the Firebase dashboard screen, click on Project Overview > Settings and in the General tab, go to the “Your Apps” section. Click on the Add app button and then click the button with the Android icon in the modal.
In Step 1, enter the details of your app and then click the button “Register app”.
The "Android package name" in the image below, must match your local projects package name which can be found inside of the manifest
tag within the /android/app/src/main/AndroidManifest.xml
file within your project.
In step 2, download the google-services.json
file and place it inside of your React Native project at the following location: /android/app/google-services.json
.
To allow Firebase on Android to use the credentials, the google-services plugin must be enabled on the project. This requires modification to two files in the Android directory. Add the google-services
plugin as a dependency inside of your /android/build.gradle
file.
buildscript {
dependencies {
// ... other dependencies
// Add the line below
classpath 'com.google.gms:google-services:4.3.8'
}
}
Lastly, execute the plugin by adding the following to your /android/app/build.gradle
file:
apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services' // <- Add this line
Next, rebuild the android app. Execute the following commands:
npx react-native run-android
The package is used to configure and install Firebase SDK in a React Native project. To use any of the Firebase features such as Auth, Firestore, Storage, or Realtime Database, you have to install the individual packages from the React Native Firebase library.
In this tutorial, let’s install and configure the Realtime Database. Open the terminal window and execute the following series of commands:
yarn add @react-native-firebase/database
# after successful installation, for ios
cd ios/
pod install
cd..
npx react-native run-ios
# for android, just rebuild the app
npx react-native run-android
Building app screens
When we open the project in a code editor, its structure looks like this:
We need to make some modifications before we can really start building our app. Create an src
directory inside the root folder. This is where our app components and screens will live. Further, within the src
directory, we will create two folders: screens
and components
.
The screen
directory will contain all the UI-related components that we need to display to the end-user, whereas the components
folder will contain any other component that will be used or re-used to display the user interface.
Let us create our first screen, the Home screen, inside screens/
with a new file Home.js
.
import React from 'react';
import { View, Text } from 'react-native';
export default function Home() {
return (
<View>
<Text>Home Screen</Text>
</View>
);
}
Our next screen is going to be Add Item
. Create a new file called AddItem.js
.
import React from 'react';
import { View, Text } from 'react-native';
export default function AddItem() {
return (
<View>
<Text>Add Item</Text>
</View>
);
}
Our last screen is going to be a list of items that we need to display. In the same directory, create a new file called List.js
.
import React from 'react';
import { View, Text } from 'react-native';
export default function List() {
return (
<View>
<Text>List</Text>
</View>
);
}
Adding react-navigation
To navigate between different screens, we need to add the react-navigation
library. We are going to use the 5.0.0
version.
yarn add @react-navigation/native react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view @react-navigation/stack
Then, add the following line at the top of the index.js
file:
import 'react-native-gesture-handler';
The next step is to run the command below and link the libraries we just installed:
cd ios/
pod install
After adding this package, let us run the build process again:
npx react-native run-ios
# OR
npx react-native run-android
Now, to see it in action, let us add the Home component as our first screen. Add the following code in App.js
.
import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import Home from './src/screens/Home';
// we will use these two screens later in the Navigator
import AddItem from './src/screens/AddItem';
import List from './src/screens/List';
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
At this stage, if we go to the simulator, we will see the following result:
The Home Screen is showing up. We will add two other screens as routes to AppNavigator
in order to navigate to them through the Home Screen.
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="AddItem" component={AddItem} />
<Stack.Screen name="List" component={List} />
</Stack.Navigator>
</NavigationContainer>
);
}
Now, our stack has three routes: a Home route, an AddItem route, and a ListItem route. The Home route corresponds to the Home
screen component, the AddItem corresponds to the AddItem
screen and the ListItem route corresponds to the ListItem
component.
Navigating between the screens
Previously, we defined a stack navigator with three routes but we didn't hook them up in order to navigate between them. Well, this is an easy task too. The react-navigation
library provides us with a way to manage navigation from one screen to another and back. To make this work, we will modify Home.js
.
import React from 'react';
import { Button, View, Text } from 'react-native';
export default function Home ({navigation}) {
return (
<View>
<Text>Home Screen</Text>
<Button
title="Add an Item"
onPress={() => navigation.navigate('AddItem')}
/>
<Button
title="List of Items"
color="green"
onPress={() => navigation.navigate('List')}
/>
</View>
);
}
In the code above, we are adding a Button
component from the react-native
API. react-navigation
passes a navigation prop in the form of navigation.navigate()
to every screen in the stack navigator. We have to use the same screen name on the onPress
function to navigate as we defined in App.js
under AppNavigator
.
You can also customize the back button manually with your own styling on both screens AddItem
and List
but, for our demonstration, we are going to use the default styling.
Creating a Database with Firebase
Go to the Firebase Console, and click the Realtime Database from the menu bar. If you are creating a realtime database for the first time in your Firebase project, click the Create Database button.
Then, when asked for rules, enable test mode. For the example app we’re building in this demo, we will enable the database in the test mode.
Adding Data from the App to Firebase
In this section, we will edit AddItem.js
which represents an input field and a button. The user can add an item to the list and it will get saved to Firebase data.
import React from 'react';
import {
View,
Text,
TouchableHighlight,
StyleSheet,
TextInput,
Alert
} from 'react-native';
import database from '@react-native-firebase/database';
let addItem = item => {
database().ref('/items').push({
name: item
});
};
export default function AddItem (){
const [name, onChangeText] = React.useState(‘’);
const handleSubmit = () => {
addItem(name);
Alert.alert('Item saved successfully');
};
return (
<View style={styles.main}>
<Text style={styles.title}>Add Item</Text>
<TextInput style={styles.itemInput} onChangeText={text => onChangeText(text)} />
<TouchableHighlight
style={styles.button}
underlayColor="white"
onPress={handleSubmit}
>
<Text style={styles.buttonText}>Add</Text>
</TouchableHighlight>
</View>
);
}
const styles = StyleSheet.create({
main: {
flex: 1,
padding: 30,
flexDirection: 'column',
justifyContent: 'center',
backgroundColor: '#6565fc'
},
title: {
marginBottom: 20,
fontSize: 25,
textAlign: 'center'
},
itemInput: {
height: 50,
padding: 4,
marginRight: 5,
fontSize: 23,
borderWidth: 1,
borderColor: 'white',
borderRadius: 8,
color: 'white'
},
buttonText: {
fontSize: 18,
color: '#111',
alignSelf: 'center'
},
button: {
height: 45,
flexDirection: 'row',
backgroundColor: 'white',
borderColor: 'white',
borderWidth: 1,
borderRadius: 8,
marginBottom: 10,
marginTop: 10,
alignSelf: 'stretch',
justifyContent: 'center'
}
});
In the code above, we are adding a Firebase database instance from config.js
and db
and then pushing any item that the user adds through addItem
and handleSubmit()
. You will get an alert message when you press the Add button to add the item from the input value as shown below.
To verify that the data is there in the database, go to your Firebase console.
Fetching Items from the Database
To fetch data from the Firebase database, we are going to use the same reference to db
in List.js
.
import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
import ItemComponent from '../components/ItemComponent';
import database from '@react-native-firebase/database';
let itemsRef = database().ref('/items');
export default function List() {
const [itemsArray, setItemsArray] = React.useState([]);
React.useEffect(() => {
itemsRef.on('value', snapshot => {
let data = snapshot.val();
const items = Object.values(data);
setItemsArray(items);
});
}, []);
return (
<View style={styles.container}>
{itemsArray.length > 0 ? (
<ItemComponent items={itemsArray} />
) : (
<Text>No items</Text>
)}
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#ebebeb',
},
});
For the ItemComponent
, we create a new file inside components/ItemComponent.js
. This is a non-screen component. Only the List
will use it to map
and display each item.
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
export default function ItemComponent ({items}) {
return (
<View style={styles.itemsList}>
{items.map((item, index) => {
return (
<View key={index}>
<Text style={styles.itemtext}>{item.name}</Text>
</View>
);
})}
</View>
);
}
const styles = StyleSheet.create({
itemsList: {
flex: 1,
flexDirection: 'column',
justifyContent: 'space-around'
},
itemtext: {
fontSize: 24,
fontWeight: 'bold',
textAlign: 'center'
}
});
This step concludes the integration of a Firebase database with our React Native app. You can now add the new data items and fetch them from the database as shown below.
Conclusion
In this tutorial, we’ve shown you how to integrate Firebase with a React Native application. You don’t need a complete server that creates an API and further uses a database to prototype or build an MVP of your application.
You can find the complete code inside this Github repo.
Finally, don't forget to pay special attention if you're developing commercial React Native apps that contain sensitive logic. You can protect them against code theft, tampering, and reverse engineering by following our guide.
Top comments (0)