react-native-draggableview
Installation
Installation can be done through npm
or yarn
:
- This lib uses react-native-gesture-handler. If you are using Expo it is included by default, otherwise you will need to install it.
npm i draggableview --save
yarn add draggableview
Basic Usage
;;; Component { return <DraggableView style=stylescontainer backgroundComponent=<View style=stylesview /> /> ; } const styles = StyleSheet;
API
Props
Prop | Type | Description |
---|---|---|
style |
ViewStyle |
Styles of DraggableView. |
children |
Component |
The component to render on the DraggableView. |
backgroundComponent |
Component |
The component to render behind the DraggableView. |
offset |
number |
If you want to give to DraggableView an offset once it's fully dragged. This offset will be positioned based on the drag direction. |
direction |
string |
Can be either "up" or "down". This determines the drag direction. Default is "down". |
threshold |
number |
The minimum drag distance required to trigger the drag animation. |
Methods WIP, might change.
Use ref
to access these methods.
Method | Parameter | Description |
---|---|---|
moveToNormal |
void |
Moves DraggableView to it's default position |
moveToBottom |
void |
Moves DraggableView to it's bottom position |
moveToTop |
void |
Moves DraggableView to it's top position |
Examples
1.
;;; Component { return <DraggableView style=stylescontainer backgroundComponent=<View style=stylesview /> offset=85 threshold=300 direction="up" > <View style=stylesinnerView> <Text>Drag me up!!</Text> </View> </DraggaleView> ; } const styles = StyleSheet;
2.
;; ; Component { return <DraggableView style=stylescontainer backgroundComponent=<View style=stylesview /> offset=40 threshold=300 > <View style=stylesinnerView> <Text>Drag me down!!</Text> </View> </DraggaleView> ; } const styles = StyleSheet;
License
MIT.