Tutorials

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.

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.

In this lesson we'll show how to use the AutoSizer component from react-virtualized to automatically measure the width/height of our content area. We'll then use theList component to render our set of data as a virtualized list into the DOM using windowing.

In this lesson we'll use CellMeasurer and CellMeasurerCache to automatically calculate and cache the height of a row. This will allow us to remove the predefined rowHeight on list and allow for dynamically sized rows.

In this lesson we'll setup a react-native-video player that is paused when it is not visible but when scrolled into view starts playing the video. We'll also show how to add a small ending threshold so once the video is only partially out of view it will pause.

In this lesson we'll create a VSCode snippet for quickly reusing code. We'll show how to setup tab stops orders to move the cursor in a specific order when tab is pressed. Then we'll show how to create named variables with default values.

In this lesson we'll use TextInput to receive input from the user and save off separate items into state. We'll store the value on state, show how to setup specific keyboards to display and how to handle actions from the keyboard.

In this lesson we'll show how to use React Native Video to cover the entire background. We'll use the repeat property, and also the helper StyleSheet.absoluteFill property so we do not need to replicate styles. We'll then show how to place a login form on top of the looping video.

In this lesson we'll use the ListView component to render a list of items that were entered. We'll show how to setup a ListView.DataSource and how to render custom rows with performance in mind.

In this lesson we'll learn to use backfaceVisibility style property and rotateX to create a vertical flip animation, and rotateY to create a horizontal flip animation.