Bottom sheet recipe
Depending on bottom sheet implementation in your project, you should use either AvoidSoftInput
module or AvoidSoftInputView
component.
If your bottom sheet implementation uses React Native Modal
component, you should use AvoidSoftInputView
component (check Modal recipe). Otherwise use AvoidSoftInput
module like in the example below.
This example assumes the bottom sheet is implemented with React Native Bottom Sheet
packages/app/src/screens/BottomSheetExample.tsx
import { BottomSheetModal, BottomSheetView } from '@gorhom/bottom-sheet';
import { useFocusEffect } from '@react-navigation/native';
import * as React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { AvoidSoftInput } from 'react-native-avoid-softinput';
import { SafeAreaView } from 'react-native-safe-area-context';
import Button from '../components/Button';
import SingleInput from '../components/SingleInput';
import { styles as commonStyles } from '../consts/styles';
const Backdrop: React.FC = () => <View style={styles.backdrop} />;
export const BottomSheetExample: React.FC = () => {
const bottomSheetModalRef = React.useRef<BottomSheetModal>(null);
function dismissBottomSheet() {
bottomSheetModalRef.current?.dismiss();
}
function presentBottomSheet() {
bottomSheetModalRef.current?.present();
}
const onFocusEffect = React.useCallback(() => {
AvoidSoftInput.setShouldMimicIOSBehavior(true);
AvoidSoftInput.setEnabled(true);
AvoidSoftInput.setAvoidOffset(70);
return () => {
AvoidSoftInput.setAvoidOffset(0);
AvoidSoftInput.setEnabled(false);
AvoidSoftInput.setShouldMimicIOSBehavior(false);
};
}, []);
useFocusEffect(onFocusEffect);
return <SafeAreaView edges={[ 'left', 'right' ]} style={commonStyles.screenContainer}>
<Button
onPress={presentBottomSheet}
title="Open bottom sheet"
/>
<BottomSheetModal
ref={bottomSheetModalRef}
backdropComponent={Backdrop}
enableDismissOnClose
enableDynamicSizing
enablePanDownToClose
index={0}
>
<BottomSheetView style={styles.bottomSheet}>
<SafeAreaView edges={[ 'bottom', 'left', 'right' ]} style={styles.bottomSheet}>
<Text style={styles.header}>Header</Text>
<SingleInput style={styles.input} />
<View style={styles.submitButtonContainer}>
<Button
onPress={dismissBottomSheet}
title="Submit"
/>
</View>
</SafeAreaView>
</BottomSheetView>
</BottomSheetModal>
</SafeAreaView>;
};
const styles = StyleSheet.create({
backdrop: {
...StyleSheet.absoluteFillObject,
backgroundColor: 'rgba(0,0,0,0.5)',
},
bottomSheet: {
alignItems: 'center',
alignSelf: 'stretch',
backgroundColor: 'white',
},
header: {
color: 'black',
fontSize: 28,
fontWeight: 'bold',
paddingBottom: 40,
paddingTop: 30,
},
input: {
marginHorizontal: 50,
},
submitButtonContainer: {
alignSelf: 'stretch',
marginBottom: 30,
},
});