Tutorials

We'll show how to build a reusable ScrollView and ScrollElement component without adding any additional DOM elements. We'll take advantage of React.cloneElement, React.Children.only,findDOMNode, and context to build a registry of scrollable elements in the list. Then we'll use ref on the ScrollView to expose a way to animate to any item at any scroll position in the list.

We'll explore the concept behind child function components and how to add dynamic return values and hiding state management inside the component. Then we'll explore how to setup functional render props that allow for complex components with simple APIs. Finally we'll show how these 2 concepts can compose together like any other React component.

In this lesson we'll use licensee.js to see how to configure accepted license types for our project. We'll also explore how to use whitelist overrides to allow specific libraries that may not match our license configuration. We'll also setup an npm script to show a more visible exit code 1 failure.

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.

In this lesson we'll show how to use yarn to alias the names of same npm libraries but install different versions. This could allow for easy migrating from one library version to an upgraded version.

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.

In this lesson we will use Flexbox to scale a background image to fit on the screen of our React Native application.

In this lesson we'll use Animated.stagger to stagger Animated.timing animations that animate the height of a React Native view every 300 milliseconds.

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.

In this lesson we'll show to use the onError callback from react-native-video. We'll show how to put a separate view to cover the video and render an error icon from react-native-vector-icons. Finally we'll add custom error messages based upon the error code returned.