@saibbyweb/react-native-draggable v1.0.0

@saibbyweb/react-native-draggable

A highly customizable draggable component for React Native applications with position tracking and boundary control.

Features

• 🔄 Smooth dragging experience using React Native Reanimated
• 📏 Automatic boundary detection and restriction
• 📍 Real-time position tracking and display
• 🧩 Accepts any React component as children
• 🎨 Highly customizable appearance and behavior
• 📱 Works on both iOS and Android

Installation

npm install @saibbyweb/react-native-draggable
# or
yarn add @saibbyweb/react-native-draggable

Dependencies

This package depends on react-native-gesture-handler and react-native-reanimated. If you haven't installed them yet:

npm install react-native-gesture-handler react-native-reanimated
# or
yarn add react-native-gesture-handler react-native-reanimated

Follow the installation instructions for these packages if you haven't set them up in your project yet:

• react-native-gesture-handler installation
• react-native-reanimated installation

Usage

Basic Example

import React from 'react';
import { View, StyleSheet } from 'react-native';
import DraggableBox from '@saibbyweb/react-native-draggable';

export default function App() {
  return (
    <View style={styles.container}>
      <DraggableBox />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
});

With Custom Content

import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Alert } from 'react-native';
import DraggableBox from '@saibbyweb/react-native-draggable';

export default function App() {
  return (
    <View style={styles.container}>
      <DraggableBox
        boxStyle={styles.customBox}
        showInstructions={false}
      >
        <TouchableOpacity
          style={styles.button}
          onPress={() => Alert.alert('Clicked', 'You clicked the draggable button!')}
        >
          <Text style={styles.buttonText}>Press Me</Text>
        </TouchableOpacity>
      </DraggableBox>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  customBox: {
    width: 120,
    height: 60,
    backgroundColor: 'transparent',
    shadowOpacity: 0,
    elevation: 0,
  },
  button: {
    width: '100%',
    height: '100%',
    backgroundColor: '#e74c3c',
    borderRadius: 10,
    justifyContent: 'center',
    alignItems: 'center',
  },
  buttonText: {
    color: 'white',
    fontWeight: 'bold',
  },
});

Position Tracking

import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import DraggableBox from '@saibbyweb/react-native-draggable';

export default function App() {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  return (
    <View style={styles.container}>
      <Text style={styles.positionText}>
        Current Position: X: {Math.round(position.x)}, Y: {Math.round(position.y)}
      </Text>
      
      <DraggableBox
        showPositionDisplay={false}
        onPositionChange={setPosition}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  positionText: {
    marginBottom: 20,
    fontSize: 16,
    fontWeight: 'bold',
  },
});

Props

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT