yaraht17 / React Native Draggable View
Licence: mit
DraggableView is a component for react-native, it allows you have a vertical draggable drawer view that you can drag up or drag down. So, if you drag and release that component, then it keeps moving until reach either initial position or container border.
Stars: ✭ 103
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Native Draggable View
Xam.plugin.simplebottomdrawer
Just a nice and simple BottomDrawer for your Xamarin Forms project
Stars: ✭ 92 (-10.68%)
Mutual labels: drawer, bottomsheet
react-spring-bottom-sheet
Accessible ♿️, Delightful ✨, & Fast 🚀
Stars: ✭ 604 (+486.41%)
Mutual labels: drawer, bottomsheet
React Native Bottomsheet Reanimated
React Native bottom sheet with fully native 60 FPS animations and awesome user experience
Stars: ✭ 80 (-22.33%)
Mutual labels: bottomsheet
Angular File Uploader
Angular file uploader is an Angular 2/4/5/6/7/8/9/10 + file uploader module with Real-Time Progress Bar, Responsive design, Angular Universal Compatibility, localization and multiple themes which includes Drag and Drop and much more.
Stars: ✭ 92 (-10.68%)
Mutual labels: drag-and-drop
Stickytabbarviewcontroller
Sticky and Collapsible View on top of tab bar
Stars: ✭ 82 (-20.39%)
Mutual labels: bottomsheet
Vue Drag And Drop Kanban
A simple kanban board where the items can be dragged and dropped from the list. This is a hybrid implementation of vue-smooth-dnd.
Stars: ✭ 93 (-9.71%)
Mutual labels: drag-and-drop
Bottomify Navigation View
A nice looking Spotify like bottom navigation view
Stars: ✭ 97 (-5.83%)
Mutual labels: bottomsheet
React Workspaces
The ultimate react workspace and panel management system.
Stars: ✭ 90 (-12.62%)
Mutual labels: drag-and-drop
Calenstyle
Responsive Drag-&-Drop Event Calendar Library for Web, Mobile Sites, Android, iOS & Windows Phone
Stars: ✭ 83 (-19.42%)
Mutual labels: drag-and-drop
React Native Navigation Drawer Extension
Drawer API built on top of wix react-native-navigation for iOS and Android (with TypeScript!)
Stars: ✭ 98 (-4.85%)
Mutual labels: drawer
React Native Scroll Bottom Sheet
Cross platform scrollable bottom sheet with virtualisation support, native animations at 60 FPS and fully implemented in JS land 🔥
Stars: ✭ 1,226 (+1090.29%)
Mutual labels: bottomsheet
Ennui
An Elegant Neural Network User Interface to build drag-and-drop neural networks, train in the browser, visualize during training, and export to Python.
Stars: ✭ 90 (-12.62%)
Mutual labels: drag-and-drop
Muuri
Infinite responsive, sortable, filterable and draggable layouts
Stars: ✭ 9,797 (+9411.65%)
Mutual labels: drag-and-drop
Html5sortable
VanillaJS sortable lists and grids using native HTML5 drag and drop API.
Stars: ✭ 1,384 (+1243.69%)
Mutual labels: drag-and-drop
React Sortable Hoc
A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list✌️
Stars: ✭ 9,747 (+9363.11%)
Mutual labels: drag-and-drop
react-native-draggable-view
DraggableView is a component for react-native, it allows you have a vertical draggable view that you can drag up or drag down. So, if you drag and release that component, then it keeps moving until reach either initial position or container border.
Example
draggable-view-sample
Installation
$ npm i react-native-draggable-view --save
Usage
<Drawer
initialDrawerSize={0.09}
autoDrawerUp={1} // 1 to auto up, 0 to auto down
renderContainerView={() => (
<Screen2 navigation={this.props.navigation} />
)}
renderDrawerView={() => (
<Screen3 navigation={this.props.navigation} />
)}
renderInitDrawerView={() => (
<View style={{ backgroundColor: 'white', height: 66 }}>
<StatusBar hidden={true} />
<CartHeader />
</View>
)}
/>
Properties
Prop | Default | Type | Description |
---|---|---|---|
onDragDown | undefined | function |
If you pass a function as parameter it will be notified when the user drag down the drawer |
onRelease | undefined | function |
If you pass a function as parameter it will be notified when the user release the drawer after drag it |
initialDrawerSize | 0.0 | number |
It's the initial position or size for Drawer component. If drawer size is 1 that means its using 100% of avalaible space on the screen |
isInverseDirection | false | boolean |
Allows to use the draggable view in the inverse direction. Which means from the top to the bottom. By default is from the bottom to the top. |
renderContainerView | undefined | View |
Pass as parameter a renderable react component to show as container. |
renderDrawerView | undefined | View |
Pass as parameter a renderable react component to show as drawer. |
renderInitDrawerView | undefined | View |
Pass as parameter a renderable react component to show as view can draggable |
finalDrawerHeight | 0 | number |
The height position that the drawer will stop starting from top. Example: finalDrawerHeight={100} will stop the drawer at 100 pixels from reaching the top. |
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].