 Resources from Jason Brown in 2021

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 dive into using some clever offset techniques to make a button that appears to be 3D. We'll add in some animations to control those offsets so that when our button is pressed/released the button animates in and out while playing an airhorn sound.

Create an Animated 3D Button Effect in React Native

Routes are some times better served as a modal. If you have a modal (like a login modal) that needs to be routeable and appear on all pages you may need to use query params. Will explore how to render a route all the time and use query params to control when it's content renders

Create a Query Parameter Modal Route with React Router

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

graphql

We'll tackle setting up user types by creating a users_types table with a value text primary key. We'll add the users type as a foreign key to our new table. Finally we'll insert values as a SQL query and track it as a migration.

Create GraphQL Enums with Hasura Enum Tables

We'll start by creating a new Hasura Cloud project. Then setup a new Security Group in AWS for a secure connection from Hasura Cloud to our RDS PostgreSQL database. Then we'll create our RDS PostgreSQL database, and setup the connection string in our Hasura Cloud project.

Setup a Hasura Cloud Project with Amazon RDS

We'll create a task system with permissions, unread task filtering and assigned task filtering all without a single line of code. Walking through the Hasura console creating the tables, relationships, and finally leveraging Hasura and its role based access control. We'll finish by showing off the GraphQL queries and mutations that you would use in your application.

Create a Task System with Unread Filtering and User Assignment in Hasura

Hasura provides the ability to schedule HTTP events to be fired at a given date and time. We will use the /v1/query endpoint and the `comment` section to allow for cancelling events with an id that we create.

Cancel a Scheduled Event in Hasura

Use React Native Reaniamted and useEffect to create expanding rings. We'll leverage useSharedValue, useAnimatedStyle, withDelay, withRepeat, and use interpolation to achieve our animated expanding ring effect.

Create Animated Rings with React Native Reanimated

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.

Topics

Instructors

Content Type

Jason Brown