@vietkidz/rn-sliding-up-panel
v1.2.1
Published
Draggable sliding up panel implemented in React Native
Downloads
4
Maintainers
Readme
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 rn-sliding-up-panel
or if you are using yarn
yarn add rn-sliding-up-panel
Example
import React from 'react';
import {View, Button, Text} 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}>
<Button title='Show panel' onPress={() => this.setState({visible: true})} />
<SlidingUpPanel
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.setState({visible: false})} />
</View>
</SlidingUpPanel>
</View>
)
}
}
More:
Props
|Property|Type|Description
|---|---|---
|visible|boolean|Deterimines whether the panel is visible.
|draggableRange|{top: number, bottom: number}|Boundary limits for draggable area. top
default to visible height of device, bottom
default to 0.
|height|number|Height of panel. Default to visible height of device.
|startCollapsed|boolean| Initially show the bottom peek header at the bottom instead of top.
|onRequestClose|Function|Called when you touch the backdrop or slide down to hide the panel.
|onDragStart|(position: number) => void|Called when the panel is about to start dragging.
|onDrag|(position: number) => void|Called when the panel is dragging. Fires at most once per frame.
|onDragEnd|(position: number) => void|Called when you release your finger.
|showBackdrop|boolean|Controls the visibility of backdrop. Default true
.
|allowDragging|boolean|Default true
. Setting this to false
to disable dragging. Touching the backdrop triggers onRequestClose
normally.
|allowMomentum|boolean|If false
, panel will not continue to move when you release your finger.
|~~contentStyle~~|~~ViewStyle~~|~~The style of content inside panel.~~ Deprecated. You should wrap your content inside a View.
|children|React.Element | Function|Accepts passing a function as component. Invoked with dragHandlers
(that can be passed into another View like this <View {...dragHandlers}>
) when the panel is mounted. Useful when you want a part of your content that allows the user to slide the panel with.
Notes:
- All properties are optional.
Methods
transitionTo: (value: number | TimingAnimationConfig)
Programmatically move panel to a given value. Accepts a number or an object that may have the following options:
- toValue: The value that the panel will move to.
- duration: Length of animation (milliseconds). Default is 260.
- easing: Easing function to define curve. Default is
Easing.inOut(Easing.ease)
. - onAnimationEnd: A callback that will be called when the animation is done.
Changelogs
1.2.1
- Add
startCollapsed
: Initially start the panel at bottom of draggable range.
1.2.0
- Accept function as children. Allow a part of content becomes drag handlers.
- Fix issue can not interact with components underlies the panel.