Description:
A performant customizable bottom sheet component made on top of Wix react-native-navigation library. The component is built using react-native-gesture-handler and react-native-reanimated.
This solution uses showModal under the hood to display the bottom sheet. Default animations and hardware back button press are overridden and properly adjusted for seamless integration with react-native-navigation library.
Features:
- Smooth interactions & snapping animations
- Customizable
- Supports multiple snapping points
- Seamless integration with react-native-navigation
- Scrollable content
How to use it:
1. Installation.
# Yarn $ yarn add react-native-navigation-bottom-sheet react-native-gesture-handler [email protected] # NPM $ npm i react-native-navigation-bottom-sheet react-native-gesture-handler [email protected]
2. Import and initialize the component.
import React, { Component } from 'react'
import { Text, View, Button } from 'react-native';
import { RNNBottomSheet } from 'react-native-navigation-bottom-sheet';
RNNBottomSheet.init();3. Toggle the bottom sheet using the openBottomSheet() method.
export default class App extends Component {
renderContent = () => (
<View
style={{
backgroundColor: 'white',
height: 350,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 16,
}}
>
<Text>
In order to close the modal, you can swipe it down, touch the area outside
it or press the back button.
</Text>
</View>
);
render() {
return (
<View style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'whitesmoke',
}}>
<Button
onPress={() =>
RNNBottomSheet.openBottomSheet({
renderContent: this.renderContent,
snapPoints: [0, '20%', '40%', '70%'],
borderRadius: 16,
onChange: (index: number) => console.log("Snapped to " + index),
})
}
title="Show modal"
/>
</View>
);
}
}4. Available component props.
/**
* Points for snapping of bottom sheet component. They define distance from bottom of the screen.
* Might be number or percent (as string e.g. '20%') for points or percents of screen height from bottom.
*/
snapPoints: (number | string)[];
/**
* Initial snap index. Defaults to 0.
*/
initialSnapIndex?: number;
/**
* Method for rendering scrollable content of bottom sheet.
*/
renderContent?: () => React.ReactNode;
/**
* Method for rendering non-scrollable header of bottom sheet.
*/
renderHeader?: () => React.ReactNode;
/**
* Whether the drawer be dismissed when a click is registered outside. Defaults to true.
*/
dismissWhenTouchOutside?: boolean;
/**
* Defines if bottom sheet content could be scrollable by gesture. Defaults to true.
*/
enabledContentGestureInteraction?: boolean;
/**
* Opacity of the screen outside the bottm sheet. Defaults to 0.7.
*/
fadeOpacity?: number;
style?: Animated.AnimateStyle<
Omit<
ViewStyle,
| 'flexDirection'
| 'position'
| 'top'
| 'left'
| 'bottom'
| 'right'
| 'opacity'
| 'transform'
>
>;
/**
* Background color of the bottom sheet. Defaults to '#fff'.
*/
backgroundColor?: string;
/**
* Border radius of the bottom sheet.
*/
borderRadius?: number;
/**
* Object consisting of several options defining behavior of animation.
*/
animationConfig?: AnimationConfig;
/**
* Callback when the sheet position changed.
* @type (index: number) => void;
*/
onChange?: (index: number) => void;5. Possible options for AnimationConfig
damping?: number; mass?: number; stiffness?: number; restSpeedThreshold?: number; restDisplacementThreshold?: number; toss?: number; deceleration?: number; velocityFactor?: number;
6. API methods.
// initialize RNNBottomSheet.init() // open RNNBottomSheet.openBottomSheet(props) // close RNNBottomSheet.closeBottomSheet() // get component name RNNBottomSheet.getComponentName() // check if is opended RNNBottomSheet.isOpened()
Preview:
