Draggable Component in React Native

Two examples of Draggable Components(Boxes) in React Native. They are from the official documentation, and support web, iOS, and Android.

  1. Drag and Stay from PanResponder API
  2. Drag with Spring Back from Animated.ValueXY API
PanResponder example provided in React Native API documentation

Using the Native Driver

useNativeDriver needs to be explicitly specified.

In the above code, it is newly added in Animated.spring and Animated.event. Moreover, Animated.event’s second argument config is required, and therefore newly added to remove the regarding error.

The problem is, pan.getLayout() does not support useNativeDriver: true. It will cause the following warning. Therefore, pan.getLayout() in the original code has been replaced by pan.getTranslateTransform(), as guided in this React Native issue.

Style property 'left' is not supported by native animated module

Similarly, pan.getLayout() does not support useNativeDriver: true. It will cause the below warning. Therefore, config’s useNativeDriver is set as false, as guided in this React Native issue.

config.onPanResponderMove is not a function

Disclaimer

This post was originally posted at 2020–09–28.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store