I'm a front end developer building and playing with the latest technologies. In my free time I run React meetups, and React and React Native workshops in Portland Oregon.
showing 60 lessons...
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
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.
In this lesson we'll create controls that animate into view when the video is interacted with. The controls will animate in when the video starts to play, or when the video is tapped. When a
1500-ms timeout is reached the controls will automatically animate to a hidden state.
In this lesson we'll show you how to use React Native Video to cover the entire background with a continuously looping video! We'll be using the
repeat property as well as the
StyleSheet.absoluteFill property so we don't have to replicate any styles.
We'll then show you how to overlay content over your looping video.
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 be using a buffering icon from
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.
In this lesson we'll show to use the
onError callback from
react-native-video. We'll show how to use a separate
<View/> that'll cover the video and render an error icon from
react-native-vector-icons only if there is an error present.
Finally we'll learn how to setup a
handleError function that'll take the error and error code off the video
meta. This'll let us check against various error codes and give back a custom error message!
In this lesson we'll show the different methods that
react-native-video allows to play video including remote video files as well as local files imported as asset files by React Native.
We'll also show you a couple properties you can use on your
<Video/> component to resize and add some styles!
We'll construct a map using
react-native-maps and custom animated map makers. We'll build a scroll view that when scrolled horizontally it will animate the marker that it is associated with. Once an item is scrolled to the map will automatically animate and center the map at the markers coordinates.
This will be built with a single
Animated.Value and heavy use of
interpolate along with
extrapolate: "clamp" to lock our
In this lesson we'll show how to build a
ScrollElement component that do not add additional markup. We'll use
findDOMNode to register nested items and then expose a
scrollTo function our
ScrollView that allows for applications to animate a scroll to hidden list items.
In this lesson we'll show how to structure views to create a responsive progress bar (without defining a set width). It will allow for dynamic border, bar, and fill colors. We'll finish off by showing how to add animation to make the progress indicator smoothly transition.
In this lesson we'll use
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 show how to use the
AutoSizer component from
react-virtualized to automatically measure the width/height of our content area. We'll then use the
List component to render our set of data as a virtualized list into the DOM using windowing.
In this lesson we'll show how to use
React.cloneElement to add additional properties to the
children of a React element. We'll also show that you can add additional properties not declared on the element.
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 show how to setup a
.babelrc file with presets and plugins. Then create npm scripts that use
babel-preset-env we'll show how to target specific versions of node and how to use babel plugins, while not transpiling features (like
await) that are already supported by node natively.
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 create a collapsible header bar. This technique is used to show additional information or actions but hide when the user scrolls to expose more of the information they are looking at.
We'll use a combination of
onScroll, and the
Animated.event function to update our
Animated.Value every time the user scrolls. Then with a series of
interpolate calls we can define a scroll threshold to show/hide pieces of information, as well as shrink the
fontSize of our title.
In this lesson we'll create a notify button that expands from the middle to show a
TextInput with a send button and once sent will hide the
TextInput and show a thank you message. We'll use the helper method
StyleSheet.absoluteFill to position our input inside of our wrapping
View. This allows us to animate our
TextInput and our messages in and out without effecting layout of each other.
When pressed to show the
TextInput and when we show the thank you message a combination of animating the width and
justifyContent: "center" to make it appear as if we're animating the view from the center. We'll use
Animated.timing and a
success boolean on state to control what is rendered, and what is animating.
interpolate will be used heavily to scale in and out views when they are needed.
In this lesson we'll use
PanResponder gesture handlers to add the ability to swipe a modal closed in either direction. We'll need
ScrollView callbacks to allow us to still scroll through comments and only close when desired.
We'll use the
Animated.setValue function to
translate our Modal up or down depending on the direction of the swipe.
In this lesson we'll create an event details card with basic information displayed. On press basic information will slide up to present additional information. We'll use
state and the
componentDidUpdate callback to trigger our animations.
Depending our state we'll use
Animated.timing to animate the information in and out. We'll use a series
interpolate on our
Animated.Value to rotate the arrow, and
translate our information into view.
In this lesson we'll create a tap to show more information animation card. This is a great technique for exposing minimal information and then revealing more information if a user needs it.
Animated.timing and rely heavily on
interpolate to coordinating the sliding of the card, and scaling image animations. Finally we will need to disablethe
ScrollView to allow for our gestures to work correctly.
In this lesson we'll create an animated floating action button. This technique can be used as a quick action menu to hide additional options. When pressed we'll use
Animated.parallel to execute our stagger menu options and execute our
Animated.timing animation which will rotate our button and change our background color with
interpolate. We use
Animated.stagger to create a delay of our buttons sliding up.
Animated.spring will give our buttons a spring effect as they shoot upwards.
In this lesson we'll build a "tap to show love" animation. This technique is commonly used on many streaming sites to show the streamer they appreciate the content. When the screen is pressed an
Animated.Value will be created. We will measure the screen dimensions with
Dimensions so we can place our heart in a random location. Then we'll use
Animated.timing to animate the heart upwards. Finally a series of
interpolate will allow the heart to explode from nothing to full sized heart, wobble side to side, move upwards, and then fade out.
In this lesson we'll create a like button that explodes with hearts. We'll use
Animated.parallel to execute the bouncy heart animation as well as the series of hearts exploding at the same time. Then we'll use an array of
Animated.timing animations and then use
Animated.stagger to make the hearts appear with a 50ms stagger. We use
Animated.delay to wait before we then use
Animated.stagger again to hide the hearts in. Finally our
Animated.sequence will cause each of those animations to happen one after the other.
In this lesson we'll create a heart shaped like button that bounces when it is pressed. This technique is a great way to show feedback for when a user likes a piece of content. We'll
Animated.spring to create a realistic feeling spring animation with the use of friction. We'll also use
interpolate to our animated value to scale our heart up and down to make it look like it's bouncing.
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
justifyContent set to center.
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.
In this lesson we'll explore how to measure the dimensions and get the position of a React Native element using
UIManager.measure. Additionally we'll see how to use the helper function
measure on the component ref for easier measurement.