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

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 start from the absolute basics. We are going to install all the necessary libraries and set up our project.

If you have previously worked with JavaScript, then you probably have Node installed on your device. If not, please visit the 

If you want to check your current Node JS version, simply use this command in your terminal:

I recommend using Node JS version 10 since it is the one I'll be using in this course.

For creating our React Native project we are going to use 

 which is an open-source platform for making native apps for Android and iOS using JavaScript and React.

There is also a way to create projects using React Native CLI but it has some drawbacks and if you are a beginner, I would not recommend doing it that way just yet.

Expo simplifies most of the time-consuming work like building your app and releasing it to the App Store and Google Play. It also doesn't require you to modify any of the native code using Xcode or Android Studio.

Before creating the project we need to install Expo command line tools, using this command:

Once this is done we have all the tools we need to create our project.

Open the terminal at your desired project destination and run this command:

When creating our project we have a few templates to choose from. We are going to select 

. If you prefer TypeScript there is also an template for you.

After a few minutes, your project will be ready!

It is always a good idea to check if you are able to run your app and see if it works.

If you want to open app on an iOS simulator, you can run the following command:

You can also open the app on an Android emulator, by running the command:

Since I am on Mac I prefer using the iOS simulator because it performs better and loads faster.

After a successful build, you should see your application.

If everything works, take a look at the project in your editor.

One thing I like to start with is creating a 

 folder where all our components and screens will be.

At this point we are almost ready to get started with our application.

In the next lesson we are going to add some of my favorite libraries that make the whole experience of developing apps more pleasant and elegant.

Thank you and see you in the next lesson!

---
title: How to Create a React Native App Project With Expo
description: Creating your project with Expo
privateVideoUrl: https://fullstack.wistia.com/medias/yn7nqmvoms
isPublicLesson: true
---

# Creating your project with Expo

In this lesson we start from the absolute basics. We are going to install all the necessary libraries and set up our project.

If you have previously worked with JavaScript, then you probably have Node installed on your device. If not, please visit the [Node JS website](https://nodejs.org/en/download/) and install it.

If you want to check your current Node JS version, simply use this command in your terminal:

```shell
node --version
```

I recommend using Node JS version 10 since it is the one I'll be using in this course.

For creating our React Native project we are going to use [Expo](https://expo.io/) which is an open-source platform for making native apps for Android and iOS using JavaScript and React.

There is also a way to create projects using React Native CLI but it has some drawbacks and if you are a beginner, I would not recommend doing it that way just yet.

Expo simplifies most of the time-consuming work like building your app and releasing it to the App Store and Google Play. It also doesn't require you to modify any of the native code using Xcode or Android Studio.

Before creating the project we need to install Expo command line tools, using this command:

```shell
sudo npm install --global expo-cli
```

Once this is done we have all the tools we need to create our project.

Open the terminal at your desired project destination and run this command:

```shell
expo init my-amazing-app
```

When creating our project we have a few templates to choose from. We are going to select `blank`. If you prefer TypeScript there is also an template for you.

![](https://d2uusema5elisf.cloudfront.net/courses/creating-a-react-native-login/module_01/lesson_01.02_Creating_Project_with_Expo/public/template.png)

After a few minutes, your project will be ready!

You should see the following output.

![](https://d2uusema5elisf.cloudfront.net/courses/creating-a-react-native-login/module_01/lesson_01.02_Creating_Project_with_Expo/public/finish.png)

It is always a good idea to check if you are able to run your app and see if it works.

If you want to open app on an iOS simulator, you can run the following command:

    npm run ios

You can also open the app on an Android emulator, by running the command:

    npm run android

Since I am on Mac I prefer using the iOS simulator because it performs better and loads faster.

After a successful build, you should see your application.

![](https://d2uusema5elisf.cloudfront.net/courses/creating-a-react-native-login/module_01/lesson_01.02_Creating_Project_with_Expo/public/preview.png)

If everything works, take a look at the project in your editor.

-   Starting at the bottom we have our **`package.json`** file where we can see a list of all available scripts and currently installed dependencies. Installing any new library will update this file.
-   In every Expo project we also have an **`app.json`** file, which contains all the metadata for our app, like the app's name, bundle identifiers and more. During this course we are going to edit this file several times.
-   Lastly we have our **`App.js`** file which is an entry point for our application. We will start building our application from here. As you can see, changing text inside the `<Text/>` component immediately changes content in our app. We can delete the `<StatusBar/>` component since we are not going to use it in our project.

One thing I like to start with is creating a `src` folder where all our components and screens will be.

At this point we are almost ready to get started with our application.

In the next lesson we are going to add some of my favorite libraries that make the whole experience of developing apps more pleasant and elegant.

_Thank you and see you in the next lesson!_


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:

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:

How to Create a Stack Navigator With react-navigation

Lesson 3:

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:

Create a React Native Password Reset and Registration Form

Module 4: Authorization

Lesson 1:

How to Add Firebase to a React Native App

Lesson 2:

Add Authorization Methods to a React Native App

Lesson 3:

How to Add a React Native Splash Screen

Lesson 4:

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

How to Create a React Native App Project With Expo