React Native

Building a hybrid app without webviews? Need native components? Want good performance? React Native delivers all of this and a little more!

Lessons

Each lesson focuses on a single aspect of building the project, like modeling the data, building a GraphQL server in Elixir, or building a mobile client for it in Flutter.

free

Why React Native

A brief introduction to react native and why it is different from hybrid apps.

free

Getting Started

Installation and a quick introduction about the app structure

free

Project Structure

Learn about the directories and the structure for a React Native project.

free

Our First App

Create a simple app using actions and updating the screen.

free

React Native Weekly Drip #1, and Exercise: Actions and Listeners

Create simple actions with buttons, and show some text as a result of user action.

Actions and Listeners - Solution

Solution for Actions and listeners exercise.

free

Persisting data in React Native

How to persist data in React Native using Async Storage.

Making API Calls

How to make API calls and show data.

Creating your Own API Client

How to create a layer for all of our API calls and organize it cleanly.

free

React Native Weekly Drip #2, and Exercise: Get your favorite pokemon

Working with an API and treating the result.

Get your favorite pokemon - Solution

Solution for get your favorite pokemon exercise.

Flexbox

How to use flexbox and create a login screen.

Transition Between Screens

Learn how to make transitions between screens.

Platform Specific Components

We will check a specific component from the React Native Standard Library.

free

React Native Weekly Drip #3, and Exercise: Write once components

How to use the same code and generate different components and native components for iOS and Android.

Write Once Components - Solution

Solution from Write Once Components exercise

Debugging your App

Using a web browser to debug your application.

Using Images

Take a look in how the images work on React Native.

free

Working with Lists

Learn how to work with lists

free

React Native Weekly Drip #4, and Exercise: Actions and Lists

Interesting links for the week and exercise using listviews

Solution for Actions and Lists

Solution for Actions and Lists Exercise.

free

Stateless Components

Learn why we should use stateless components and how

React State

Why you should worry about managing your state?

Managing the State

How to manage the state in React

free

React Native Weekly Drip #5, and Exercise: Flow

Interesting links for the week and exercise about flow

Flow - Solution

Solution for the Exercise using Flow

free

Generating a package for your device

Let's see how generate a package for your android and iOS device.

Deploying to your device Store

How to deploy to your device Store

free

CI and Automated Deploys

Run tests automatically, automate your deploys, and improve your life.

free

React Native Weekly Drip #6, and Exercise: Continuous Integration

Learn about how to create automated deploys and improve your life.

Preparing to Work on the DailyDrip Mobile App

A solution to last week's CI exercise, and an overview of a real-world application.

Getting Started With Redux in React Native

Using React Native Debugger and Redux DevTools to quickly learn how an existing application’s store works.

Managing API Calls

Separating state changes and side effects

Navigation

Setting up navigation yourself

free

React Native Weekly Drip #7, and Exercise: Settings Screen with Redux

Make a Settings screen and save it in a redux store.

Settings Screen Solution

Implementing a Settings screen

Creating a React Native Docs app

Starting creating an app from scratch

Github API calls at React Native Docs

Handling API requests from the Github API

React Native Docs: Improve layout

Using React Native Elements and improving the view.

free

React Native Weekly Drip #8, and Exercise: Add Redux to React Native Docs

Interesting links for the week and Add Redux to React Native Docs

Solution: Redux Loop in React Native Docs

Using Redux Loop in our React Native Docs app

free

Getting Started with React Navigation

The basics of React Navigation

Changing the Header and Redux in React Navigation

Configuring the Header and using Redux in React Navigation

Add React Navigation to the Docs App

Set up React Navigation in the React Native Docs

free

React Native Weekly Drip #9, and Exercise: Integration with Firebase

Links for the week and Firebase exercise

Solution: Firebase Grocery List

Solution from Exercise Firebase Grocery List

Chat App using Firebase

Implemeting a chat app using firebase

Firebase Storage

Using Firebase Storage

Add Images to our Chat App

How to add images to a firebase chat app

free

React Native Weekly Drip #10, and Exercise: A soundboard app

Interesting Links for the week and creating a soundboard app

Solution: Soundboard app

Creating a soundboard app with Firebase

free

Comparing ListViews Ionic 2 vS React Native

Compare 1k element listviews in Ionic 2 vS React Native

free

Introduction to Ignite

The unfair starting CLI, Generator, and more for React Native

Creating a Simple app with Ignite

First steps with Ignite

free

React Native Weekly Drip #11, and Exercise: Ignite Theming

Interesting links for the week and working with Ignite Theme

Solution: Ignite Theme

Playing with Ignite’s Theme

Introduction to Redux Sagas

A quick rundown on Redux Sagas

A best practice using Redux

Checking best practices using Redux

Moving to Redux Loop

Move code from Redux Sagas to Redux Loop

free

React Native Weekly Drip #12, and Exercise: Test Redux Thunk

Exercise: Testing Redux Thunk and some interesting links

Solution: Redux Thunk

Implementing an API call using Redux Thunk

Storing Assets in React Native

How to store assets and work with them

Building a Memory Color Game

A simple Memory game using colors

Using Reactotron

Inspecting React Native Code

free

React Native Weekly Drip #13, and Exercise: Actions to Color Game

React Native Weekly Drip #13, and Exercise: Actions to Color Game

Solution: Add Actions to Color Game

Adding Actions to our Color Game

Getting Started with GraphQL

Giving GraphQL a try

Better understanding GraphQL

Fragments, mutations and more

GraphQL: Advanced Queries

Passing arguments to our queries

free

React Native Weekly Drip #14, and Exercise: List Repos from Github using GraphQL API

React Native Weekly Drip #14, and Exercise: List Repos from Github using GraphQL API

Solution: Github Repos GraphQL API

Solution: All Repos from Github GraphQL API

Getting Started with Expo

Trying out Expo

Playing with Expo SDK

Getting location and phone contacts

Expo: Facebook Login in React Native

Connecting Facebook in React Native

free

React Native Weekly Drip #15, and Exercise: Working with Gyroscope in Expo

Interesting links for the Week and exercise working with gyroscope

Solution: Screen Awake and Gyroscope

Using ScreenAwake and Gyroscope for Expo

GraphQL: Overview

What it is, and How, Why and When to use GraphQL

React Native - Logins with Auth0

How to set up a login solution in React Native

Using GraphCool with React Native

A serverless solution for GraphQL that works great with React Native

free

Using GraphCool with React Native

A serverless solution for GraphQL that works great with React Native

Using Sentry with React Native

Setting up an error tracking service in your app

free

How to use Vim for React Native

Using Vim with Prettier for React Native

Jest Tests

Testing your React Native using Jest

Creating a Starter App

Creating a super project with Redux + React Navigation + Best Practices

Payments in React Native: Using braintree

Submitting Payments in React Native using braintree

free

Using Android Native Modules

How to use Native modules from Android in React Native

Immersive mode on React Native

How to do Immersive mode on React Native

free

Using BuilderX

Putting designers and developers together

free

Using and Understanding Sagas

API requests using Redux Sagas

Authors

The code in the applications was produced by:

./franzé jr

Franzé Jr

Software Engineer with experience working in multi-cultural teams, Franze wants to help people when he can, and he is passionate about programming and Computer Science. Founder of RemoteMeetup.com where he can meet people all over the World. When Franze is not coding, he is studying something about programming.

Featured Lessons

Our content library is pretty great, here are a few lessons we think you might like.

What our Superusers are Saying!

Some other people were willing to publicly state that they like us!

Taylor Dolezal

Software Architect

Smooth Terminal has easily been one of the most helpful resources on my journey to better understand Elixir and the Phoenix web framework.

James Edward II

Developer

With any language there are so many details to learn. What functions are built-in? How should I structure my code? What tools are available for improving my workflow? It’s rare to find one source that can answer so many of these questions, but Smooth Terminal does this and more.

Rex Van Der Spuy

Game developer

Smooth Terminal is by far the best resource for learning Elm anywhere, and among the very best online learning platforms, period.