Sliding Up Panel

Published in UI
October 01, 2022
1 min read
Sliding Up Panel

Introduction

This is a React Native sliding up panel implemented in Javascript.Works on any platform.

Installation

npm install --save 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 {
render() {
return (
<View style={styles.container}>
<Button title='Show panel' onPress={() => this._panel.show()} />
<SlidingUpPanel ref={c => this._panel = c}>
<View style={styles.container}>
<Text>Here is the content inside panel</Text>
<Button title='Hide' onPress={() => this._panel.hide()} />
</View>
</SlidingUpPanel>
</View>
)
}
}

Share


Previous Article
React Native Drawer
Next Article
Fading Slides
Awesome React Native
© 2025, All Rights Reserved.

Social Media