Skip to content
Swipeable bottom panel for React Native 📱
JavaScript
Branch: master
Clone or download
Latest commit 7c32e6d Dec 15, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
components update rn-swipeable-panel comps, readme Dec 15, 2019
examples update example project component Dec 15, 2019
screenshots update readme Aug 11, 2019
.babelrc changes on close, rename component May 30, 2019
.gitignore
.npmignore changes on close, rename component May 30, 2019
README.md update readme Dec 15, 2019
index.js
package-lock.json Bump lodash from 4.17.11 to 4.17.15 Aug 11, 2019
package.json rn-swipeable-panel@1.0.18 Dec 15, 2019
rn-swipeable-panel-1.0.16.tgz update package json Nov 29, 2019
rn-swipeable-panel.gif update readme gif Dec 15, 2019
rn-swipeable-panel.png update rn-swipeable-panel comps, readme Dec 15, 2019
yarn.lock

README.md

React Native Swipeable Panel

rn-swipeable-panel ise swipeable, easy to use bottom panel for your React Native projects. You can extend panel by swiping up, make it small or close by swiping down with pan gestures. Feel free to redesign inside of the panel.

npm version



⚙️ Installation

$ npm install rn-swipeable-panel --save

or

$ yarn add rn-swipeable-panel

🚀 How to use

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 });
  };

  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
showCloseButton bool Set true if you want to show close button
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
onlyLarge bool Set true if you want to let panel open just large mode false
noBackgroundOpacity bool Set true if you want to disable black background opacity false
style Object Use this prop to override panel style {}
closeRootStyle Object Use this prop to override close button background style {}
closeIconStyle Object Use this prop to override close button icon style {}
closeOnTouchOutside bool Set true if you want to close panel by touching outside false

⭐️ Show Your Support

Please give a ⭐️ if this project helped you!

👏 Contributing

If you have any questions or requests or want to contribute to rn-swipeable-panel, please write the issue or give me a Pull Request freely.

You can’t perform that action at this time.