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
import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import DraggableView from 'draggableview';
export default class App extends React.Component {
render() {
return (
<DraggableView
style={styles.container}
backgroundComponent={<View style={styles.view} />}
/>
);
}
}
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 |
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 (
<DraggableView
style={styles.container}
backgroundComponent={<View style={styles.view} />}
offset={85}
threshold={300}
direction="up"
>
<View style={styles.innerView}>
<Text>Drag me up!!</Text>
</View>
</DraggaleView>
);
}
}
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',
},
});
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 (
<DraggableView
style={styles.container}
backgroundComponent={<View style={styles.view} />}
offset={40}
threshold={300}
>
<View style={styles.innerView}>
<Text>Drag me down!!</Text>
</View>
</DraggaleView>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
flex: 1,
},
view: {
flex: 1,
backgroundColor: 'red',
},
innerView: {
flex: 1,
padding: 20,
alignItems: 'center',
},
});
MIT.