#react native tutorials

React Native brings the React paradigm to mobile app development. It’s goal isn’t to write the code once and run it on any platform. The goal is to learn-once (the React way) and write-anywhere. An important distinction to make. In this React Native tutorial you’ll learn how to build native apps through 50+ articles and videos guide step by step of React Native.

1. How to build a basic application with React Native

These articles below will show you how to do that:

React Native Tutorial: Building Apps with JavaScript

In this React Native tutorial you’ll learn about a framework for building native iOS and Android applications from Facebook, based on the same principals behind their hugely popular React Javascript Framework for building declarative user interfaces.

>>> Learn more: Here

Getting Started with React Native in 20 Minutes

Nearly every type of app you’ll want to build will involve a login screen with cookies- this app will therefore serve as a perfect foundation for whatever you want to create. We’ll also take a tour of the basics of React Native, building basic views and components and getting familiar with React Native’s baked-in routing solution, the Navigator. If you’re familiar with React, you’ll have an easy time reading the code- but by the end of this tutorial, you should be comfortable enough with React Native’s structure to move on to more advanced topics.

>>> learn more: Here

Cold Dive into React Native: A Beginner’s Tutorial

In this tutorial, we will take a look at React Native’s architecture, the philosophy behind React Native, and how it differs from other solutions in the same space. By the end of the article, we will have transformed a React “Hello World” application into a React Native one.

>>> Learn more: Here

React Native Tutorial Part 1: Hello, React ; Part 2: Designing a Calculator ; Part 3: Developing a Calculator

The following tutorial will guide you through developing your first React Native application for both Android and iOS. It’s written using React Native version 0.31, the latest at time of writing, and is broken into three parts:

Part 1 of the tutorial will demonstrate project setup, writing a traditional “Hello World” application, and organizing the code prior to heading into Part 2. In Part 2, I’ll be guiding you through the process of designing a calculator app that runs on both platforms, using the latest and greatest that React Native has to offer. The goal is to get you up to speed on the basics of React Native, including flexbox and style sheets, and to give you a starting point from which we can continue to actually develop the calculator’s functionality. In Part 3, we’ll develop the actual calculator implementation, including listening to touch events, performing the arithmetic, and updating the UI using React Native’s state.

Movie Fetcher

In this tutorial we’ll be building a simple version of a Movies app that fetches 25 movies that are in theaters and displays them in a ListView.

>>> Learn more: Here

Free React Native components/apps to build your first mobile app

Instead of wasting your time trying to build completely a React native mobile app, you killed time on your commute learning how to build a mobile app? Well, getting the five best free React native apps for your first mobile app, and you’ll be on your way to develop mobile apps.

>>> Learn more: Here

2. React Native Navigation examples for your learning

React Native navigation very important you must to know about it. these articles below will help you know React Native navigation.

Routing and Navigation in React Native

In this tutorial we will show you the basic knowledge about React Native navigation.

>>> Learn more: Here

React Native Example App: Navigation

The app itself is vaguely like twitter and/or tumblr. There are users that make posts. They follow other users. You can look at users they follow follows and those users’ posts. And on and on! The features (or styling) isn’t the main point. At this time, we’re mostly demonstrating architectural concepts.

>>> Learn more: Here

React Native Navigation

React Native Navigation provides 100% native platform navigation on both iOS and Android for React Native apps. The JavaScript API is simple and cross-platform – just install it in your app and give your users the native feel they deserve. Using redux? No problem: React Native Navigation comes with optional redux support out of the box. Ready to get started?

>>> Learn more: Here

3. React Native layout system flexbox

React Native Layout System

The layout system is a fundamental concept that needs to be mastered in order to create great layouts and UIs. React Native uses Flexbox to create the layouts, which is great when we need to accommodate our components and views in different screen sizes or even different devices.

>>> Learn more: Here

Understanding React Native flexbox layout

Working with flexbox layout can be tricky, especially in React Native. But there is nothing to scare. It’s easy to understand, just take a closer look not just on how it works but on why it works this way.

>>> Learn more: Here

Layout with Flexbox

A component can specify the layout of its children using the flexbox algorithm. Flexbox is designed to provide a consistent layout on different screen sizes.

You will normally use a combination of flexDirection, alignItems, and justifyContent to achieve the right layout.

>>> Learn more: Here

4. React Native networking

Make HTTP Requests In iOS With React Native

The Facebook documentation for React Native has (or had at the time of writing this) a tutorial for getting movie data from a remote API. However, it hardly explained how to customize the HTTP request. In fact, I found that a lot of the internet was missing clear cut documentation for RESTful requests with React.

This article should clear things up!

>>> Learn more: Here

Lets fetch some fresh data for our React Native apps

One of the basic concept for any modern App is Networking. In your React Native Apps you’re going to be provided with some alternatives, but here we’ll boil them down to a single one, let’s go through them.

>>> Learn more: Here

How to Create a News Reader With React Native: Setup and News Item Component

In this tutorial, we’ll be creating a news reader app with React Native. In this two-part series, I’m going to assume that this isn’t your first React Native app and I won’t go too much into detail regarding setting up your machine and running the app on a device. That said, I explain the actual development process in detail.

>>> Learn more: Here

Networking

Many mobile apps need to load resources from a remote URL. You may want to make a POST request to a REST API, or you may simply need to fetch a chunk of static content from another server.

>>> Learn more: Here

5. React native Animated

React Native Animations Using the Animated API

Getting up and running with React Native Animations. The recommended way to animate in React Native for most cases is by using the Animated API.

>>> Learn more: Here

React Native’s LayoutAnimation is Awesome

For n number of layout changes in your view, one line does it all. Set your state, allow your view to re-render, and LayoutAnimation handles all interpolation for you. For large and complex views, this is POWERFUL. In this example, I have a complex view with three possible states. Heights, widths, and item counts are rendered based on the state `index`, determined by which button is selected.

>>> Learn more: Here

Dynamic Animated Lists in React Native

Every time you want to add or remove something from your list to have the option to apply an animation transition to your elements.

>>> Learn more: Here

6. Real app tutorial

Build a Messaging App Using React Native

React and React Native is gaining a lot of momentum these days. For this tutorial, we’ll quickly build a messaging app using React Native with SendBird’s JavaScript SDK.

>>> Learn more: Here

How to make facebook reactions in React Native

Do you think you can keep up the pace with React Native and its community? We just recently talked about react-native-emoji and today we’re learning that we’re getting inline image support in React Native. We also mentioned Facebook’s Reactions, and a couple of days after we have a great tutorial straight from the man who animates all the things: Jason Brown!

>>> Learn more: Here

React Native – How to create Twitter exploding hearts

So we’re going to build this exploding heart, except just know Twitter kind of cheated. Not really but they used an image and played each frame adjusting background-position so it looked animated. Okay not cheated they used a really smart technique but what’s the fun in doing that when we can build it for real!

>>> Learn more: Here

The essential boilerplate to authenticate users on your React-Native app

It’s essential to many apps, and I myself have been wondering how I could provide a secure way for my users to register and authenticate to my apps without third-party strategies. Finding working examples online has been tough, so I have decided to implement my own based on the few examples I could find. The main goal of this article is to show you how to create and setup a few useful services to improve the life cycle of your app, to authenticate a user and access protected resources.

>>> Learn more: Here

7. Tools for tracking React Native

Native Directory

Native Directory is a curated list of 254 React Native libraries to help you build your projects.

Native Directory lets developers order the list of libraries by last update, most recommended, compatibility, health, downloads, issues and GitHub stars. Each listed item provides bar graphs for platform compatibility and health, platform targets, screenshots, last update, issues and more, pulling much of its data from GitHub repositories and the npm site for Node.js. Along the right-hand side, many different “topics” of the libraries are listed, ranging from actionbutton to webgl.

Awesome React Native

An awesome style list that curates the best React Native libraries, tools, tutorials, articles and more.

JS.coach

This is an opinionated catalog of open source JS packages.

Libraries come and go. The ecosystem evolves rapidly, and that’s a good thing. But it means you can’t rely on your bookmarks. Google may not be your best friend either, since it focuses on popular results — established solutions that may not be the best fit for your project.

This website indexes new packages and is updated roughly once per day, by using both automated scripts and manual curation. It is a complete rewrite and grown-up version of React.parts, a tiny project that started 2 years ago. Even if you are implementing your own solution for your particular problem, this can be a good place to find interesting code to learn from.

8. React native videos for learning react native

Introduction to React Native – Building a React Native app from scratch

https://youtu.be/r5OPRhelEIU

  Navigating React Native Navigation – Kurtis Kemple

https://youtu.be/42ogpJVwtw0

  React Native Crash Course

https://youtu.be/mkualZPRZCs

  React.js Conf 2015 Keynote – Introducing React Native

https://youtu.be/KVZ-P-ZI6W4

  How to Create An App in React Native and Use React Native Navigation

https://youtu.be/GdnZIs3kDNg

  Eric Vicenti – Native Navigation for Every Platform at ReactEurope 2016

https://youtu.be/dOSwHABLvdM

Compilation by Atom ID @Reactsharing.com