npm package: @saibbyweb/react-native-draggable
Description: A customizable draggable component for React Native applications with position tracking and boundary control
Author: SaibbyWeb hello@saibbyweb.com
Latest version: 1.0.0

# @saibbyweb/react-native-draggable

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

![React Native Draggable Demo](https://via.placeholder.com/600x300?text=React+Native+Draggable)

## 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

```sh
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:

```sh
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](https://docs.swmansion.com/react-native-gesture-handler/docs/installation)
- [react-native-reanimated installation](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation)

## Usage

### Basic Example

```jsx
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

```jsx
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

```jsx
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

| Prop                | Type                                 | Default | Description                                              |
|---------------------|--------------------------------------|---------|----------------------------------------------------------|
| children            | ReactNode                            | -       | Content to render inside the draggable box               |
| initialPosition     | { x: number, y: number }             | -       | Initial position of the draggable box                    |
| boxStyle            | StyleProp<ViewStyle>                 | {}      | Additional styles for the draggable box                  |
| containerStyle      | StyleProp<ViewStyle>                 | {}      | Additional styles for the container                      |
| showGrid            | boolean                              | true    | Whether to show the background grid                      |
| showBoundary        | boolean                              | true    | Whether to show the boundary visualization               |
| showPositionDisplay | boolean                              | true    | Whether to show the position display                     |
| showInstructions    | boolean                              | true    | Whether to show the instructions                         |
| onPositionChange    | (position: {x: number, y: number}) => void | - | Callback when position changes                          |

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT