Swipeable Bottom Panel For React Native

A 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.

Basic Usage:

1. Install & Import.

# Yarn
$ yarn add rn-swipeable-panel

# NPM
$ npm i rn-swipeable-panel --save

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { SwipeablePanel } from 'rn-swipeable-panel';

2. Create a basic swipeable bottom panel in the app.

export default App = () => {
  const [panelProps, setPanelProps] = useState({
    fullWidth: true,
    openLarge: true,
    showCloseButton: true,
    onClose: () => closePanel(),
    onPressCloseButton: () => closePanel(),
  });
  const [isPanelActive, setIsPanelActive] = useState(false);
  const openPanel = () => {
    setIsPanelActive(true);
  };
  const closePanel = () => {
    setIsPanelActive(false);
  };
  return (
    <View style={styles.container}>
      <SwipeablePanel {...panelProps} isActive={isPanelActive}>
        <PanelContent /> {/* Your Content Here */}
      </SwipeablePanel>
    </View>
  );
};

3. Available component props.

isActive: boolean;
onClose: () => void;
showCloseButton?: boolean;
fullWidth?: boolean;
noBackgroundOpacity?: boolean;
style?: object;
closeRootStyle?: object;
closeIconStyle?: object;
closeOnTouchOutside?: boolean;
onlyLarge?: boolean;
onlySmall?: boolean;
openLarge?: boolean;
noBar?: boolean;
barStyle?: object;
allowTouchOutside?: boolean;

Preview:

Download Details:

Author: enesozturk

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/enesozturk/rn-swipeable-panel

License: MIT