Email Authentication with React native and Firebase

In each and every app, you will see several kinds of authentication like login with Facebook, Google etc. But still, people prefer to entering email and password. In this tutorial, we are going to integrate Email authentication with React native and Firebase. Using firebase makes it easier to use. Let me tell you how?

Let’s get started. So we are going to start it from scratch. Begin with

Creating new react native project with expo:

We are not going to use react-native-cli instead of that we will use Expo. This will make our task a little bit easier. Because with react-native-cli, we need to install XCode or Android studio to at least run and test an application.

Once you hit enter, installation started. Once the installation is completed open project with VS Code.

To run the app you need go inside it using cd app-folder-name then run the command yarn start.

Once you run the app, the expo will open a new browser window.

You can see a lot of options available to run emulators for Android and iOS as well as QR Code. Here we are using the iOS simulator to run this app. Then after opening that simulator or use your device for open expo app.

There you will see the screen like as shown below:

If everything works properly then we are ready to go. So let’s start the real coding:

Bootstrap form quickly with a native base

To develop our interface quickly, we are using Nativebase for development.

To install native base , open a new terminal run the command given below:

npm i native-base -s

Don’t worry if you will some errors while native base installation takes place. Stop expo and runnpm install again.

and we will back for normal mode

Setup form with Native base components

So now, we are ready to import necessary Nativebase component to to App.js

Once you save the code shown above and then you will be able to see the instant result on the screen. This concept is also known as Hot Reloading.

So let’s make the form align center. To do this, we are going to play stylesheet properties. Just look at the code below, you can easily understand that we are playing with attributes in the stylesheet with containers.