All Projects → yaraht17 → React Native Draggable View

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.

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
Mosaic
A tiling web browser.
Stars: ✭ 74 (-28.16%)
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
Dashboards
Drag & drop dashboard builder!
Stars: ✭ 97 (-5.83%)
Mutual labels:  drag-and-drop
Bottomify Navigation View
A nice looking Spotify like bottom navigation view
Stars: ✭ 97 (-5.83%)
Mutual labels:  bottomsheet
Yii2 Gallery Manager
Stars: ✭ 90 (-12.62%)
Mutual labels:  drag-and-drop
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
Jquery Sortablejs
A jQuery binding for SortableJS
Stars: ✭ 94 (-8.74%)
Mutual labels:  drag-and-drop
Vue Drawer
vue.js drawer drawerlayout aside 侧边栏 抽屉
Stars: ✭ 81 (-21.36%)
Mutual labels:  drawer
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

react-native-draggable-view

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].