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.

--

--

--

Node.js and web developer using TypeScript. Undergraduate in Seoul National University.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

WHICH CODING LANGUAGE SHOULD I LEARN?

RxJS based state management in Angular — Part V

JavaScript Basics (Variables)

Create Infinite Scroll In WordPress With AJAX Request — Custom Code Without A Plugin.

Online tool generate typescript interface for you

sample

Building a Serverless API with ClaudiaJS

React-native authentication with Google OAuth 2

Don’t fear the HOC, when writing React

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
Hyunbin

Hyunbin

Node.js and web developer using TypeScript. Undergraduate in Seoul National University.

More from Medium

How to use Prettier with React Native

Working with SVGs in React Native

Never use Enzyme to test React Native apps

[React-Native][Helper] How to use Modal custom rather than Modal in native