Tutorials

We'll explore how to use various Animated apis including Animated.timing, Animated.parallel, Animated.sequence, setValue, and Animated.delay to build a notification that fades and slides in and out.

We'll learn about using a ref and the measure function to get the dimensions of a particular view. Additionally we'll show how to use the measure function in conjunction with the componentDidUpdate callback on setState.

We'll explain using translateY and to move views around performantly.

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.

In this lesson we'll create a MapView with react-native-maps. We'll use the onPress function to add Markers to the map and then we'll use the custom map marker feature to style them.

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.

In this lesson we'll build a generic login screen. We'll explore how to use a background image, how to center content with spacer views, and how to use other flex properties.

In this lesson we'll show how to take a beforeUnload call and convert it to a declarative React Component. It will handle subscribing to events, and automatically unsubscribing to prevent memory leaks.

In this lesson we'll use cjs-to-es6 to convert CommonJS requires to ES6 imports. We'll also show how to convert over a exported default object to take advantage of named exports.

We'll show how to construct views to build out a responsive progress bar. It will have props to allow fora dynamic border, bar color, and fill colors. Finally we'll use componentDidUpdate to add a smooth animation for when the progress is updated.

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.

In this lesson we will use Animated.spring and TouchableWithoutFeedback to animate the scale of a button in our React Native application. We will use the scale transform property and see how adjusting the friction of a spring will effect the spring animation.