Create a Touchable Opacity Button with Reanimated in React Native
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.
Instructor: [00:01] When it comes to rendering views with Reanimated, it follows the same principles as Animated in React Native. First, we'll import Animated from React Native Reanimated. We'll render an Animated.View, and apply some styles that we've already set up. We're going to apply some simple box stylings. We're going to say style = styles.box. We have our orange box showing up.
[00:34] Because React Native Reanimated operates on the Native side, we need to use its counterpart. We'll import Tap Gesture Handler from React Native Gesture Handler. With our Tap Gesture Handler, we're going to wrap our Animated node.
[01:05] The next step is to create a constructor, so that we can create and events handler for our Tap Gesture Handler. We'll say constructor props, and we're going to go super with our props. We're then going to need a few pieces destructured from Animated. Let's say const event and value equals Animated.
[01:28] Inside our constructor, we're going to set up a value to hold on to the gesture state. Say const state = new value, say negative one. This is going to hold on to the Tap Gesture Handler's gesture state. It's going to start with began, eventually move on to active, and end as the gestures of the user's touch goes through the gesture life cycles.
[01:54] With our state to hold on to our gesture state, we now need to create an event handler, say this.onStateChange = events, which works just like Animated event, which takes an array, and an object for the first argument that that function will be called with. We'll then say Native events. What we care about is state.
[02:22] State is a special property passed on to Native event that holds that gesture handler's current state. We can use the onHandlerStateChange and pass in our this.onStateChange, so that it will receive the gestures and set the values on to our value of state.
[02:48] The next step is to create the conditional for the opacity. We need to import a couple more things. The first thing we need to import is state from React Native Gesture Handler, as well as condition and equal. The state exported from React Native Gesture Handler will have the numbers that equate to the particular state changes that the handler is going through.
[03:15] We're going to set up this._.opacity and we're going to use a conditional. Let's say condition, which takes three arguments. The first is the thing that it's being compared to, so what's going to be either true or false. We're going to say EQ and we're going to say state, which refers to the gesture state.
[03:37] When it is equal to state.began, so that means a user has tapped on this, but has not yet released, then it will provide the value that comes next, so the second argument to condition, which will be 02. We'll have a 02 opacity.
[03:59] When the state is anything, but state.began, then we want to provide a different opacity. In our case, it will be one. Now that we have a state change to hold on to from an event from our gesture handler, as well as our conditional setup, we can now pass that into our Animated.View.
[04:28] When we press on our Tap Gesture Handler, the state will be set, our conditional will run, and we now have a 02 opacity. Then on release, our state will change to end, and that will then return the opacity of one and update our Animated.View all without sending a single event over the bridge.