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.

 to our app. A design system is the single source of truth which groups all the elements we need to design and develop in our app by providing a set of components. It also saves us a lot of time by solving all the major use cases, like creating layouts in our application.

My absolute favorite when it comes to React Native is 

. It is based on Material Design which provides us with easy-to-use and well designed components like 

You might ask if implementing a design system is essential? The answer is no, but it really speeds up the development process. All components are well tested and used by thousands of developers, so we don't have to worry about their implementation.

Installation is very simple. We use the following command to add 

After installation is done we can start the implementation.

 adds the theme to all the components in our application. It also acts as a portal to components which need to be rendered at the top level (for example modals).

import { Provider } from "react-native-paper";

By "theme" we mean all the colors and fonts that our components will use. I created the 

 file to modify default colors and add some new ones. To use our theme we must pass it to the 

You won't see any changes in the app yet, because we only set up the theme for future use.

Let's actually test some components and see how they look.

 and place it in our app. As we can see it is nothing special, just yet. We can add prop 

For the purpose of this course I created a little abstraction over the 

 component to add some extra styles to it.
It will make our button bigger and make it fit to our screen more.

import { Button as PaperButton } from "react-native-paper";

export default function Button({ mode, style, ...props }) {
  return (
    <PaperButton
      style={[
        styles.button,
        mode === "outlined" && { backgroundColor: theme.colors.surface },
        style,
      ]}
      labelStyle={styles.text}
      mode={mode}
      {...props}
    />
  );
}

We can replace the current button with our own implementation.

One thing worth noticing is that the color of our button is actually taken from the 

 that we provide. For example if we change 

, all buttons in the application will turn red. The same goes for text and background colors.

The second most important components in our app are 

 that looks amazing and takes care of all the animations. We are going to use it a lot in our application.

I also created a little abstraction over the 

 that adds some extra styles to it. I implemented additional props 

 so we can control what is displayed below the input. This will be very useful later on.

import { TextInput as Input } from "react-native-paper";

export default function TextInput({ errorText, description, ...props }) {
  return (
    <View style={styles.container}>
      <Input
        style={styles.input}
        selectionColor={theme.colors.primary}
        underlineColor="transparent"
        mode="outlined"
        {...props}
      />
      {description && !errorText ? (
        <Text style={styles.description}>{description}</Text>
      ) : null}
      {errorText ? <Text style={styles.error}>{errorText}</Text> : null}
    </View>
  );
}

It is always a good idea to add some basic typography to our project. In our case we are going to add 

 components. They will be used to display important information on the screen.

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

export default function Header(props) {
  return <Text style={styles.header} {...props} />;
}

const styles = StyleSheet.create({
  text: {
    fontSize: 15,
    lineHeight: 21,
    textAlign: "center",
    marginBottom: 12,
  },
});

. This is because we want to ensure that our text will use the colors provided in our 

To sum up, we have added a design system to our app with 

. Now we have more components to build our application with.

In the next lesson we are going to add another great library to help us with screen navigation.

Thank you and see you in the next lesson!

---
title: How to Add Material Design to React Native With Paper
description: React Native Paper
privateVideoUrl: https://fullstack.wistia.com/medias/6fnvcdu6tr
isPublicLesson: true
---

# React Native Paper

In this lesson we are going to add a **design system** to our app. A design system is the single source of truth which groups all the elements we need to design and develop in our app by providing a set of components. It also saves us a lot of time by solving all the major use cases, like creating layouts in our application.

My absolute favorite when it comes to React Native is [react-native-paper](https://reactnativepaper.com/). It is based on Material Design which provides us with easy-to-use and well designed components like `<Buttons/>` and `<TextInputs/>`.

You might ask if implementing a design system is essential? The answer is no, but it really speeds up the development process. All components are well tested and used by thousands of developers, so we don't have to worry about their implementation.

Installation is very simple. We use the following command to add `react-native-paper` to our app.

```shell
npm install react-native-paper
```

After installation is done we can start the implementation.

First we need to wrap our app with the **`<Provider/>`** component from `react-native-paper`. `<Provider/>` adds the theme to all the components in our application. It also acts as a portal to components which need to be rendered at the top level (for example modals).

```js
import { Provider } from "react-native-paper";
```

By "theme" we mean all the colors and fonts that our components will use. I created the `theme.js` file to modify default colors and add some new ones. To use our theme we must pass it to the `<Provider/>` component as a prop.

You won't see any changes in the app yet, because we only set up the theme for future use.

Let's actually test some components and see how they look.

We'll start with the `<Button/>` component. We export `<Button/>` from `react-native-paper` and place it in our app. As we can see it is nothing special, just yet. We can add prop `mode="contained"` to make our button stand out in the UI.

For the purpose of this course I created a little abstraction over the `<Button/>` component to add some extra styles to it.
It will make our button bigger and make it fit to our screen more.

```js
import { Button as PaperButton } from "react-native-paper";

export default function Button({ mode, style, ...props }) {
  return (
    <PaperButton
      style={[
        styles.button,
        mode === "outlined" && { backgroundColor: theme.colors.surface },
        style,
      ]}
      labelStyle={styles.text}
      mode={mode}
      {...props}
    />
  );
}
```

We can replace the current button with our own implementation.

![](https://d2uusema5elisf.cloudfront.net/courses/creating-a-react-native-login/module_01/lesson_01.04_React_Native_Paper/public/button.png)

One thing worth noticing is that the color of our button is actually taken from the `theme` that we provide. For example if we change `primary` color to `red`, all buttons in the application will turn red. The same goes for text and background colors.

The second most important components in our app are `<TextInputs/>`. `react-native-paper` provides the component `<TextInput/>` that looks amazing and takes care of all the animations. We are going to use it a lot in our application.

![](https://d2uusema5elisf.cloudfront.net/courses/creating-a-react-native-login/module_01/lesson_01.04_React_Native_Paper/public/input.png)

I also created a little abstraction over the `<TextInput/>` that adds some extra styles to it. I implemented additional props `description` and `errorText` so we can control what is displayed below the input. This will be very useful later on.

```js
import { TextInput as Input } from "react-native-paper";

export default function TextInput({ errorText, description, ...props }) {
  return (
    <View style={styles.container}>
      <Input
        style={styles.input}
        selectionColor={theme.colors.primary}
        underlineColor="transparent"
        mode="outlined"
        {...props}
      />
      {description && !errorText ? (
        <Text style={styles.description}>{description}</Text>
      ) : null}
      {errorText ? <Text style={styles.error}>{errorText}</Text> : null}
    </View>
  );
}
```

It is always a good idea to add some basic typography to our project. In our case we are going to add `<Header/>` and `<Paragraph/>` components. They will be used to display important information on the screen.

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

export default function Header(props) {
  return <Text style={styles.header} {...props} />;
}

const styles = StyleSheet.create({
  text: {
    fontSize: 15,
    lineHeight: 21,
    textAlign: "center",
    marginBottom: 12,
  },
});
```

As you can see we are using the `<Text/>` component exported from `react-native-paper` instead of the `<Text/>` component from `react-native`. This is because we want to ensure that our text will use the colors provided in our `theme.js` file.

![](https://d2uusema5elisf.cloudfront.net/courses/creating-a-react-native-login/module_01/lesson_01.04_React_Native_Paper/public/typography.png)

To sum up, we have added a design system to our app with `react-native-paper`. Now we have more components to build our application with.

In the next lesson we are going to add another great library to help us with screen navigation.

_Thank you and see you in the next lesson!_


There isnt even a property called surface in the theme, this code is annoying to follow

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 Add Material Design to React Native With Paper