Sliding up panel
React Native draggable sliding up panel purly implemented in Javascript. Inspired by AndroidSlidingUpPanel. Works nicely on both iOS and Android.
Installation
npm install --save eXist-FraGGer/rn-sliding-up-panel
Usage
import React from 'react';
import {View, Button, Text, TouchableOpacity} from 'react-native';
import SlidingUpPanel from 'rn-sliding-up-panel';
const styles = {
container: {
flex: 1,
backgroundColor: 'white',
alignItems: 'center',
justifyContent: 'center'
}
}
class MyComponent extends React.Component {
state = {
visible: false
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={() => this.setState({visible: true})}>
<Text>Show panel</Text>
</TouchableOpacity>
<SlidingUpPanel
ref={c => this._panel = c}
visible={this.state.visible}
onRequestClose={() => this.setState({visible: false})}>
<View style={styles.container}>
<Text>Here is the content inside panel</Text>
<Button title='hide' onPress={() => this._panel.transitionTo(0)} />
</View>
</SlidingUpPanel>
</View>
)
}
}
Props
Property | Type | Description |
---|---|---|
visible | boolean | Controls how panel should visible or not. |
draggableRange | {top: number, bottom: number} | You can not drag panel out of this range. top default to visible height of device, bottom default to 0. |
height | number | Control the height of panel. Default to height of window. |
renderSlidingControl | Function | Custom controll for dtagging the panel. |
onDragStart | Function | Called when panel is about to start dragging. |
onDrag | Function | Called when panel is dragging. Fires at most once per frame. |
onDragEnd | Function | Called when you release your fingers. Return true to cancel the momentum event (use this to use transitionTo inside the onDragEnd function). |
showBackdrop | boolean | Set to false to hide the backdrop behide panel. Default true . |
allowDragging | boolean | Set to false to disable dragging. Touch outside panel or press back button (Android) to hide. Default true . |
allowMomentum | boolean | If false , panel will not continue to move when you release your fingers. Default true . |
Methods
transitionTo: (value: number, onComplete: Function)
Programmatically move panel to a given value.