Create Your First React Native App

  1. Home
  2. React-native
  3. Create Your First React Native App

Tags: React Native

A crash course in building your first React Native app in a weekend or less!

Last updated 2022-01-10 | 4.2

- How to use the most common React Native components
- Install and configure third party packages
- Setup various types of navigation

What you'll learn

How to use the most common React Native components
Install and configure third party packages
Setup various types of navigation
Design reusable React Native components
Confidently create future React Native applications

* Requirements

* Basics of Javascript and some ES6 syntax
* Comfortable using the command line (basic usage in this course)

Description

Interested in learning React Native but don’t want to spend the hours and hours searching for answers to errors you’ve never seen before, hunting down the right packages, frustratingly asking yourself why you can’t figure something so seemingly simple out, and becoming best friends with user90210 on StackOverflow?

This course is designed to get you up and running with React Native as quickly as possibly while introducing you to the most critical pieces of React Native development. It’s not the end-all-be-all - it’s designed to get you started fast while building a firm foundation.

There’s nothing like building your first app - and that’s what this course will help you accomplish.

React Native enables anyone with a computer and basic Javascript knowledge to develop native apps quickly and provide a user experience that no other Javascript based mobile solution has been able to provide before. With the likes of Facebook, Airbnb, Instagram, Tesla, and dozens more - there’s no doubt that React Native is the right solution for your mobile app.

We’ll cover

  • Scrolling lists

  • Designing and creating reusable components

  • Project organization

  • Navigation

  • Core APIs

  • Installing third party packages

  • And more…

And we’ll do this for both iOS and Android.

What if you’ve already built a React Native app?

Well, how do you feel about it? Are you confident in the choices you made? Do you feel like you’ve got a solid foundation of knowledge and experience? If so, then this course probably isn’t for you. However, if you feel like you were hacking a lot of things together, pasting code from StackOverflow that you didn’t truly understand, then you should consider joining.

Who this course is for:

  • People wanting to get started with React Native and want a quick win
  • React Native developers who want to strengthen their foundation of knowledge
  • Anyone wanting to get started with React Native
  • Developers looking for an alternative to their Cordova based applications

Course content

9 sections • 62 lectures

Getting Started 6 lectures

Introduction Preview 06:04

Installing React Native Preview 06:33

Project Organization Preview 03:57

Source Code Preview 00:19

Package Versions Preview 00:17

Creating the Basic Screens Preview 04:00

Building the Contact List 12 lectures

The Contacts Data Preview 00:14

API Overview: FlatList Component Preview 01:44

Exercise: Create a Basic FlatList Preview 00:24

Implementation: Create a Basic FlatList Preview 03:28

Organizing the Component Directory Preview 02:33

API Overview: StyleSheet & Flexbox Preview 02:41

API Overview: Platform Preview 02:08

Creating the Helper Functions Preview 00:16

Installing React Native Vector Icons Preview 03:06

API Overview: Icon Component Preview 02:58

Exercise: Create and Use a ListItem Component Preview 00:26

Implementation: Create and Use a ListItem Component Preview 21:12

Basics of Navigation 7 lectures

Overview of and Installing React Navigation Preview 02:10

API Overview: StackNavigator Preview 04:30

Exercise: Defining a StackNavigator Preview 00:19

Implementation: Defining a StackNavigator Preview 03:10

API Overview: Navigate Function Preview 01:43

Exercise: Navigating Contacts to Details Preview 00:09

Implementation: Navigating Contacts to Details Preview 02:00

Building the User Details Screen 11 lectures

API Overview: Screen Navigation Prop Preview 05:02

API Overview: Custom Navigation Bar Title Preview 03:11

Exercise: Create and Use a Header Component Preview 00:12

Implementation: Create and Use a Header Component Preview 11:13

API Overview: ScrollView Component Preview 02:17

Exercise: Create and Use an Actions Component Preview 00:22

Implementation: Create and Use an Actions Component Preview 14:47

Creating a Reusable Row Component Preview 09:58

Overview and Installation of Moment.js Preview 03:06

Exercise: Create and Use an Info Component Preview 00:14

Implementation: Create and Use an Info Component Preview 07:15

Tab Navigation 5 lectures

API Overview: TabNavigator Preview 03:45

Exercise: Create and Use a TabNavigator Preview 00:24

Implementation: Create and Use a TabNavigator Preview 06:08

Exercise: StackNavigators for All Tabs Preview 00:18

Implementation: StackNavigators for All Tabs Preview 02:35

Drawer Navigator 7 lectures

API Overview: Drawer Navigator Preview 04:06

Exercise: Creating the DrawerNavigator Preview 00:19

Implementation: Creating the DrawerNavigator Preview 02:35

Opening the Drawer from the Navigation Bar Preview 03:06

Tabs on iOS, Drawer on Android Preview 02:07

Exercise: A Better Navbar Drawer Button Preview 00:17

Implementation: A Better Navbar Drawer Button Preview 07:13

Building the Me Screen 5 lectures

Importing the Data Preview 00:35

Exercise: Composing the Me Screen Preview 00:18

Implementation: Composing the Me Screen Preview 04:06

Exercise: Creating a Button Component Preview 00:17

Implementation: Creating a Button Component Preview 07:18

Building the Add Screen 8 lectures

API Overview: TextInput Preview 03:59

Exercise: Creating a Custom TextInput Preview 00:11

Implementation: Creating a Custom TextInput Preview 06:55

Building a Form Preview 09:33

API Overview & Installation: React Native Keyboard Aware ScrollView Preview 01:44

Exercise: Using KeyboardAwareScrollView Preview 00:09

Implementation: Using KeyboardAwareScrollView Preview 01:46

Progressing From One Field to the Next Preview 08:39

Moving Forward 1 lectures

Further Learning Resources Preview 00:38