Forem: Ryan Munsch

Making an Input Slider in React Native with the Animated and Panresponder APIs

Ryan Munsch — Thu, 03 Dec 2020 18:55:26 +0000

This is the second of a two-part series on the React Native PanResponder API. See the first part here.

Now that we have a draggable component, let’s update our logic to give it the desired “slider” input behavior. The first step here is quite simple, we simply want to disable the y value from being updated when we move the Animated View component. To do this we’ll go into our onPanResponderMove handler and update the y value to 0 in this.state.animate.setValue():

// The user is moving their finger
onPanResponderMove: (e, gesture) => {
  // Set value of state.animate x to the delta for x and y to 0
  // to prevent vertical movement
  this.state.animate.setValue({ x: gesture.dx, y: 0 });
},

With these changes made, refresh your simulator and try to move the component around the screen. Now you should be able to move it from along the screen’s x-axis, but any vertical movement should be disabled.

Next, let’s include styles for a basic slider. Back in Container.js, start by wrapping the instance of <Movable /> in a View component. Let’s give our new View some basic styles to make it actually look something like an HTML range-type input; for now just a set width and height, a border, a border radius, and justify the View content along the component’s center.

Your Container component should now look like this:

export class Container extends Component {
  render() {
    return (
        <ScrollView contentContainerStyle={styles.container} canCancelContentTouches={false}>                    
          <View style={styles.slider}>
            <Movable />
          </View>   
    </ScrollView>  
    ); 
    }
} 

const styles = StyleSheet.create({
  container: {
    height: vh(100),
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  },
  slider: {
    height: vh(1.5),
    width: vw(85),
    borderWidth: 1,
    borderRadius: 25,
    justifyContent: 'center'
  }
});

Things should be looking pretty good by now, but there’s an issue - nothing stops the user from simply dragging <Movable /> right outside the horizontal boundaries of the component acting as the slider itself.

Now we’ll have to establish logic to keep <Movable /> within the bounds of its parent component. Since we set the width of the slider component as 85% of the viewport width, we can bet that is going to be the maximum value we can drag <Movable /> to along the x-axis. To get access to the maximum offset we want, pass maxOffset as a prop to <Movable />; in this case we’ll pass vw(85).

Before we move on, the value of props.maxOffset will need to take the width of <Movable /> into account, otherwise our positioning will be off by the value of the component's radius. We'll store the radius value in a class property, this.componentRadius. Simply set the value to half of the component's width.

We'll also set another class property, this.initialPosition, the negation of this.componentRadius. We'll use this value in a bit.

constructor(props) {
    super(props);

    // Get radius from StyleSheet rule
    this.componentRadius = styles.movable.width * .5;
    // Set initial position to negative value of component's radius
    this.initialPosition = this.componentRadius * -1;
    // Set property maxOffset to prop value minus component's radius
    this.maxOffset = this.props.maxOffset - this.componentRadius;

  [...]

With the value of props.maxOffset in our Animated component, we'll have to incorporate the logic to actually limit movement beyond the bounds of the slider parent component. The logic for this is pretty straightforward, we need to get the x offset of the component while it's being moved, and if it's less than 0 or is greater than this.maxOffset, we don't want to allow the "movement", that is, the setValue() called on the instance of this.state.animate.

The tricky part of implementing this is actually getting the x offset the user has dragged to. I calculated this by getting the sum of the change in the x offset and the most recent position of <Movable />. Let’s start by adding new value in state, latestPosition. This will keep track of the latest position of the component along the x-axis. We’ll need this value to determine if the component is still within bounds of its parent when it is being moved. We'll intialize it as the value of this.intialPosition, to account for the width of the component.

// Initialize state
this.state = {
  // Create instance of Animated.XY, which interpolates X and Y values
  animate: new Animated.ValueXY(),
  latestPosition: this.initialPosition
};

We'll also need to update the x value that we pass in this.state.animate.setValue() for the same reason - we need to consider the width of the component skewing the positioning of <Movable /> within the slider. We'll simply subtract the value of this.componentRadius from the existing value of 0.

// Initialize value of x and y coordinates
this.state.animate.setValue({ 
    // Subtract half of the width of the component to account for positioning
    x: 0 - this.componentRadius,
    y: 0, 
});

With our new state value and class properties in place, let's go back to onPanResponderMove() and update the logic to perform what was described above to prevent movement out of bounds:

// The user is moving their finger
onPanResponderMove: (e, gesture) => {
  // Get the final value that user has dragged to.
  let finalOffset = gesture.dx + this.state.latestPosition;

  // If finalOffset is within bounds of the slider, update state.drag to appropriate position
  if (finalOffset >= 0 && finalOffset <= this.maxOffset) {
    this.state.animate.setValue({ x: gesture.dx, y: 0 });
  }
},

Now try saving, refreshing and moving the component around again. You'll see that the behavior is not there yet. We'll have to update the value of this.state.latestPosition at the end of the touch event. In order to do so, we'll have to update onPanResponderRelease().

At this point, your code should simply have a call to this.state.animate.flattenOffset() in onPanResponderRelease(). Since we're about to make the logic progressively more involved, I'd recommend moving the business logic into a handler function and passing it as a callback. Don't forget to update the handler in PanResponder.create() to execute our callback and pass the gesture object as an argument.

// Fired at the end of the touch
onPanResponderRelease: (e, gesture) => {
    this.panResponderReleaseHandler(gesture)
}

[...]

/** 
 * Event handler for when panResponder touch event ends. 
 * @param {Object} gesture - The gestureState object passed as a param to each panResponder callback.
 * @return {null} Updates local state.
*/
panResponderReleaseHandler = (gesture) => {
  // Merges the offset value into the base value and resets the offset to     
  // zero
    this.state.animate.flattenOffset(); 
}

At the top of the function we’ll declare the finalOffset variable the same way we did in onPanResponderMove(). We'll also keep the call to flattenOffset().

// Get the final x value that user has dragged to
let finalOffset = gesture.dx + this.state.latestPosition;

// Merges the offset value into the base value and resets the offset to
// zero
this.state.animate.flattenOffset();

Try console.log()-ing the value of finalOffset in the same handler function. If you refresh the simulator and drag the component roughly halfway to the other end of the slider, you should get a positive value (I got about 150 on the simulated iPhone 11 Pro Max with after passing vw(85) to props.maxOffset .

Before we go any further, we’re also going to need two more variables: one to eventually set as the x value in this.state.animate.setValue() , and a second to set as the updated value of this.state.latestPosition. Let's call these updatedOffsetX and newPosition.

// Initialize value we'll use to update this.state.animate.x
let updatedOffsetX;
// Initialize value we'll use to update this.state.latestPosition
let newPosition;

With the variables we'll need declared, let's think about what we want to achieve with keeping the component within it's parent. We want to prevent the component from being dragged "out of bounds". To prevent this, we need to quantify what the numeric boundaries of the slider are.

For the left/minimum side of the slider, the value would simply be 0. If the value of finalOffset is less than or equal to 0, we know that the user has reached the left edge of the slider.

For the right/maximum side of the slider, we can use the value of this.maxOffset to determine if the user has dragged out of bounds. If the value of finalOffset is greater than or equal to this.maxOffset, we know we'll have to forcefully end the PanResponder event.

Taking these "boundary" values into consideration, we know the finalOffset of an "in bounds" drag would fall within the range of 0 and this.maxOffset, so a conditional would look like:

// If drag is "in bounds"
if (finalOffset >= 0 && finalOffset <= this.maxOffset) {
  // Handle logic for an in bounds drag here
}

Naturally, we'd expand this logic with a simple else block to determine the logic we'd use for an "out of bounds" drag. We'll do that next:

// If drag is "in bounds"
if (finalOffset >= 0 && finalOffset <= this.maxOffset) {
  // Handle logic for an in bounds drag here
}
// If drag is "out of bounds"
else {
  // Handle logic here
}

With this logic in place we're fundamentally designating two types of drags of our component: one that is within the bounds of the slider container and one that is out of bounds.

Within each of these types of drags we have three more scenarios:

The user drags and it ends up to the left of its beginning position.
The user drags the component and it ends up to the right of its beginning position.
The user drags it and it ends up in the exact same position.

Now let's determine the logic for each of these scenarios. We'll start with the user dragging to the left. We should be able to tell if the user has moved to the left if the value of gesture.dx is negative. If this is the case, we'll set updatedOffsetX to the negation of this.state.latestPosition - newPosition. This will give us the value of how far the user dragged to the left from the position of the component prior to it being moved.

// If drag is in bounds
if (finalOffset >= 0 && finalOffset <= this.maxOffset) {
  // Set newPosition to that of finalOffset
  newPosition = finalOffset;

  // If moved to the left
  if (gesture.dx < 0) {
    // Set udatedOffsetX to negation of state.latestPosition - newPosition
    updatedOffsetX = (this.state.latestPosition - newPosition) * -1
  }
}

Now, below the handler's main if/else block:

Pass updatedOffsetX to the x value in this.state.animate.setValue()
Call this.setState(), updating the value of this.state.latestPosition to the the value of newPosition.
Move the call to flattenOffset() to the bottom of the function.

Your handler should now look something like this:

panResponderReleaseHandler = (gesture) => {
    // Get the final value that user has dragged to.
    let finalOffset = gesture.dx + this.state.latestPosition;

    // Initialize value we'll use to update this.state.animate.x
    let updatedOffsetX;
    // Initialize value we'll use to update this.state.latestPosition
    let newPosition;

    // If drag is in bounds
    if (finalOffset >= 0 && finalOffset <= this.maxOffset) {
      // Set newPosition to that of finalOffset
      newPosition = finalOffset;

      // If moved to the left
      if (gesture.dx < 0) {
        // Set udatedOffsetX to negation of state.latestPosition - newPosition
        updatedOffsetX = (this.state.latestPosition - newPosition) * -1
      }
    }
    // If drag is "out of bounds"
    else {
      // Handle logic here
    }

    // Update x value of this.state.animate
    this.state.animate.setValue({ x: updatedOffsetX, y: 0 });

    // Update latestPosition
    this.setState({ latestPosition: newPosition });

    // Merges the offset value into the base value and resets the offset to zero
    this.state.animate.flattenOffset();
  }

With this current form of panResponderReleaseHandler(), we'll simply add more conditional statements to handle our other cases.

The conditional for the component being moved to the right simply checks if gesture.dx is positive; if it is we'll set updatedOffsetX to the value of newPosition - this.state.latestPosition. This gives us the distance that the user has moved the component to the right from the starting point of the touch event.

// If moved to the left
if (gesture.dx < 0) {
  // Set udatedOffsetX to negation of state.latestPosition - newPosition
  updatedOffsetX = (this.state.latestPosition - newPosition) * -1
}
// If moved to the right
else if (gesture.dx > 0) {
  // Set updatedOffsetX to newPosition - this.state.latestPosition
  updatedOffsetX = newPosition - this.state.latestPosition;
}

Finally, we need to add an else block to handle the rare event that the user retuns to exactly the same spot along the slider. If that's the case we simply set updatedOffsetX to 0.

// If drag is in bounds
if (finalOffset >= 0 && finalOffset <= this.maxOffset) {
  // Set newPosition to that of finalOffset
  newPosition = finalOffset;

  // If moved to the left
  if (gesture.dx < 0) {
    // Set udatedOffsetX to negation of state.latestPosition - newPosition
    updatedOffsetX = (this.state.latestPosition - newPosition) * -1
  }
  // If moved to the right
  else if (gesture.dx > 0) {
    // Set updatedOffsetX to newPosition - this.state.latestPosition
    updatedOffsetX = newPosition - this.state.latestPosition;
  }
  // If user returns to original position prior to this panResponder touch
  else {
    // Set updatedOffsetX to 0
    updatedOffsetX = 0;
  }
}

Now, test your progress. You should have everything working as long as you keep <Movable /> in bounds (you'll get an error if you drag out of bounds). If things look a little wacky after a couple of touch events, make sure you removed the call to flattenOffset() before the conditional logic in panResponderReleaseHandler().

Now we're at the home stretch! The following logic handles out of bounds drags. Let's take it step-by-step.

In the else block of our function's main conditional, we'll take a similar approach to the one we did with "in bound" movements. The main difference you'll see here is that we have no else if logic because we'll have the same logic for drags to the right and back to the original position.

In the first conditional, we'll target drags to the right boundary by checking if the value of gesture.dx is greater than 0.

The logic here looks similar to how we handle drags to the right for in bound movements, but we set newPosition to this.maxOffset and updatedOffsetX to the difference of this.maxOffset and this.state.latestPosition instead of newPosition and this.state.latestPosition.

// If drag is out of bounds
else {
  // If gesture.dx is positive
  if (gesture.dx > 0) {
    // Set newPosition to maxOffset
    newPosition = this.maxOffset;
    // Set value to update offset x with to maxOffset - latestPosition
    updatedOffsetX = this.maxOffset - this.state.latestPosition;
  }
  // If gesture.dx is the same or negative 
  else {

  }
}

Now we just need to handle drags to the left edge and back to the starting position of the touch event. In the else block, start by setting newPosition to 0. Then we need to check if the user was already at 0, if they were set the value updatedOffsetX to 0, otherwise set it to the negation of this.state.latestPosition.

// If gesture.dx is the same or negative 
else {
  // Set newPosition to 0
  newPosition = 0;

  // If already at zero
  if (this.state.latestPosition <= 0) {
    // Set updatedOffsetX to 0
    updatedOffsetX = 0;
  }
  // Set value to update offset x with to negation of latestPosition
  else {
    updatedOffsetX = this.state.latestPosition * -1;
  }
}

Now take a look at how everything is working. If you've followed along correctly, you shouldn't be getting any more errors when dragging <Movable /> out of bounds in either direction. There should just be one issue with the slider at this point: if you return to the left edge of the slider, it should look like the component doesn't quite go to the edge of the slider like it does on the right edge. This is because we need to take the radius of the component into consideration like we did when we inititialized this.initialPosition in the constructor.

We can compensate for the radius by subtracting this.componentRadius from the value of updatedOffsetX in the else statement if the user isn't already at the left edge of the component. Instead of using this.state.latestPosition to determine this, let's add a very explicit boolean value in local state, atMinValue. Initialize it as false in the constructor.

// Initialize state
this.state = {
  // Create instance of Animated.XY, which interpolates X and Y values
  animate: new Animated.ValueXY(),
  latestPosition: this.initialPosition,
  atMinValue: false
};

Back in else block of the out of bounds conditional in panResponderReleaseHandler(), we want to subtract the value of this.componentRadius from updatedOffsetX if we're not already at the minimum value. We'll also always set this.state.atMinValue to true at this point.

 // Set value to update offset x with to negative value of latestPosition
else {
  updatedOffsetX = (this.state.latestPosition * -1);

  // If not already atMinValue
  if (!this.state.atMinValue) {
    // Subtract component radius from updatedOffsetX
    updatedOffsetX -= this.componentRadius;
  }

  this.setState({ atMinValue: true });
}

With this solution in place, you should now be having the adverse issue with <Movable /> not quite looking like it's all the way at the value of this.maxOffset on a drag all the way to the right. In the conditional for a positive move, we'll add the opposite logic to add the value of the component's radius to updateOffsetX.

// If gesture.dx is positive
if (gesture.dx > 0) {
  // Set newPosition to maxOffset
  newPosition = this.maxOffset;
  // Set value to update offset x with to maxOffset - latestPosition
  updatedOffsetX = this.maxOffset - this.state.latestPosition;

  // If coming from minValue/0
  if (this.state.atMinValue) {
    // Add component radius to updatedOffsetX
    updatedOffsetX += this.componentRadius;
    // Update state.atMinValue
    this.setState({ atMinValue: false });
  }
}

With this logic in place, our slider should be finished. Of course you'll likely want to add some additional logic to "snap" to a pressed location, to set a minimum and maximum value with new props, or to tailor the PanResponder handlers to your own unique needs, but this should give you a good foundation to build off of to fit your needs.

Thanks for reading and for following along! :) Happy coding.

Building a Movable Animated Component in React Native

Ryan Munsch — Fri, 23 Oct 2020 21:43:36 +0000

While building out the front end of a mobile application for a large client, my team and I found ourselves in need of a React Native input component similar to an HTML range-type input. The desired functionality was for a user to pick a single value from 0-10 along a range input by either “sliding” the input cursor or pressing on a section of the component. We started calling this hypothetical component a “slider” or a “slider picker”, so that’s the language I’ll be using from here on out in regards to it.

We struggled to find an npm package for this functionality that got along with our existing stack and the version of Expo we were forced to use at the time, so I was tasked with building out the component. I spent a couple of days building out a rudimentary first version that was not great. It didn’t really slide so much as it allowed presses within the dimensions of the component, but we needed to get the app’s MVP out the door so this was our reality for now.

Eventually, there was time for me to refactor the existing component. Using the React Native Animated and PanResponder APIs, I was able to make a proper slider component that I was proud of.

In this first of two articles I’ll walk you through the process of building a moveable React Native component that the user can “drag” around the screen, and in doing so we’ll develop a foundational understanding of the Animated and PanResponder React Native APIs. In a subsequent article, I'll be walking through the steps to convert a simple moveable component into an actual slider input.

A bare-bones look at what we’ll build

Getting started

When I’m prototyping for React Native, I like to do it in a sample repo with as little overhead as possible; I recommend doing the same before integrating the slider into any project.

The only dependency necessary for building out our slider is react-native-css-vh-vw, a ditto of the vh and vw units in CSS for React Native. This package itself has no dependencies and at the time of writing this is under 4kb.

Let’s start with installing our sole dependency. At the root of your project, run the following in your terminal:

npm install react-native-css-vh-vw

Now let’s go ahead and start with some boilerplate in Movable.js.



import React, { Component } from "react";
import { Animated, PanResponder, StyleSheet } from "react-native";
import { vh, vw } from 'react-native-css-vh-vw';

export class Movable extends Component {
 constructor(props) {
   super(props);

   // Initialize state
   this.state = {
     // Create instance of Animated.XY, which interpolates
     // X and Y values
     animate: new Animated.ValueXY() // Inits both x and y to 0
   };

   // Set value of x and y coordinate
   this.state.animate.setValue({ x: 0, y: 0 });

   [...] 
 }

Here in Movable.js, we’ve got our boilerplate along with the first bit of logic we need for getting going with Animated and PanResponder.

While we’re at it, let’s make a component that will act as the container/screen for Movable.js:



import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import { vh, vw } from 'react-native-css-vh-vw';

import { Movable } from '../components/Generics/Movable';

export class Container extends Component {
 render() {
   return (
     <View style={styles.container}>
       <Movable />
     </View>
   );
 }
}

const styles = StyleSheet.create({
 container: {
   height: vh(100),
   backgroundColor: '#fff',
   alignItems: 'center',
   justifyContent: 'center',
 }
});

First, we have some configuring to do with the Animated API - in the component’s constructor we initialize this.state.animate, setting it to new Animated.ValueXY() (docs here) and immediately call setValue() on it. When this eventually gets passed to our instance of <Animated.View> it sets the x/y position of the component when it is rendered, relative to any styling you may place on it through the style prop. For example, I could execute this.state.animate.setValue({ x: 200, y: -150 }); and when the component first renders, it will be positioned 200 pixels to the right and 150 above the center of the screen (because the parent container is styled to position content vertically and horizontally).

Note: In addition to React Native’s official docs, I also found this page from https://animationbook.codedaily.io/ helpful in understanding Animated.ValueXY().



 [...]

   // Initialize panResponder and configure handlers
   this._panResponder = PanResponder.create({
     //     
     // Asks to be the touch responder for a
     // press on the View
     //
     onMoveShouldSetPanResponder: () => true,
     //
     // Actions taken when the View has begun
     // responding to touch events
     //
     onPanResponderGrant: () => {
       //
       // Set offset state.animate to prevent
       // Animated.View from returning to 0      
       // coordinates when it is moved again.
       //
       this.state.animate.setOffset({
         x: this.state.animate.x._value,
         y: this.state.animate.y._value
       });
       //
       // Set value to 0/0 to prevent AnimatedView
       // from "jumping" on start of
       // animate. Stabilizes the component.
       //
       this.state.animate.setValue({x: 0, y: 0})
     },
     //
     // The user is moving their finger
     //
     onPanResponderMove: (e, gesture) => {
       //
       // Set value of state.animate x/y to the
       // delta value of each
       //
       this.state.animate.setValue({
         x: gesture.dx,
         y: gesture.dy
       });
     },
     //
     // Fired at the end of the touch
     //
     onPanResponderRelease: () => {
       //
       // Merges the offset value into the
       // base value and resets the offset
       // to zero
       //
       this.state.animate.flattenOffset();
     }
   });
} // End of constructor

  render() {
   return (
     <Animated.View
       // Pass all panHandlers to our AnimatedView
       {...this._panResponder.panHandlers}
       //
       // getLayout() converts {x, y} into 
       // {left, top} for use in style
       //
       style={[
         this.state.animate.getLayout(),
         styles.button
       ]}
     />
   )
 }

Copy and paste the contents of the above code block into Movable.jsand open up the iOS simulator on your machine (for now let’s ignore the actual contents of the code and make sure it’s working as expected). Your output should look very close to the gif above and have the same functionality.

With the simple movable component working, let’s take a further look into the code that provides us with the desired functionality.

For now, disregard any of the code that is within the render() function; we’ll get to that in a bit.

Divert your attention to the code we’ve added to the component’s constructor(). We’ve created an instance of PanResponder and configured its handlers. The documentation for the API is a bit confusing in my opinion (the Usage Pattern section is helpful), but the main takeaway is that it converts a series of touches into a single gesture, so that “drag” of a finger is really a series of several touch events that are consolidated into one. To achieve this functionality, the API uses a tweaked version of the Gesture Responder System.

To use PanResponder, you’ll need to create an instance and pass an object of key/value pair handlers. Reference the code block above to see the behavior and usage of each handler needed for a simple draggable component. We’ll be passing an arrow function to each handler to set the desired behavior. Let’s walk through that configuration object, one handler at a time.

Note: We won’t be using every PanResponder handler available.

The first key we’ll pass to PanResponder.create() is onMoveShouldSetPanResponder, which simply returns true. You can think of this as telling the View with the handler that it can “claim” the touch event taking place.

Second is onPanResponderGrant: this is where any logic will take place that we want executed when the View has started responding to touch events. Here, we need to call two functions for our instance of AnimatedValue stored in this.state.animate - setOffset() and setValue().

According to the React Native docs, setOffset():

“Sets an offset that is applied on top of whatever value is set, whether via setValue, an animation, or Animated.event. Useful for compensating things like the start of a pan gesture.” In the context of our example, we pass an object with a key/value pair for both x and y to setOffset(), each value the respective one of this.state.animate at the time when the touch event has begun.



this.state.animate.setOffset({
  x: this.state.animate.x._value,
  y: this.state.animate.y._value
});

Now when the touch event begins, an update to the value of this.state.animate accounts for the value of its most recent x and y offsets; without this the values would update in relation to the values for x and y that you set when you first called this.state.animate.setValue() in the constructor (in our case x: 0,y: 0). To see what this logic really offers our little app, let’s remove it. Comment out this line of code, refresh your Simulator, and try moving around the component again and see how behavior changes.

Still within onPanResponderGrant, we execute this.state.animate.setValue() once again passing an object with a key/value pair for both x and y, this time with them both set to zero. Let’s take a quick look at what the React Native docs have to say about this method: “Directly set the value. This will stop any animations running on the value and update all the bound properties.” To use layman’s terms, this prevents the possibility of our animated component from “jumping” around the container at the beginning of a touch event. At this point, calling setValue() here is more of a precautionary measure, but it will have clearer implications when we start converting this component into an actual Slider. Like with setOffset(), let’s tweak this line of code to get a better sense of what it does: change the x value to 1000 and the y value to 50, refresh your Simulator, and try moving the component around again.

The next PanResponder handler is onPanResponderMove, the handler for when the user moves their finger during the touch event. For this handler, we’ll be using one of the two parameters that can be passed to each PanResponder handler, gestureState. The other parameter is nativeEvent, which we must still pass even though we won’t be using it (see the PanResponder docs for a detailed look at each parameter). We’re going to take two values within gestureState and pass them to this.state.animate.setValue(), gestureState.dx and gestureState.dy.



// The user is moving their finger
onPanResponderMove: (e, gesture) => {
  // Set value of state.animate x/y to the delta value of each
  this.state.animate.setValue({ x: gesture.dx, y: gesture.dy });
},

These two values are relatively straightforward; according to the docs, they represent “accumulated distance of the gesture since the touch started” for each respective axis. Let’s say you move the component 50 pixels to the left, gesture.dx will have a value of -50. If you move the component 125 pixels towards the bottom of the device’s screen, gesture.dy will have a value of 125. Gestures of the same distance in the opposite direction would be 50 and 125 respectively.

The final PanResponder handler used is onPanResponderRelease, which is fired at the end of the touch when the user lifts their finger. In cases where you’d like to set a local state value or execute a callback to hoist state to a parent container, this is likely the best handler to do it in. For now, we simply call flattenOffset() on this.state.animate - according to the docs, this “merges the offset value into the base value and resets the offset to zero.”[1] This merge happens without changing the output value of the animation event. If we remove flattenOffset() the first one or two drags of our component look ok, but continued drags will show the problem with not resetting the offset value.

With our PanResponder handlers configured, let’s turn our attention to what’s going on inside of our render() function.

Instead of using a normal View component, we use the Animated.View component and pass all the PanResponder handlers as props using an object with the JavaScript spread operator. Finally, we pass an array to the component’s style prop with whatever styles you’d like to apply to your component (I’ve included mine below), along with a call to this.state.animate.getLayout() - which converts the Animated instance’s x and y values to left and top style values respectively.



const styles = StyleSheet.create({
  button: {
    width: vw(6),
    height: vw(6),
    borderRadius: vw(100), * .5,
    borderWidth: 1,
    backgroundColor: 'blue'
  }
});

Now we have a fully moveable React Native component! It’s not much at this point, but feel free to continue along in the following article to finish building out our Slider component.

Thanks for reading! The second article is coming very soon!