BottomSheet
AMA Provides an accessible bottom sheet built on top of react-native-reanimated and react-native-gesture-handler.
Example
import { BottomSheet } from '@react-native-ama/extras
const Component = () => (
<BottomSheet
visible={modalVisible}
onRequestClose={() => {
setModalVisible(!modalVisible);
}}
closeActionAccessibilityLabel="close bottomsheet"
bottomSheetStyle={styles.modalView}
headerComponent={
<View style={{ paddingHorizontal: theme.padding.big }}>
<Header title="This is the bottom sheet" />
</View>
}
scrollViewStyle={styles.modalViewContent}>
<Pressable
onPress={() => setModalVisible(!modalVisible)}
accessibilityRole="button">
<Text>Close bottom sheet</Text>
</Pressable>
</BottomSheet>
);
Accessibility
- Checks that the
closeActionAccessibilityLabel
is a valid accessibilityLabel - Provides a way to close the bottom sheet when the user taps on the overlay
- Makes sure that the overlay is announced as "button"
- Uses slide-in and slide-out animation only if the [Reduce Motion] (https://reactnative.dev/docs/accessibilityinfo) preference is turned off
- Prevents the focus from escaping the bottom sheet
- Provides a draggable area respecting the minimum size
Props
animationDuration
The duration in milliseconds of the slide in/out animation.
Type | Default |
---|---|
number | 300 |
autoCloseDelay
The duration in milliseconds before auto-closing the bottom sheet
Type | Default |
---|---|
number | undefined |
The auto-close will respect the user Timed action preference.
bottomSheetStyle
The style to use for the bottom sheet panel
Type | Default |
---|---|
ViewStyle | { width: '100%', backgroundColor: '#fff' } |
Required closeActionAccessibilityLabel
The accessibility label to use for the overlay button.
Type |
---|
string |
closeDistance
A decimal fraction percentage of the content height which represents the minimum distance to swipe before the onClose
function is run. For example, 0.3 represents 30% of the content height needing to be gesture swiped away before the BottomSheet
will close and the onClose
function will run.
Type | Default |
---|---|
number | 0.3 |
footerComponent
The bottom sheet footer component.
Type |
---|
JSX.Element |
handleComponent
It can be used to either disable the default handle "line" or replace it with a custom component.
Type |
---|
JSX.Element | 'none' |
handleStyle
The style for the draggable line
Type | Default |
---|---|
ViewStyle | { width: 48, height: 4, backgroundColor: 'grey', alignSelf: 'center', marginBottom: 24, borderRadius: 2, marginTop: 12 } |
headerComponent
The bottom sheet header component.
Type |
---|
JSX.Element |
maxHeight
The maximum height of the bottom sheet.
Type | Default |
---|---|
number | 90% of the screen height |
minVelocityToClose
The minimum velocity needed by quickly swiping down to close the bottom sheet.
Type | Default |
---|---|
number | 90% of the screen height |
onBottomSheetHidden
The callback to triggered after animations when the BottomSheet is hidden
Type |
---|
() => void |
Required onClose
The callback to trigger when the BottomSheet is dismissed
Type |
---|
() => void |
overlayOpacity
The opacity of the overlay.
Type | Default |
---|---|
number | 1 |
overlayStyle
The style to use for the overlay
Type | Default |
---|---|
ViewStyle | { backgroundColor: 'rgba(0, 0, 0, 0.5)', flex: 1 } |
panGestureEnabled
Enable or disable the dragging gesture.
Type | Default |
---|---|
boolean | true |
persistent
If true, the bottom sheet will not be closed when the user taps on the overlay; the dragging gesture is also disabled.
Type | Default |
---|---|
boolean | true |
hasScrollableContent
If true, children
of BottomSheet
are wrapped in a <ScrollView />
Type | Default |
---|---|
boolean | true |
scrollViewProps
The props to use for the <ScrollView />
that wraps the BottomSheet content
Type | Default |
---|---|
scrollViewProps | undefined |
shouldHandleKeyboardEvents
If true, keyboard events are handled internally by the BottomSheet
allowing for scrolling and animations to run smoothly
Type | Default |
---|---|
boolean | true |
testID
A testID to be used by the BottomSheet. The Modal
component within the BottomSheet
will receive this base testID
and other internal components will receive abstractions of the base testID
. It is best to view the source code to understand the hierarchy of these components and what testID's they will receive.
Type |
---|
string |
Required topInset
The value is used to calculate the correct max ScrollView height.
Type | Default |
---|---|
number | 0 |
Required visible
The BottomSheet visibility
Type |
---|
boolean |
ref
A ref
object used to call close
and isVisible
functions on the bottomSheet
Type |
---|
{ close: () => Promise<void>; isVisible: () => boolean; } |
supportedOrientations
iOS only. An array of strings that specify the orientations supported by the bottom sheet. Type is defined by React Native Modal
Type |
---|
['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right'] |
Known issues
If the app crashes with the following error:
Unsupported top level event type "onGestureHandlerStateChange" dispatched
Add the following import at the top of your App.tsx|jsx
file:
// https://github.com/software-mansion/react-native-gesture-handler/issues/320
import 'react-native-gesture-handler';