Screencasts

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

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

Published on Jun 6, 2017
-
React Native

In this lesson we'll show how to use icons from react-native-vector-icons. With absolute positioning we'll center the icon over the video. Then we'll use the Animated.loop call to rotate the icon continuously in a 360 degree loop. Finally we'll the stopAnimation call to pause the animation when we are no longer buffering.

Build Interactive Video Controls that Animate Visible and Hidden for React Native Video
4:56

Build Interactive Video Controls that Animate Visible and Hidden for React Native Video

Published on Jun 6, 2017
-
React Native

We'll modify our previous controls to animate visible when the video is touched or interacted with. The video controls will animate visible in when the video is touched, played, or continues to be interacted with. After a 1500ms timeout elapses the controls will animate away.

Create Custom Controls for React Native Video
9:28

Create Custom Controls for React Native Video

Published on Jun 6, 2017
-
React Native

In this lesson we'll use react-native-vector-icons to add play/paused buttons, a seek bar, and the duration of the video. We'll use the onLoad, onProgress, and onEnd callbacks to track the video progress. We'll use the react-native-progress to create an animated progress bar for us. Finally with TouchableWithoutFeedback we will add a tap to seek interaction to jump to specific times in the video.

Fix Only Committed Files with Prettier and lint-staged
2:08

Fix Only Committed Files with Prettier and lint-staged

Published on Jun 5, 2017
-
JavaScript

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.

Create a VSCode Snippet with Tab Stops and Named Variables
4:27

Create a VSCode Snippet with Tab Stops and Named Variables

Published on Jun 5, 2017
-
JavaScript

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.

Use babel-preset-env to Use Native Node Features and Also Use Babel Plugins
4:45

Use babel-preset-env to Use Native Node Features and Also Use Babel Plugins

Published on Jun 5, 2017
-
Node

In this lesson we'll show how to setup a .babelrc file with presets and plugins. Then create npm scripts that use babel-node and babel. With babel-preset-env we'll show how to target specific versions of node and how to use babel plugins, while not transpiling features (like async await) that are already supported by node natively.

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

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

Published on Jun 4, 2017
-
React Native

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 Looping Background Video with React Native Video
2:52

Create a Looping Background Video with React Native Video

Published on Jun 4, 2017
-
React Native

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.

Use Local Files or Remote Video Files with React Native Video
2:04

Use Local Files or Remote Video Files with React Native Video

Published on Jun 4, 2017
-
React Native

In this lesson we'll show the different methods that react-native-video allows to play video including remote video files and local files imported as asset files by React Native.

Setup React Native Video for iOS and Android
0:55

Setup React Native Video for iOS and Android

Published on Jun 4, 2017
-
React Native

In this lesson we'll install react-native-video with NPM. We'll use the react-native link command to setup all necessary native code.