React Native Projects
4.0 (93 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
651 students enrolled
Wishlisted Wishlist

Please confirm that you want to add React Native Projects to your Wishlist.

Add to Wishlist

React Native Projects

Develop native cross-platform mobile apps more rapidly, easily and effectively with React Native!
4.0 (93 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
651 students enrolled
Created by Packt Publishing
Last updated 9/2016
Current price: $10 Original price: $95 Discount: 89% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 4 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Learn Basic navigation principles using React Native Navigator
  • Create a tab-based navigation structure on iOS and Android
  • Understand how React Native makes it easy to share code between iOS and Android apps in a sensible and customizable manner
  • Gain exposure to React and React Native's eloquent one-way data flow model, making apps easier to write and to debug
  • Discover the power of crafting mobile UIs on-the-fly with hot module reloading and no recompiling, using React Native's powerful styling system
  • Get a handle on the many built-in components React Native makes available to shorten your development cycle
  • Find out how to do instantaneous debugging in environments you're already used to such as Google Chrome
View Curriculum
  • Start building applications immediately with the featured examples and an easy-to-follow approach. Our video is based on three modern mobile projects, focusing on core React Native topics.

React Native is a fantastic new framework produced by Facebook that allows developers to create truly native applications running on both iOS and Android, all while writing code in JavaScript. It breaks down several of the complexities of mobile apps to ease development, and offers many pre-built components to accelerate development.

To quickly get going with React Native, this course walks you through the creation of three real-world mobile applications, each designed not only to introduce essential core concepts but also to show you how to make beautiful and functional applications using best practices. At the end of the course, you will have mastered creating and manipulating React Native apps, will know how to structure navigation and data flow, and will have been exposed to many built-in React Native components. You will also learn about pushing your applications to production and app stores. Both iOS and Android development are covered throughout the course.

By the end of this course you will be able to plan your own future progress with React Native.

About The Author

Joshua Lyman has been developing React Native applications since version 0.11, and has used the technology to release several production applications. He is active in the RN community, helping others answer questions when possible and contributing code and example repositories to help others out. He has been developing mobile applications in general for more than four years and also spends a lot of time on both web frontend work and backend servers, scaling the full stack. He often uses React (React Native's parent counterpart) for frontend work, and runs Node and C#/.NET servers on the backend. He helps clients do UI/UX reviews and design, and works with enterprises to create line-of-business applications; he occasionally does business intelligence work for companies, slicing and dicing data.

Who is the target audience?
  • If you are a developer who is looking forward to developing your JavaScript knowledge in building mobile applications by learning React Native, then this video is for you.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
41 Lectures
Installation and Setup
6 Lectures 41:56

This video provides an overview of the entire course.

Preview 03:59

Get to know the React Native framework and how it can help you develop mobile applications quicker and easier than ever before.

Introduction to React and React Native

Install the React Native toolset and required prerequisites on Mac OS X.

Installation (Mac)

Install the React Native toolset and required prerequisites on Windows.

Installation (Windows)

With the prerequisite tooling and environment setup complete, let's ensure that React Native is indeed installed and ready to create apps.

Verifying Installation

There are a variety of environments and IDEs in which you can write React Native code, but here we review using Sublime Text and several helpful packages to create a very productive React Native environment.

Environment Setup for Sublime Text
RelaxationStation App
10 Lectures 01:04:55

We will start our first full React Native project, titled "RelaxationStation," that will help our users relax and read some mindful quotes.

Preview 06:03

React Native has its own particular code patterns and structures, and we need to familiarize ourselves with these to recognize and build upon them.

Basic React Native Code Structures and Organization

We will begin to customize the default shell app by adding a text component and style it, and review some common issues and how to surmount them.

Adding and Styling Components

Apps are built on many UI elements, especially buttons. We will create our first button and place an image inside it and learn how to interact with it.

Adding Buttons and Images

Reusable components make development faster and more flexible, and this video will cover how to create your own.

Custom Components and Props

Core to any app is the ability to navigate between screens and elements. We will cover the most common navigation method in React Native and split our app into two screens.

Navigation in React Native

We will import a set of quotes from a JSON file for use in the app, and learn more about props and PropTypes.

Static Data and Properties

Our RelaxationStation app will get a big visual update in this video as we cover more styling options and cover the Platform API and the Inspector.

Intermediate Styling Techniques

Two central and often unfamiliar concepts in React Native revolve around the layout of elements and dealing with changing data in an app. We tackle both topics in this video by learning about Flexbox and app state.

Flexbox and Application State

Great UX often involves great animation. We wrap up this section by adding pleasing animations to our quotes screen.

Animations with LayoutAnimation
BeBriefed App
7 Lectures 37:49

We'll scaffold out our BeBriefed app and make a new main component to reduce repeated code across platforms in our index files.

Preview 04:04

There is a great ecosystem of open source third-party packages and libraries available for React Native, and we explore pulling those in. Also talk about stateless components and props.

Pulling in Third-party Libraries

Debugging is an essential part of any development process, and here we'll learn how to use the Chrome Dev Tools to step through, inspect, and manipulate code.

Debugging Techniques in React Native

We have covered a stacked navigation approach using the Navigator component, and now we'll introduce a cross-platform manner of implementing a tabbed navigation structure to our app.

Introducing Tabbed Navigation

With a tab bar in place we can now implement the rendering logic to show the different screen or tab contents based on what the user selects.

Switching Between Tabs

A short interlude to show some styling tricks and improving usability of the tab bar.

Styling Enhancements

Almost any good app needs to pull data from outside of it, and we'll make ours aware of an external API as well.

Integrating Data from an External API
Chat Now App
6 Lectures 37:17

We'll flesh out the initial screens of our Chat Now app and talk about how to use the TextInput component to let the user type in information.

Preview 07:06

We will cover some more advanced ways to interact with the Navigator component and start using a navigation bar for nav.

Advanced Navigation Techniques

Let's create a simple text link that a user can tap on to be directed to an external web site, such as a support page, from within our app.

Using the Linking API

Working with data, handlers, and events in a larger app can quickly grow cumbersome, but the Flux paradigm and Redux implementation make it much easier to both code and reason about such applications.

Introduction to Flux and Redux

Redux is a very effective and popular library for implementing Flux architecture, and we create the basics of it in our app with our first actions and reducers.

Redux Reducers and Actions

Redux glues into our application via higher order components that connect together our UI and our actions and reducers, and we cover the pattern for doing so in this video.

Redux and Containers
Chat Now App (Continued)
6 Lectures 41:39

We will show how to build the main chat screen of the app and wire it up to communicate with our app's state via Redux.

Preview 09:12

Actions can be more than just simple objects, and we introduce thunks in this video to address how to grab data from state inside action creators, talk about how it is important that reducers return pure results, and use a ScrollView component to allow scrolling in our chat window.

Thunks, Pure Reducers, and Scrolling

We move beyond just a one-person chat as we bring in a fake server for our app to communicate with, and start sending and receiving messages from the API inside of our application.

Two-way API Communication

Moving around our application is still key and this video blends together our use of the Navigator component with Redux patterns, and adds a button to our navigation bar.

More Navigator Techniques

Data in our application up until now is ephemeral, and will disappear if we quit the app. Storing and retrieving data long term is possible by using the AsyncStorage API.


While our data may be stored, our app won't know about it until it is placed back into our in-memory state, which is what we do in this video. We also do conditional navigation based on available data to improve the flow of the app.

AysncStorage (Continued)
Preparing Apps for Distribution
6 Lectures 23:15

No app is complete without an icon, so we'll talk about how to quickly generate one at all the different sizes you'll need for both mobile platforms.

Preview 05:03

With our app icons made, we'll place them into the app's package and tweak a few settings to make it production quality.

iOS App Icons and Display Name

With our app icons made, we'll place them into the app's package and tweak a few settings to make it production quality.

Android App Icons and Display Name

During development, React Native scans, and updates all of our JS files on demand, but in production we want to make one combined, a minified file for our app to use, with prod optimizations included.

Creating a Production Bundle

React Native moves quickly as a framework, and you'll frequently have the opportunity to upgrade between versions. This is a special case which requires a little attention.

Upgrading React Native Versions

There are great communities of React Native developers all over, and you can give and receive help at several of them. You'll also want to know how to effectively use the Git repo for the React Native project.

Community Resources and Giving Back
About the Instructor
Packt Publishing
3.9 Average rating
8,175 Reviews
58,726 Students
686 Courses
Tech Knowledge in Motion

Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.

From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.