 Resources from Jason Brown in 2024

React Native Video is a community supported video element for React Native. It allows for remote loading of videos and also works with the React Native asset management system to load videos. Having a flexible video component is essential to developing and enhancing your application.
Like many React Native elements, the video element is very basic and doesn't ship with anything besides a flexible API. This allows you to develop the exact layout, controls, and custom overlays to match your application.

In this course we'll take a look at a basic setup. Then explore the different ways we can load and show videos. We'll show how to use a few of the custom callbacks to overlay errors and buffering elements. Because there are no controls shipped with `react-native-video` we'll show how to write custom video controls and animate them when the video has not been interacted with.

Finally we'll cover a few common paradigms found in the wild. Including repeating background cover videos, auto-playing videos when they scroll onto the screen and auto-stopping them when they are scrolled away from.

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

react-native

Fundamentals of React Native Video

In this course we'll explore how to create many popular animated concepts in applications across web and mobile applications. We'll look at both simple, complex, and subtle interactions that you can use to enhance your React Native application.


This course should empower you to look at an animation in an application, break down the effect, and rebuild it in your own application.


The ultimate goal is to show how using the basic Animated calls we can build out effective and complex animations that take your application to the next level.

Real World React Native Animations

In this course we will learn and demonstrate the basic concepts of the React Native Animated API. We'll use Animated calls like `timing` and `spring` to animate style properties, and learn how to combine animations to create more complex effects. We'll learn about more advanced interactions like animations with touch events, interpolation, and flip animations. The ultimate goal is to gain an understanding of how to animate React Native Views, how you can apply them to many different types of styles, and how to enhance the experience in your application.

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Animate React Native UI Elements

In this course we’ll explore getting started with a basic React Native application on both iOS and Android. We’ll learn about using React Native components, how to build custom components, how to layout an application using Flexbox, and how to style components.


We’ll also focus on how to use state to control components, how to persist information across application reloads with AsyncStorage, and how to inline edit in a ListView.

The ultimate goal is to gain an understanding of how to get started building simple React Native applications.

Build a React Native Todo Application

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.

Create a List of Items with a React Native ListView

We'll use the interpolate function from an `Animated.Value` to transition the background color of an `Animated.View`. We'll simultaneously translate the position with the same `Animated.Value`.

Animate Colors with React Native Interpolate

By using the `interpolate` function, the  `Animated.View` can be rotated using both degrees and radians.

Animate Rotation with React Native Interpolate

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.

Create a Flip Card Animation with React Native

In this lesson we'll use `Animated.parallel` to animate multiple `Animated.timing` and `Animated.spring` animations at the same time.

Animate Multiple Animations at the Same Time with Animated.parallel

In this lesson we'll be using a buffering icon from `react-native-vector-icons` to
display a `buffering` state over the center of the video.

We'll learn how to setup up an `Animated.loop` to rotate the buffering icon and
how to use the video's `meta` to only run the loop during buffering.

Show an Animated Buffering Icon When Remote Videos are Loading in React Native

In this lesson we'll walk through the process of installing the react-native-cli through setting up a basic react-native project on iOS. We'll get the basic project running in a simulator via XCode. We'll also setup Android, Android Studio and get the project running on an emulator with the react-native run-android command.

Setup React Native for iOS and Android

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.

Filter Items in the React Native List View

In this lesson we'll add a button to the footer that will clear all completed items. We'll use TouchableOpacity and we'll examine how flex `space-around` property works.

Add a Clear All Complete Button to the Footer with React Native TouchableOpacity 

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 base interface to handle success as well as handle errors.

Persist Items with React Native AsyncStorage

We'll use the cross platform ActivityIndicator to add a loading spinner while the items load from AsyncStorage. We'll show off the importance of rendering order, absolute positioning, and how to center items with `alignItems` and `justifyContent` set to center.

Add a Loading Indicator While Loading Items with React Native ActivityIndicator

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

Inline Edit Todo Items in a React Native ListView

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.

Create a Video that Auto Plays when Scrolled into View in React Native

We'll use TouchableOpacity to create a Remove button for each todo item. We'll demonstrate how to create remove items from a ListView.DataSource

Add a Remove Item Button to Each Row with React Native TouchableOpacity

We'll add a cross platform Switch component to toggle the completeness of each todo item. We'll show how to pass down functions from the parent application to the child row of a ListView.

Add a Complete Toggle with React Native Switch

In this lesson we'll create a `PanResponder` to allow us to drag a card around the screen. We'll use `Animated.event` to automatically set the values of our `Animated.Value` and when the card is released we'll use `Animated.decay` to decelerate it to a stop.

Create a Draggable Card with React Native Pan Responder, and Animated.decay

In this lesson we will use Animated.timing to animate the opacity and height of a View in our React Native application. This function has attributes that you can set such as easing and duration.

Topics

Instructors

Content Type

Jason Brown