{"id":13600758,"url":"https://github.com/tongyy/react-native-draggable","last_synced_at":"2025-04-11T01:30:22.766Z","repository":{"id":20855657,"uuid":"90960353","full_name":"tongyy/react-native-draggable","owner":"tongyy","description":"Draggable Item ","archived":false,"fork":false,"pushed_at":"2023-12-06T12:38:58.000Z","size":3545,"stargazers_count":315,"open_issues_count":79,"forks_count":90,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-10T13:18:04.694Z","etag":null,"topics":["draggable","react-native","react-native-draggable"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tongyy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-05-11T09:12:35.000Z","updated_at":"2025-01-25T12:34:24.000Z","dependencies_parsed_at":"2024-01-14T06:04:51.667Z","dependency_job_id":"32f88847-396f-441a-8a4a-cf127a0bb479","html_url":"https://github.com/tongyy/react-native-draggable","commit_stats":{"total_commits":110,"total_committers":9,"mean_commits":"12.222222222222221","dds":"0.38181818181818183","last_synced_commit":"502f92dc97652ad42cfee73672977e6e7d152f56"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tongyy%2Freact-native-draggable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tongyy%2Freact-native-draggable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tongyy%2Freact-native-draggable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tongyy%2Freact-native-draggable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tongyy","download_url":"https://codeload.github.com/tongyy/react-native-draggable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248324944,"owners_count":21084837,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["draggable","react-native","react-native-draggable"],"created_at":"2024-08-01T18:00:47.942Z","updated_at":"2025-04-11T01:30:21.966Z","avatar_url":"https://github.com/tongyy.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","React, React Native"],"sub_categories":["Components"],"readme":"# react-native-draggable\n[![Build Status](https://travis-ci.org/tongyy/react-native-draggable.svg?branch=master)](https://travis-ci.org/tongyy/react-native-draggable) [![npm version](https://badge.fury.io/js/react-native-draggable.svg)](https://badge.fury.io/js/react-native-draggable)\n\n[![NPM](https://nodei.co/npm/react-native-draggable.png?compact=true)](https://npmjs.org/package/react-native-draggable)\n\n### UPDATE DEC 2019 (v3.0.0) - This repo has just been completely refreshed and contains very different functionality, please see the new props and usage below\n\nDraggable item for react-native!\n\n```\nnpm install react-native-draggable\nimport Draggable from 'react-native-draggable';\n```\nHow to use\n\n```\nreturn (\n    \u003cView \u003e\n        \u003cDraggable x={75} y={100} renderSize={56} renderColor='black' renderText='A' isCircle shouldReverse onShortPressRelease={()=\u003ealert('touched!!')}/\u003e \n        \u003cDraggable x={200} y={300} renderColor='red' renderText='B'/\u003e\n        \u003cDraggable/\u003e\n\t\u003cDraggable x={50} y={50}\u003e\n\t\t\u003cYourComponent/\u003e\n\t\u003c/Draggable\u003e\n    \u003c/View\u003e\n);\n```\n[Demo](https://github.com/tongyy/react-native-draggable/blob/master/demo/demo.gif)\n\n[![N|Solid](https://raw.githubusercontent.com/tongyy/react-native-draggable/master/demo/demo.gif)](https://raw.githubusercontent.com/tongyy/react-native-draggable/master/demo/demo.gif)\nin my project =\u003e \u003cimg src=\"https://raw.githubusercontent.com/tongyy/react-native-draggable/master/demo/demo2.png\" width=\"289\"\u003e\n\n```\nreturn (\n    \u003cView style={{backgroundColor: 'blue', flex: 1}} \u003e\n        \u003cDraggable \n            imageSource={require('./trump1.png')} \n            renderSize={80} \n            x={200}\n            y={300}\n            onDragRelease={this._changeFace}\n            onLongPress={()=\u003econsole.log('long press')}\n            onShortPressRelease={()=\u003econsole.log('press drag')}\n            onPressIn={()=\u003econsole.log('in press')}\n            onPressOut={()=\u003econsole.log('out press')}\n        /\u003e  \n    \u003c/View\u003e\n);  \n\n```\n[Event Demo](https://github.com/tongyy/react-native-draggable/blob/master/demo/demo3.gif) \n\n![DEMO2](https://raw.githubusercontent.com/tongyy/react-native-draggable/master/demo/demo3.gif)\n\n[Version 3 Demo](https://github.com/tongyy/react-native-draggable/blob/master/demo/demoV3.gif)\n\n![DEMOV3](https://raw.githubusercontent.com/tongyy/react-native-draggable/master/demo/demoV3.gif)\n\n\n# Props spec \u0026 Example\n## Properties\n| Prop | Type | Example | Default | Description |\n| :------------ |:---------------:|:---------------:|:---------------:|:-----|\n| renderText | string | 'ANY' | '+' | text of draggable |\n| isCircle | bool | {true} | --- | render as circle\n| renderSize | number | {36} | {36} | draggable size |\n| imageSource | source | require('./img/xxx.png') | --- | image source|\n| renderColor | string | 'black' | --- | [Colors](https://facebook.github.io/react-native/docs/colors.html)|\n| children | [Component](https://reactjs.org/docs/typechecking-with-proptypes.html#requiring-single-child) | `\u003cText\u003eSup\u003c/Text\u003e` | --- | children to render as draggable |\n| shouldReverse | bool | {false} | {false} | should draggable spring back to start when released |\n| disabled | bool | {false} | {false} | should draggable be disabled |\n| debug | bool | {false} | {false} | should show a debug visualization |\n| touchableOpacityProps | [Object](https://facebook.github.io/react-native/docs/touchableopacity#props) | { activeOpactiy: .1 } | --- | props passed to TouchableOpacity component |\n| animatedViewProps | [Object](https://facebook.github.io/react-native/docs/view#props) | { accessibilityHint: 'drag' } | --- | props passed to Animated.View component |\n| x | number |{0}| 0 | initial position x |\n| y | number |{0}| 0 | initial position y |\n| z | number |{1}| 1 | z-index / elevation |\n| minX | number |{0}| --- | min X value for left edge of component |\n| minY | number |{0}| --- | min Y value for top edge of component |\n| maxX | number |{0}| --- | max X value for right edge of component |\n| maxY | number |{0}| --- | max Y value for bottom edge of component |\n\n## Events\n| Event | Type | Arguments| Description |\n| :------------ |:---------------:|:---------------:|:-----|\n| onDrag | func | event, gestureState | called every frame component is moved |\n| onShortPressRelease | func | event | called when a press is released that isn't a long press or drag |\n| onDragRelease | func | event, gestureState, bounds | called when a drag is released |\n| onLongPress | func | event | called when a long press is started |\n| onPressIn | func | event | called when a press is started |\n| onPressOut | func | event | called when a press is stopped, or the component is dragged |\n| onRelease | func | event, wasDragging | called at the end of interaction, regardless if press or drag |\n| onReverse | func | | called when a drag is released, if shouldReverse is true |\n\n### Arguments [(event, gestureState)](https://reactnative.dev/docs/panresponder) \n#### event\n| Argument | Description | \n| :------------ |:---------------|\n| changedTouches | Array of all touch events that have changed since the last event |\n| identifier | The ID of the touch |\n| locationX | The X position of the touch, relative to the element |\n| locationY | The Y position of the touch, relative to the element |\n| pageX | The X position of the touch, relative to the root element |\n| pageY | The Y position of the touch, relative to the root element |\n| target | The node id of the element receiving the touch event |\n| timestamp | A time identifier for the touch, useful for velocity calculation |\n| touches | Array of all current touches on the screen |\n#### gestureState \n| Argument | Description | \n| :------------ |:---------------|\n| stateID | ID of the gestureState- persisted as long as there at least one touch on screen|\n| moveX | the latest screen coordinates of the recently-moved touch|\n| moveY | the latest screen coordinates of the recently-moved touch |\n| x0 | the screen coordinates of the responder grant |\n| y0 | the screen coordinates of the responder grant |\n| dx | accumulated distance of the gesture since the touch started |\n| dy | accumulated distance of the gesture since the touch started |\n| vx | current velocity of the gesture |\n| vy | current velocity of the gesture |\n| numberActiveTouches | Number of touches currently on screen |\n| gestureState | called at the end of interaction, regardless if press or drag |\n#### bounds\n| Argument | Description | \n| :------------ |:---------------|\n| left | as x at the top left corner |\n| top | as y at the top left corner |\n| right | as x at the bottom right corner |\n| bottom | as y at the bottom right corner |\n## Methods (not supported above V2.0.0)\n| Method | Params | Description |\n| :------------ |:---------------:|:-----|\n| reversePosition | --- | **use onReverse callback instead.** manually reset Draggable to start position |\n| getPosition| --- |**use onDragRelease callback instead.**  get the accurate coordinates x,y from the bounds|\n\n# What's next?\n\nThis Draggable is used to be a Draggable Button in my project. \nLet me know if you have any idea or demand, let's discuss and develop it.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftongyy%2Freact-native-draggable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftongyy%2Freact-native-draggable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftongyy%2Freact-native-draggable/lists"}