An Awesome fully Customizable library of react native for sliding panels purely implemented in Javascript. Works exceptionally well on android and ios.
We will be always available to hear every possible issue and to fix every reported bug. You can even directly report the issue/concern/query/suggestion at [email protected]
npm install react-native-sliding-up-down-panels --save
Copy and paste into the terminal in your project directory. For more information on npm install, please visit their official page
Note : We will soon provide the installation using yarn
- Always Put flex: 1 on the root container component style in which you are using < SlidingPanel />.
- Always use prop headerLayoutHeight to mention the height of the sliding panel header.
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Dimensions,
} from 'react-native';
const { width, height } = Dimensions.get('window');
import SlidingPanel from 'react-native-sliding-up-down-panels';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.bodyViewStyle}>
<Text>Hello My World</Text>
</View>
<SlidingPanel
headerLayoutHeight = {100}
headerLayout = { () =>
<View style={styles.headerLayoutStyle}>
<Text style={styles.commonTextStyle}>My Awesome sliding panel</Text>
</View>
}
slidingPanelLayout = { () =>
<View style={styles.slidingPanelLayoutStyle}>
<Text style={styles.commonTextStyle}>The best thing about me is you</Text>
</View>
}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
bodyViewStyle: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
headerLayoutStyle: {
width,
height: 100,
backgroundColor: 'orange',
justifyContent: 'center',
alignItems: 'center',
},
slidingPanelLayoutStyle: {
width,
height,
backgroundColor: '#7E52A0',
justifyContent: 'center',
alignItems: 'center',
},
commonTextStyle: {
color: 'white',
fontSize: 18,
},
});
If you are wrapping header layout inside a view, please make sure the height of that view is equal to headerLayoutHeight prop.
Property | Type | Description | Platform |
---|---|---|---|
headerLayoutHeight | number | Header height of sliding panel | android, ios |
headerLayout | function | Header Layout of sliding panel | android, ios |
slidingPanelLayout | function | Panel Layout of sliding panel | android, ios |
AnimationSpeed | number | Animation speed, (in millisecond) | android, ios |
slidingPanelLayoutHeight | number | Panel height of sliding panel | android, ios |
panelPosition | string | "top" or "bottom" | android, ios |
visible | booolean | to show/hide sliding panel | android, ios |
allowDragging | booolean | allow sliding panel to drag | android, ios |
allowAnimation | booolean | allow sliding panel to animate | android, ios |
onDragStart | function(event, gestureState) | returns event, gestureState | android, ios |
onDragStop | function(event, gestureState) | returns event, gestureState | android, ios |
onDrag | function(event, gestureState) | returns event, gestureState | android, ios |
onAnimationStart | function | triggers when panel animation starts | android, ios |
onAnimationStop | function | triggers when panel animation stops | android, ios |
Method Name | Description | Platform |
---|---|---|
onRequestStart | panel animation starts, sliding panel opens | android, ios |
onRequestClose | panel animation stops, sliding panel stops | android, ios |
In the next version, We will upgrade library to the following features.
- Installation using yarn.
- Sliding the panel upto a particular height.
- Left and Right sliding panels
- Drop down panels, (Wooo!!)
- Bug fixes