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

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

node

expo-cli

react-native-paper

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.

👩‍💻 Get the full source code for this course:

Hi! My name is Tony, and I am going to be your guide as we step through this course, in which we will 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:

After finishing this course, you will be able to create a 

This course is perfect for beginners in mobile applications programming, and those who want to improve their React Native skills. It will enable you to save a ton of time that you would normally spend searching for the right libraries and looking through documentation to find the parts you need. The only thing you will need before getting started is some basic knowledge of 

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.

 provided that you can download for this course.

I would highly recommend creating a new project from scratch and building the application along with me.

 That way you will see your progress and be able to add your own modifications.

I am very excited to have you here and I can't wait to show you all the amazing things you can build!

You can also play with the web version of the app.

In case of any questions or problems, please contact me at:

I am incredibly excited to have you onboard - see you in the course!

---
title: Introduction
description: Introduction to "Creating a React Native Login" course
role: "INTRODUCTION"
privateVideoUrl: https://fullstack.wistia.com/medias/z8wcli77j7
isPublicLesson: true
---

👩‍💻 Get the full source code for this course:

-   [Download JavaScript version](https://api.newline.co/assets/protected/courses/creating-a-react-native-login/module_00_Introduction_and_Getting_Started/lesson_00.01_Introduction/protected/newline-login-template.zip)
-   [Download TypeScript version](https://api.newline.co/assets/protected/courses/creating-a-react-native-login/module_00_Introduction_and_Getting_Started/lesson_00.01_Introduction/protected/newline-login-template-typescript.zip)

# Introduction

Hi! My name is Tony, and I am going to be your guide as we step through this course, in which we will 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

After finishing this course, you will be able to create a **production-ready** React Native application.

This course is perfect for beginners in mobile applications programming, and those who want to improve their React Native skills. It will enable you to save a ton of time that you would normally spend searching for the right libraries and looking through documentation to find the parts you need. The only thing you will need before getting started is some basic knowledge of _JavaScript_ and _React_.

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.

The course is divided into **5 modules** comprising **16 lessons**:

1.  _Introduction_

-   setting up the project with Expo
-   adding basing linting and styling (ESLint and Prettier)
-   adding design system with [react-native-paper](https://reactnativepaper.com/)

2.  _Navigation_

-   getting to know [react-navigation](https://reactnavigation.org/) library
-   creating stack navigation
-   implementing transition between screens

3.  _Basic Screens_

-   creating a first screen
-   creating a login screen
-   creating register and reset password screens

4.  _Authorization_

-   adding Firebase into your project
-   implementing authorization methods
-   creating a loading screen
-   adding Google Sign In

5.  _Advanced Screens_

-   adding bottom navigation
-   creating a drawer menu

There is full [source code](https://api.newline.co/assets/protected/courses/creating-a-react-native-login/module_00_Introduction_and_Getting_Started/lesson_00.01_Introduction/protected/newline-login-template.zip) provided that you can download for this course.

**I would highly recommend creating a new project from scratch and building the application along with me.** That way you will see your progress and be able to add your own modifications.

I am very excited to have you here and I can't wait to show you all the amazing things you can build!

**Let's get started.**

## Preview

This is how our final product will look:

![start](https://d2uusema5elisf.cloudfront.net/courses/creating-a-react-native-login/module_00_Introduction_and_Getting_Started/lesson_00.01_Introduction/public/start.png)

![login](https://d2uusema5elisf.cloudfront.net/courses/creating-a-react-native-login/module_00_Introduction_and_Getting_Started/lesson_00.01_Introduction/public/login.png)

![register](https://d2uusema5elisf.cloudfront.net/courses/creating-a-react-native-login/module_00_Introduction_and_Getting_Started/lesson_00.01_Introduction/public/register.png)

![forgot](https://d2uusema5elisf.cloudfront.net/courses/creating-a-react-native-login/module_00_Introduction_and_Getting_Started/lesson_00.01_Introduction/public/forgot-password.png)

![home](https://d2uusema5elisf.cloudfront.net/courses/creating-a-react-native-login/module_00_Introduction_and_Getting_Started/lesson_00.01_Introduction/public/home.png)

![drawer](https://d2uusema5elisf.cloudfront.net/courses/creating-a-react-native-login/module_00_Introduction_and_Getting_Started/lesson_00.01_Introduction/public/drawer.png)

![profile](https://d2uusema5elisf.cloudfront.net/courses/creating-a-react-native-login/module_00_Introduction_and_Getting_Started/lesson_00.01_Introduction/public/profile.png)

## Demo

You can also play with the web version of the app.

<https://newline-login-template.web.app>

## Support

In case of any questions or problems, please contact me at:

[tomasz.przybyl.it@gmail.com](mailto:tomasz.przybyl.it@gmail.com)

I am incredibly excited to have you onboard - see you in the course!

_Happy Coding 🚀_

\--
**Tony**


Introduction to "Creating a React Native Login" course

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Creating a React Native Login

Module 1: Introduction

Introduction:

Start Here

Introduction: (2:24)

Introduction

Lesson 1: (3:13)

How to Create a React Native App Project With Expo

Lesson 2: (2:55)

How to Format React Code Style with ESLint and Prettier

Lesson 3: (3:45)

How to Add Material Design to React Native With Paper

Module 2: Navigation

Lesson 1: (2:34)

Add React Native and Expo App Navigation with react-navigation

Lesson 2: (3:11)

How to Create a Stack Navigator With react-navigation

Lesson 3: (4:49)

How to Transition Between Screens in React Native Navigation

Module 3: Basic Screens

Lesson 1: (4:54)

How to Add the First Screen to a React Native App

Lesson 2: (6:42)

How to Create a React Native Login Screen

Lesson 3: (5:35)

Create a React Native Password Reset and Registration Form

Module 4: Authorization

Lesson 1: (2:05)

How to Add Firebase to a React Native App

Lesson 2: (5:38)

Add Authorization Methods to a React Native App

Lesson 3: (4:24)

How to Add a React Native Splash Screen

Lesson 4: (5:44)

How to Add Google Sign In to a React Native App

Module 5: Advanced Screens

Lesson 1: (3:27)

Add Bottom Nagivation to React Native With bottom-tabs

Lesson 2: (3:05)

Add Drawer Navigation to a React Native App

Introduction