You've successfully subscribed to Smartcodehub ™ Blog
Great! Next, complete checkout for full access to Smartcodehub ™ Blog
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.
Integrate Firebase To React Native App

Integrate Firebase To React Native App

. 5 min read

In this blog, i am going to explain you all about how you can integrate firebase to your application with support of firebase database and firebase authentication.Before understanding the integration part of firebase let's first understand basics.

What is React Native?

React Native is an open source mobile-application framework developed by Facebook.It is utilized to create applications for Android, iOS, Web and UWP by empowering engineers to utilize React alongside local stage capacities. Besides, a fragmented port for Qt additionally exists.

Why React Native?

It is unquestionably an intriguing structure that encourages web engineers to make hearty versatile applications utilizing their current Javascript libraries. The reward point over it is that: it is quicker versatile improvement, increasingly effective code sharing crosswise over cross stages like iOS, Android and the web without yielding the end client's understanding or application quality. On the off chance that your designers can deal with the vulnerability that accompanies working with another innovation, and needs to create portable applications for something beyond one stage, you ought to take a gander at React Native.

Advantages of React Native:-

Suitable for Developers:- While being developed cycle when making changes, for web improvement one can take off changes by invigorating the program yet in versatile advancement, you have to convey the code-cycle each to actualize the changes. It isn't important to re-arrange the whole application to be remade each time you make changes.

Cost decrease and reuse:- By utilizing React Native, you can utilize indistinguishable code for sending on iOS from well as on Android. This takes you to colossal sparing being developed time and cash. According to the counts 90% of the code can be reused among Android and iOS which is simply excessively great, sparing part of time in addition to some additional time for adjustments that is it.

Live Reloading:- Testing is done each time when some change is made in the code composed will reflect live in the portable screen. With React Native, it expels the need of recompilation of the application each time a change has been made.If you have two windows opened – one containing the code and the other demonstrating a versatile screen because of the code – you can quickly observe the impact of what you have changed in one screen, on the other screen.

Best for portable situations utilizing troubleshooting apparatuses:- React local gives you advantage of utilizing wise investigating devices which can be used of whatever content manager you lean toward for Javascript altering. Respond local does not drive you to work Xcode to create for iOS or Android. Respond local is superfast and is very much tuned to cell phones.

Let's see how we can integrate firebase to our app

Step 1 ) Go to firebase console and create a project from here.

Step 2 ) Add the web app to firebase.By clicking on the button in white square.

After clicking on the register button you will get the firebase config key.

var firebaseConfig ={    
apiKey:"xxxxxxxxxxxxxxxxxxxxxxx",    
authDomain:"xxxxxx.firebaseapp.com",    databaseURL:"https://xxxxx.firebaseio.com",    
projectId:"xxxxx",    
storageBucket:"",    
messagingSenderId:"xxxxxxxxxxx",    
appId:"xxxxxxxxxxxxxxxxxxxxxxxxxx"  
};  // Initialize Firebase  

firebase.initializeApp(firebaseConfig);

Now save it somewhere because we need it in our app and click on continue to console button.

Step 3 ) Let make the react App.

First install the expo cli globally.

npm i -g expo-cli

Now make an expo app by using the above command.

expo init ReactApp
? Choose a template:
  ----- Managed workflow -----
> blank                 a minimal app as clean as an empty canvas
  blank (TypeScript)    same as blank but with TypeScript configuration
  tabs                  several example screens and tabs using react-navigation
  ----- Bare workflow -----
  minimal               bare and minimal, just the essentials to get you started
  minimal (TypeScript)  same as minimal but with TypeScript configuration
  

here you can see the option to select template will be choosing blank (Typescript).

cd ReactApp
code .

Now you will have an interface like

Now let's install firebase to your project.

npm i firebase --save 
or 
yarn add firebase

Now after installing firebase go to your app.tsx file and add

import * as Firebase from "firebase";

which is something like this

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import * as Firebase from "firebase";

export default class App extends React.component {
  render()
  {
    return(
      <View style={styles.container}>
        <Text>Run expo start to run app on expo client app.</Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Now let initialize the firebase,for that you need to add  the firebase config to app.tsx

let firebaseConfig ={    
apiKey:"xxxxxxxxxxxxxxxxxxxxxxx",    
authDomain:"xxxxxx.firebaseapp.com",    databaseURL:"https://xxxxx.firebaseio.com",    
projectId:"xxxxx",    
storageBucket:"",    
messagingSenderId:"xxxxxxxxxxx",    
appId:"xxxxxxxxxxxxxxxxxxxxxxxxxx"  
};

add this code before export.

now in export add componentWillMount() which will initialize the firebase.

componentWillMount() {
    Firebase.initializeApp(firebaseConfig);
}
  

At end your file app.tsx will look something like this

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import * as  Firebase from "firebase";

let firebaseconfig = {
 	apiKey:"xxxxxxxxxxxxxxxxxxxxxxx",    
	authDomain:"xxxxxx.firebaseapp.com", 
	databaseURL:"https://xxxxx.firebaseio.com",    
	projectId:"xxxxx",    
	storageBucket:"",    
	messagingSenderId:"xxxxxxxxxxx",    
	appId:"xxxxxxxxxxxxxxxxxxxxxxxxxx"
}
export default class App extends React.Component {

  componentWillMount(){
    Firebase.initializeApp(firebaseconfig);
  }

  render()
  {
    return (
      <View style={styles.container}>
        <Text>Open up App.tsx to start working on your app!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

That's it now you can use firebase to anywhere in project.

If you face any error feel free to contact us.