A draggable view for React Native
npm install draggableview
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
`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 (
backgroundComponent={
/>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
flex: 1,
},
view: {
flex: 1,
backgroundColor: 'red',
},
});
`
| 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. |
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 |
`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 (
backgroundComponent={
offset={85}
threshold={300}
direction="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',
},
});
`
`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 (
backgroundComponent={
offset={40}
threshold={300}
>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
flex: 1,
},
view: {
flex: 1,
backgroundColor: 'red',
},
innerView: {
flex: 1,
padding: 20,
alignItems: 'center',
},
});
``
MIT.