React Native

How to create a vertical slider with React Native PanResponder

In this tutorial, I want to show you how, with React Native, I created a simple vertical slider with a single marker.

Requirements

 


My requirements were that the slider respond to the user gesture on a marker.

bam tech react native panresponder


To do so, I analyzed  2 possibilities :

  • managing the gestures directly with React-Native Gesture Responder System, which enables you to manage the lifecycle of gestures in your app,
  • managing the gestures with external native libs, which will let you handle more complex gestures like rotation, pinches, long presses.


In my case, I only needed to manage the position of a single marker, so React-Native Gesture Responder System does the trick.


The pros for using external libs usually are :

The cons are :

  • you'll have to install native libs for both iOS and Android, which can take time, whereas the React-Native Gesture Responder System can be used as is
  • even though the doc is well written, it can take some time to use it correctly


The most supported lib which will help you doing so is React-Native-Gesture-Handler, which is also supported by Expo.


The solution I adopted is thus PanResponder, an included React-Native API that can be used to recognize touch gestures, swipes or other simple touches so you can build super interactive UI.


When using PanResponder, you have multiple listeners which listen to user gestures (for example the handler movement or its end). Each listener can be used with two parameters, the native event and the gesture state that enable you to know about the gesture's position, velocity, displacement, time.

Let's get going


In this section, we'll build a simple vertical slider that responds to a user gesture by following his gesture on the vertical axis. This slider begins at 0 and ends at 100.

 

You will find a gist containing my work at the end of this post !


First, we begin by creating a static slider :

bam tech react native panresponder


bam tech react native panresponder



Then we want to be able to give a value and place the marker on the right position. For this, we'll create a method, getBottomOffsetFromValue, that converts a bottom offset to a value.

 

bam tech react native panresponder

 

bam tech react native panresponder



Then, we want to be able to move our marker. That's where we'll use PanResponder :

bam tech react native panresponder



capValueWithinRange is used to cap the value (hence the position) of your circle within the height of your slider.


onMoveShouldSetPanResponderCapture is used to allow the OS to move the element attached to the panResponder.


Moreover, PanResponder defines mainly two useful methods to be triggered at specific events that we will use here.


  • onPanResponderMove is triggered on each PanHandler move. It can take two params, nativeEvent and gestureState.
  • nativeEvent gives you access to properties about the user touches, such as their locations.
  • gestureState gives you access to numerous properties on the user gesture, e.g. gestureState.dx or gestureState.dy which give you the user's displacement since the touch began, vx and vy which give you access to its speed etc? Here, we'll only need gestureState.dy.


Here are the properties you have access to with gestureState :


bam tech react native panresponder



  • onPanResponderRelease is triggered when the user released the handler and can also take the 2 parameters, nativeEvent and gestureState.



These methods will be used to go from the bottom offset of the circle to value we want to use.

When your methods are defined, you then have to set your panHandler. In our case it's the Circle.


You should now be ready to use your slider !


Here is a gist with all the code you will need :

https://gist.github.com/jfaverie/d98d8f60a510e3b68abeffb43a77d47a

Développeur mobile ?

Rejoins nos équipes