Tutorials

Learn React, React Native, JavaScript and more with in-depth tutorials.

React Native

Create the Basic React Native Todo Application Layout

In this lesson we'll create the basic application layout with a header, content section, and footer. We'll learn to use StyleSheet to create styles to apply to React Native components.
React Native

Disable and Ignore Yellow Box Warnings in React Native

Yellow box warnings in react native can be intrusive. We will use console.disableYellowBox to disable the yellow box entirely. We'll also use console.ignoredYellowBox to selectively disabled warnings.
React Native

Disable the Yellow Box in React Native

The Yellow warning box in React Native can be both helpful and annoying. There are many errors that can be ignored but end up blocking necessary pieces of the application.
React Native

Filter Items in the React Native List View

We'll setup 3 buttons (All, Active, Complete) to filter the displayed items based on their completion status. We'll also show how to use flexbox flexDirection row lays out items differently than column.
JavaScript

Fix Only Committed Files with Prettier and lint-staged

In this lesson we'll use prettier and lint-staged to run prettier only on files that have been changed and committed to git. This will allow you to prettify files as you change them, and prevent massive lint only git check ins.
React Native

Get the Dimensions of a React Native Phone Screen

In this lesson we'll use Dimensions to get the width and height of the screen. Also we'll use onLayout to detect orientation changes.
React Native

Increase Android AsyncStorage Size in React Native

The iOS AsyncStorage implementation has an unlimited amount of space by default. This is not the case on Android, the default size of AsyncStorage is 6MB. This is generally enough for a casual application however there are many cases when you may need more, like when you are using PouchDB async adapter.
React Native

Inline Edit Todo Items in a React Native ListView

We'll add a TouchableOpacity with a long press to trigger an inline TextInput edit in the row. We'll show how to update an item in a ListView.DataSource and make sure it re-renders
React Native

Measure and Get the Position of a React Native Element

In this lesson we'll explore how to measure the dimensions and get the position of a React Native element using onLayout and UIManager.measure. Additionally we'll see how to use the helper function measure on the component ref for easier measurement.
React Native

Persist Items with React Native AsyncStorage

In this lesson we'll use AsyncStorage to save our items so they persist with each reload of the application. We'll show how to use the promise-based interface to handle success as well as handle errors.