Draggable Component in React Native

With Touch Support and Spring Back

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.