https://github.com/sjwall/react-native-drag-expand

Component to use drag gesture to expand or collapse a view size.
https://github.com/sjwall/react-native-drag-expand

component drag draggable headless react-native ui view

Last synced: 12 months ago
JSON representation

Component to use drag gesture to expand or collapse a view size.

• Host: GitHub
• URL: https://github.com/sjwall/react-native-drag-expand
• Owner: sjwall
• License: mit
• Created: 2024-11-16T20:36:11.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-01-25T18:40:32.000Z (over 1 year ago)
• Last Synced: 2025-05-13T14:20:44.821Z (about 1 year ago)
• Topics: component, drag, draggable, headless, react-native, ui, view
• Language: TypeScript
• Homepage:
• Size: 519 KB
• Stars: 6
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-native-drag-expand



  Bring your own UI, headless drag expand view.



[![npm version](https://badge.fury.io/js/react-native-drag-expand.svg)][npm]

[![npm downloads](https://img.shields.io/npm/dw/react-native-drag-expand?logo=npm&label=NPM%20downloads&cacheSeconds=3600)][npm]

[![GitHub license](https://img.shields.io/github/license/sjwall/react-native-drag-expand)][license]

[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat)][pr]







![Demo](./demo.gif)

## Installing react-native-drag-expand

To install react-native-drag-expand:

```bash

npm install react-native-drag-expand

```

Next, add the view:

```tsx

import {DragExpandView} from 'react-native-drag-expand'

import {Text, View} from 'react-native'

export default function App() {

  return (

    // Styled view container

    

      

        

          

            Your collapsed content

          

        

        

          

            Your expanded content

          

        

        

          

            Your drag hold point view

          

        

      

    

  )

}

```

[license]: https://github.com/sjwall/react-native-drag-expand/blob/main/LICENSE

[npm]: https://www.npmjs.com/package/react-native-drag-expand

[pr]: http://makeapullrequest.com