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