react-native-draggableview


!Alt Text

!Alt Text

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.

``shell
npm i draggableview --save
`

`shell
yarn add draggableview
`

Basic Usage

`js
import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import DraggableView from 'draggableview';

export default class App extends React.Component {
render() {
return (
style={styles.container}
backgroundComponent={}
/>
);
}
}

const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
flex: 1,
},
view: {
flex: 1,
backgroundColor: 'red',
},
});
`

API

$3

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

$3

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

$3

!Alt Text

`js
import * as React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import DraggableView from 'draggableview';

export default class App extends React.Component {
render() {
return (
style={styles.container}
backgroundComponent={}
offset={85}
threshold={300}
direction="up"
>

Drag me up!!


);
}
}

const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
flex: 1,
marginBottom: 35,
},
view: {
flex: 1,
backgroundColor: 'red',
},
innerView: {
flex: 1,
padding: 15,
justifyContent: 'flex-end',
alignItems: 'center',
},
});
`

$3

!Alt Text

`js
import * as React from 'react';
import { StyleSheet, View, Text } from 'react-native';

import DraggableView from 'draggableview';

export default class App extends React.Component {
render() {
return (
style={styles.container}
backgroundComponent={}
offset={40}
threshold={300}
>

Drag me down!!


);
}
}

const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
flex: 1,
},
view: {
flex: 1,
backgroundColor: 'red',
},
innerView: {
flex: 1,
padding: 20,
alignItems: 'center',
},
});
``

License

MIT.