TutorialsCourses
Create a Draggable Opacity Changing Circle with Reanimated in React Native
Jason Brown

In this lesson we'll use a PanGestureHandler to track a single gesture state. We'll use additional declarative animation functions like cond, eq, add, set, and event. We'll then use interpolate to create opacity and border effects whenever the circle is dragged to new locations.

React Native
Create a Tap-and-Hold Toggle Opacity Animated Box with Reanimated in React Native
Jason Brown

In this lesson we'll explore using Reanimated and React Native Gesture Handler to create a touchable opacity button using TapGestureHandler. With declarative animations in Reanimated we'll use tools like timing, Clock, set cond, and eq to create a purely native opacity animation.

React Native
Create a Tap-and-Hold Toggle Opacity Animated Box with Reanimated in React Native
Jason Brown

In this lesson we'll explore using Reanimated and React Native Gesture Handler to create a touchable opacity button using TapGestureHandler. With declarative animations in Reanimated we'll use tools like timing, Clock, set cond, and eq to create a purely native opacity animation.

React Native
Introduction to Reanimated in React Native
Jason Brown

In this lesson we'll explore using Reanimated and React Native Gesture Handler to create a button using TapGestureHandler. With declarative animations in Reanimated we'll use cond, and eq to create a purely native opacity change animation when the button is pressed.

React Native
Introduction to Reanimated in React Native
Jason Brown

In this lesson we'll explore using Reanimated and React Native Gesture Handler to create a button using TapGestureHandler. With declarative animations in Reanimated we'll use cond, and eq to create a purely native opacity change animation when the button is pressed.

React Native
Create an Instagram Press-and-Hold Image Preview Modal with Gesture Actions in React Native
Jason Brown

In this lesson we'll show how to create an always rendered but invisible modal. Then using onLayout, refs, and measure we can find our action locations. We'll use a PanResponder to register presses on an image. When you press and hold we'll use Animated to show the modal. With the onPanResponderMove we can check if the user has moved their finger onto an action. We'll use setState updater function to highlight the action in bold and show how to take action in onPanResponderRelease.

React Native
Contain an Animation within the Screen Dimensions in React Native
Jason Brown

In this lesson we'll use the screen Dimensions and anAnimated.ValueXY to create an animated element that when animated is contained within the screen dimensions. It uses the extrapolate: "clamp" feature of interpolate.

React Native
How to Detect Touch Inactivity with a PanResponder in React Native
Jason Brown

In this lesson we'll use the onMoveShouldSetPanResponderCapture from PanResponder to register touches with out stealing touches from other PanResponders. We can detect use this method to detect inactivity. This technique can be used for things like video players with auto-hiding controls.

React Native
Create a Youtube Video Page with Animated Video Drag to Corner in React Native
Jason Brown

Youtube has a unique video playing experience. It allows you to drag a video to the corner of the screen which continues to play. You can then navigate through the site and select other videos. Additionally if you want to drag it back up you can drag back to the video you were viewing.

React Native
Build a Map with Custom Animated Markers and Region Focus when Content is Scrolled in React Native
Jason Brown

We'll build out a map with react-native-maps and custom animated map makers. We'll construct an a scroll view that when scrolled will animate the marker that it is associated with. Once scrolling has stopped we will animate the map region and focus on the marker we are looking at.

We'll use a single Animated.Value and use and explain interpolate in depth. We'll also show how to use extrapolate: "clamp" to lock our outputRange values.

React Native
« Previous
2 of 7
Home