React Native Draggable Action Button | 𝟐𝟎𝟐𝟎 | 𝐍𝐞𝐰𝐛𝐲𝐂𝐨𝐝𝐞𝐫.𝐜𝐨𝐦

A Draggable action button functions as a button and can be dragged

react-native-draggable package can be used to implemented this, which also allows custom bounds (i.e. along a line or within a boundary)

Creating new React Native App

Check React Native Installation for installation related info

Use react-native init command to create a new React Native project (here named NcDraggable)

react-native init NcDraggable

This creates a directory named NcDraggable and initializes it as a react native application directory

This can be skipped in case an existing react native project is being integrated into

Dependency

Go to project directory (here NcDraggable)

cd NcDraggable

Add react-native-device-info package to current project using yarn

yarn add react-native-draggable

or using npm

npm install react-native-draggable --save

iOS

After yarn add command, cd into ios folder inside project directory

cd ios

Use pod command to install any required CocoaPods dependencies:

pod install

Usage

Import

import Draggable from 'react-native-draggable';

Example usage

return (
    <View >
        <Draggable x={75} y={100} renderSize={56} renderColor='black' renderText='A' isCircle shouldReverse onShortPressRelease={()=>alert('touched!!')}/>
        <Draggable x={200} y={300} renderColor='red' renderText='B'/>
        <Draggable/>
    <Draggable x={50} y={50}>
        <CustomComponent/>
    </Draggable>
    </View>
);

Properties

Prop	Type	Example	Default	Description
renderText	string	'ANY'	'+'	text of draggable
isCircle	bool	{true}	---	render as circle
renderSize	number	{36}	{36}	draggable size
imageSource	source	require('./img/xxx.png')	---	image source
renderColor	string	'black'	---	Colors
children	Component	`<Text>Sup</Text>`	---	children to render as draggable
shouldReverse	bool	{false}	{false}	should draggable spring back to start when released
disabled	bool	{false}	{false}	should draggable be disabled
debug	bool	{false}	{false}	should show a debug visualization
touchableOpacityProps	Object	{ activeOpactiy: .1 }	---	props passed to TouchableOpacity component
animatedViewProps	Object	{ accessibilityHint: 'drag' }	---	props passed to Animated.View component
x	number	{0}	0	initial position x
y	number	{0}	0	initial position y
z	number	{1}	1	z-index / elevation
minX	number	{0}	---	min X value for left edge of component
minY	number	{0}	---	min Y value for top edge of component
maxX	number	{0}	---	max X value for right edge of component
maxY	number	{0}	---	max Y value for bottom edge of component

Events

Event callbacks whose arguments can be skipped

Event	Type	Arguments	Description
onDrag	func	event, gestureState	called every frame component is moved
onShortPressRelease	func	event	called when a press is released that isn't a long press or drag
onDragRelease	func	event, gestureState, bounds	called when a drag is released
onLongPress	func	event	called when a long press is started
onPressIn	func	event	called when a press is started
onPressOut	func	event	called when a press is stopped, or the component is dragged
onRelease	func	event, wasDragging	called at the end of interaction, regardless if press or drag
onReverse	func		called when a drag is released, if shouldReverse is true

App Code

App.js

import React from 'react';
import {View, Button, Dimensions} from 'react-native';
import Draggable from 'react-native-draggable';
const {width, height} = Dimensions.get('window');

export default function App() {

  const changeFace = () => {
    console.log('drag release');
    setSource(require('./img/trump2.png'));
  };

  return (
    <View>
      <Draggable
        debug
        renderColor="red"
        renderSize={64}
        x={width * 0.75}
        y={height - 100}
        minX={width / 2}
        maxX={width}
        minY={height - 200}
        maxY={height - 20}
        renderText="💩"
      />
      <Draggable
        debug
        renderSize={128}
        renderColor="black"
        x={200}
        y={300}
        minX={0}
        maxX={width}
        minY={300}
        maxY={300}
        renderText="Constrained Slider"
        onShortPressRelease={() => alert('clicked')}
      />
      <Draggable debug y={20} z={5} renderColor={'blue'} />
    </View>
  );
}