├── .gitignore ├── DynamicDragAndDrop.js ├── LICENSE ├── README.md ├── StaticDragAndDrop.js └── demo.gif /.gitignore: -------------------------------------------------------------------------------- 1 | # React Native 2 | node_modules/ 3 | npm-debug.log 4 | yarn-debug.log 5 | yarn-error.log 6 | 7 | # Expo 8 | .expo/ 9 | .expo-shared/ 10 | 11 | # Build output 12 | android/build/ 13 | android/app/build/ 14 | ios/build/ 15 | ios/Pods/ 16 | ios/Podfile.lock 17 | ios/Flutter/Flutter.framework/ 18 | ios/Flutter/Flutter.podspec 19 | ios/Flutter/Flutter.podspec.json 20 | 21 | # macOS 22 | *.DS_Store 23 | 24 | # Android Studio 25 | *.iml 26 | .idea/ 27 | *.gradle/ 28 | .gradle/ 29 | local.properties 30 | 31 | # VSCode 32 | .vscode/ 33 | 34 | # Logs 35 | *.log 36 | 37 | # Temporary files 38 | *.tmp 39 | *.swp 40 | 41 | # Environment files 42 | .env 43 | 44 | # Coverage 45 | coverage/ 46 | 47 | # IDE-specific 48 | *.sublime-workspace 49 | *.sublime-project 50 | 51 | # Fastlane 52 | fastlane/report.xml 53 | fastlane/Preview.html 54 | fastlane/screenshots/ 55 | fastlane/test_output/ 56 | 57 | # Misc 58 | *.lock 59 | *.pid 60 | *.seed 61 | *.gz 62 | *.tar 63 | 64 | # Webpack 65 | webpack-stats.json 66 | 67 | # macOS Finder 68 | *.DS_Store 69 | 70 | # JetBrains IDEs 71 | .idea/ 72 | *.iml 73 | 74 | # React Native specific 75 | *.lock 76 | react-native.config.js 77 | 78 | # Other 79 | *.swp 80 | *.swo 81 | *.sublime-project 82 | *.sublime-workspace 83 | *.code-workspace 84 | -------------------------------------------------------------------------------- /DynamicDragAndDrop.js: -------------------------------------------------------------------------------- 1 | import {View, StatusBar} from 'react-native'; 2 | import Animated, { 3 | useAnimatedProps, 4 | useAnimatedGestureHandler, 5 | useAnimatedStyle, 6 | useSharedValue, 7 | } from 'react-native-reanimated'; 8 | import {PanGestureHandler} from 'react-native-gesture-handler'; 9 | import Svg, {Path} from 'react-native-svg'; 10 | 11 | const AnimatedPath = Animated.createAnimatedComponent(Path); 12 | 13 | const DragAndDrop = ({width = 150, height = 150}) => { 14 | const x = useSharedValue(0); 15 | const y = useSharedValue(0); 16 | 17 | const gestureHandler = useAnimatedGestureHandler({ 18 | onStart: (_, ctx) => { 19 | ctx.startX = x.value; 20 | ctx.startY = y.value; 21 | }, 22 | onActive: (event, ctx) => { 23 | x.value = ctx.startX + event.translationX; 24 | y.value = ctx.startY + event.translationY; 25 | }, 26 | }); 27 | 28 | const animatedStyle = useAnimatedStyle(() => ({ 29 | transform: [{translateX: x.value}, {translateY: y.value}], 30 | })); 31 | 32 | const path = useAnimatedProps(() => { 33 | return { 34 | d: ` 35 | M0,${height} 36 | Q${width / 4},${height} ${width},${height} 37 | Q${width},${height / 2} ${width},0 38 | Q${width / 2},0 0,0 39 | Q0,${height / 2} 0,${height} 40 | Z 41 | `, 42 | }; 43 | }); 44 | 45 | return ( 46 | 47 | 56 | ); 57 | }; 58 | 59 | export default DragAndDrop; 60 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 iCodeCraft 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Native Drag-and-Drop Snippet 2 | 3 | This repository provides a simple implementation of drag-and-drop functionality in React Native, including basic animation support. This snippet demonstrates how to create a draggable component using `react-native-reanimated` and `react-native-gesture-handler`. 4 | 5 | ## Usage 6 | 7 | To use this snippet in your React Native project, follow these steps: 8 | 9 | 1. **Install Dependencies:** 10 | 11 | Make sure you have the required dependencies installed: 12 | 13 | ```bash 14 | npm install react-native-reanimated react-native-gesture-handler react-native-svg 15 | ``` 16 | 17 | 2. **Add the Drag-and-Drop Component:** 18 | 19 | Create a new file, for example, `DragAndDrop.js`, and add the following code: 20 | 21 | ```jsx 22 | import {View, StatusBar} from 'react-native'; 23 | import Animated, { 24 | useSharedValue, 25 | useAnimatedStyle, 26 | useAnimatedGestureHandler, 27 | } from 'react-native-reanimated'; 28 | import {PanGestureHandler} from 'react-native-gesture-handler'; 29 | import Svg, {Path} from 'react-native-svg'; 30 | 31 | const DragAndDrop = () => { 32 | const x = useSharedValue(0); 33 | const y = useSharedValue(0); 34 | 35 | const gestureHandler = useAnimatedGestureHandler({ 36 | onStart: (_, ctx) => { 37 | ctx.startX = x.value; 38 | ctx.startY = y.value; 39 | }, 40 | onActive: (event, ctx) => { 41 | x.value = ctx.startX + event.translationX; 42 | y.value = ctx.startY + event.translationY; 43 | }, 44 | }); 45 | 46 | const animatedStyle = useAnimatedStyle(() => ({ 47 | transform: [{translateX: x.value}, {translateY: y.value}], 48 | })); 49 | 50 | return ( 51 | 52 | 61 | ); 62 | }; 63 | 64 | export default DragAndDrop; 65 | ``` 66 | 67 | For more advanced use cases, you can utilize `useAnimatedProps` to dynamically update SVG paths. 68 | 69 | 3. **Run Your Project:** 70 | 71 | After adding the component, you can use it in your React Native application like so: 72 | 73 | ```jsx 74 | import DragAndDrop from './DragAndDrop'; 75 | 76 | export default function App() { 77 | return ; 78 | } 79 | ``` 80 | 81 | ## Demonstration 82 | 83 | See how the component works in action: 84 | 85 | Drag-and-Drop Demo 86 | 87 | ## Contributing 88 | 89 | Feel free to open issues or submit pull requests if you have suggestions or improvements. 90 | 91 | ## License 92 | 93 | This project is licensed under the MIT License - see the LICENSE file for details. 94 | -------------------------------------------------------------------------------- /StaticDragAndDrop.js: -------------------------------------------------------------------------------- 1 | import {View, StatusBar} from 'react-native'; 2 | import Animated, { 3 | useAnimatedGestureHandler, 4 | useAnimatedStyle, 5 | useSharedValue, 6 | } from 'react-native-reanimated'; 7 | import {PanGestureHandler} from 'react-native-gesture-handler'; 8 | import Svg, {Path} from 'react-native-svg'; 9 | 10 | const DragAndDrop = () => { 11 | const x = useSharedValue(0); 12 | const y = useSharedValue(0); 13 | 14 | const gestureHandler = useAnimatedGestureHandler({ 15 | onStart: (_, ctx) => { 16 | ctx.startX = x.value; 17 | ctx.startY = y.value; 18 | }, 19 | onActive: (event, ctx) => { 20 | x.value = ctx.startX + event.translationX; 21 | y.value = ctx.startY + event.translationY; 22 | }, 23 | }); 24 | 25 | const animatedStyle = useAnimatedStyle(() => ({ 26 | transform: [{translateX: x.value}, {translateY: y.value}], 27 | })); 28 | 29 | return ( 30 | 31 | 40 | ); 41 | }; 42 | 43 | export default DragAndDrop; 44 | -------------------------------------------------------------------------------- /demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iCodeCraft/react-native-drag-and-drop-snippet/b7cf98d2e790b957d83929d816551c5e3573e133/demo.gif --------------------------------------------------------------------------------