Skip to content
Swipeable bottom panel for React Native 📱
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
components fix closing panel when touch bar, update example project Jul 18, 2019
examples fix closing panel when touch bar, update example project Jul 18, 2019
screenshots
.babelrc changes on close, rename component May 30, 2019
.gitignore changes on close, rename component May 30, 2019
.npmignore changes on close, rename component May 30, 2019
README.md openLarge parameter added Jul 8, 2019
index.js add prop types May 31, 2019
package-lock.json 1.0.3 Jun 3, 2019
package.json fix closing panel when touch bar, update example project Jul 18, 2019
rn-swipeable-panel-1.0.0.tgz update readme and package json Jun 3, 2019
yarn.lock

README.md



React Native Swipeable Panel

React Native Panel animates up and controllable with p
To see other examples click here

npm version


React Native Swipeable Panel that animate from bottom and controllable with pan gestures. You can extend panel by swiping up, make it small or close by swiping down with pan gestures. Feel free to redesign inside of panel.

Getting started

$ npm install rn-swipeable-panel --save

or

$ yarn add rn-swipeable-panel

Example

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

import SwipeablePanel from 'rn-swipeable-panel';


export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            swipeablePanelActive: false
        };
    }

    componentDidMount = () => {
        this.openPanel();
    };

    openPanel = () => {
        this.setState({ swipeablePanelActive: true });
    };

    closePanel = () => {
        this.setState({ swipeablePanelActive: false });
        setTimeout(() => {
        	this.openPanel();
        }, 1000);
    };

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>Welcome to React Native!</Text>
                <Text style={styles.instructions}>To get started, edit App.js</Text>
                <SwipeablePanel
                    fullWidth
					isActive={this.state.swipeablePanelActive}
					onClose={this.closePanel}
					onPressCloseButton={this.closePanel}
				>
					<PanelContent /> {/* Your Content Here */} 
				</SwipeablePanel>
            </View>
        );
    }
}

Options


Properties Type Description Default
isActive bool Show/Hide the panel false
onClose Function Fired when the panel is closed
onPressCloseButton Function Use this if you want to show close button. Using same function with onClose is recommended as example above
fullWidth bool Set true if you want to make full with panel false
openLarge bool Set true if you want to open panel large by default false

Releases

  • 1.0.2 - Initial release
  • 1.0.3 - Full width option
  • 1.0.4 - Prop and styling fixes
  • 1.0.5 - Disable swipe up when panel is full open
  • 1.0.6 - Scrollable content and close button
  • 1.0.7 - Changes for nested scrollview usage (Horizontal scrollview)
  • 1.0.8 - Optional close button
  • 1.0.9 - useNativeDriver for better performance
  • 1.0.11 - openLarge parameter added

TODOs

  • Add full width option
  • Disable swipe up when panel is full open
  • Scrollable content
  • Add close button
  • Horizontal scrollview inside the panel
  • Optional close button
  • Native driver for all animations for better performance
  • Open large panel by default
You can’t perform that action at this time.