Introduction to "Creating a React Native Login" course

Introduction

How to Create a React Native App Project With Expo

How to Format React Code Style with ESLint and Prettier

How to Add Material Design to React Native With Paper

Add React Native and Expo App Navigation with react-navigation

How to Create a Stack Navigator With react-navigation

How to Transition Between Screens in React Native Navigation

Navigation

How to Add the First Screen to a React Native App

How to Create a React Native Login Screen

Creating register & reset password screens

Create a React Native Password Reset and Registration Form

Basic Screens

How to Add Firebase to a React Native App

Add Authorization Methods to a React Native App

How to Add a React Native Splash Screen

How to Add Google Sign In to a React Native App

Authorization

Add Bottom Nagivation to React Native With bottom-tabs

Add Drawer Navigation to a React Native App

Advanced Screens

This course will teach you how to create from scratch a simple login application using React Native.

You will get a step-by-step demonstration of solving some of the most common problems we encounter when building an application, including:

* project setup
* screen navigation
* user authorization
* state management

This course is perfect for beginners in mobile applications programming, and those who want to improve their React Native skills.

I came up with the idea for this course because React Native is the most popular cross-platform framework (according to JetBrains’ The State of Developer Ecosystem 2020, 42% of developers use it for their mobile apps). The popularity comes from the fact that developers still write with React code, but it’s shared across iOS and Android.

This course contains all the knowledge you need to create production-ready applications that can be released to the App Store and Google Play. I'll be introducing many tools that are commonly used when it comes to React Native applications, and that knowledge may come in handy in other projects as well.

This is how final product of this course looks like:

![start](https://raw.githubusercontent.com/venits/react-native-market/master/assets/newline-app-template/start.png)
![login](https://raw.githubusercontent.com/venits/react-native-market/master/assets/newline-app-template/login.png)
![register](https://raw.githubusercontent.com/venits/react-native-market/master/assets/newline-app-template/register.png)
![forgot](https://raw.githubusercontent.com/venits/react-native-market/master/assets/newline-app-template/forgot-password.png)
![home](https://raw.githubusercontent.com/venits/react-native-market/master/assets/newline-app-template/home.png)
![drawer](https://raw.githubusercontent.com/venits/react-native-market/master/assets/newline-app-template/drawer.png)
![profile](https://raw.githubusercontent.com/venits/react-native-market/master/assets/newline-app-template/profile.png)

I hope to see you in the course!

_Happy Coding 🚀_

In this course we are going to create from scratch a simple login application using React Native.

Creating a React Native Login

Importance of setting up development environment.

How to use design system (react-native-paper).

How to implement authorization with Firebase.

How to add bottom navigation and drawer menu.

In this lesson we are going to implement 

I believe that this is a very important feature which adds a lot of value to every app. Personally I always choose Google Sign In instead of 

 when possible. It is way quicker and also doesn't require me to create a new password. Of course it requires users to have a Google account, but nowadays that's very common.

Before we can start implementing Google Sign In we need to go to our 

 provider. We can change the public name and click 

. It will basically tell Firebase that our app is going to use Google as one of our sign in methods.

The first thing we need to take care of is the user interface for our Google Sign In button. Let's create a 

 folder. For now this component is going to display the 

import React from "react";
import { View } from "react-native";
import { Text } from "react-native-paper";

export default function GoogleLogin() {
  return (
    <View>
      <Text>Sign in with Google</Text>
    </View>
  );
}

In the final version of the screen, the Google Sign In button looks best when placed below the 

Right now the current design doesn't look all that appealing for users. For the purpose of this course I created my own version of the Google Sign In button that fits perfectly into our application.

export default function GoogleLogin() {
  return (
    <View style={styles.container}>
      <View style={styles.divider}>
        <Text style={styles.dividerText}>Or</Text>
      </View>
      <View style={styles.buttonsContainer}>
        <TouchableOpacity style={styles.button}>
          <GoogleLogo />
          <Text style={styles.buttonText}>Sign in with Google</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

---
title: How to Add Google Sign In to a React Native App
description: Google Sign In
privateVideoUrl: https://fullstack.wistia.com/medias/caghov25uj
---

# Google Sign In

In this lesson we are going to implement **Google Sign In** in our application. It looks like this:

![](https://d2uusema5elisf.cloudfront.net/courses/creating-a-react-native-login/module_04/lesson_04.04_Google_Sign_In/public/google.png)

I believe that this is a very important feature which adds a lot of value to every app. Personally I always choose Google Sign In instead of _email/password_ when possible. It is way quicker and also doesn't require me to create a new password. Of course it requires users to have a Google account, but nowadays that's very common.

Before we can start implementing Google Sign In we need to go to our [Firebase project](https://console.firebase.google.com/). Select the `Authorization` page and then head to the `Sign-in method` tab. Here we enable `Google sign-in` provider. We can change the public name and click `Save`. It will basically tell Firebase that our app is going to use Google as one of our sign in methods.

The first thing we need to take care of is the user interface for our Google Sign In button. Let's create a `<GoogleLogin/>` component inside `components` folder. For now this component is going to display the `<Text/>` component:

```js
import React from "react";
import { View } from "react-native";
import { Text } from "react-native-paper";

export default function GoogleLogin() {
  return (
    <View>
      <Text>Sign in with Google</Text>
    </View>
  );
}
```

In the final version of the screen, the Google Sign In button looks best when placed below the `Login` button. Let's do that.

Right now the current design doesn't look all that appealing for users. For the purpose of this course I created my own version of the Google Sign In button that fits perfectly into our application.