react-native-bottom-sheet: BottomSheetTextInput that has multiline enabled, does not push bottom sheet up when focused and keyboard shows.
Bug
BottomSheetTextInput that has multiline enabled, does not push bottom sheet up when focused and keyboard shows. If I remove the ability to have multiline enabled, it works as expected with no issue.
Environment info
Library | Version |
---|---|
@gorhom/bottom-sheet | “^3.6.3” |
react-native | “0.63.4” |
react-native-reanimated | “^2.0.0” |
react-native-gesture-handler | “^1.9.0” |
Steps To Reproduce
Setting up a simple implementation of the BottomSheetModal
will show how it behaves.
- Make one
BottomSheetTextInput
have multiline while the other does not. - Tap the one without
multiline
to see it function correctly. - Tap the one with
multiline
to see it does not slide up the bottom sheet.
Describe what you expected to happen:
- Keyboard should push up the bottom sheet when using
BottomSheetTextInput
withmultiline
enabled.
Reproducible sample code
Note: This is inside a wrapper component that just has data/state management with a View
with the style {{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
.
import React, { useContext, useMemo, useRef } from 'react';
import { StyleSheet, ScrollView, TouchableOpacity, Platform } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { useNavigation } from '@react-navigation/core';
import {
BottomSheetModal,
BottomSheetModalProvider,
BottomSheetBackdrop,
BottomSheetTextInput,
BottomSheetScrollView,
} from '@gorhom/bottom-sheet';
import { Text } from '../components/common/Text';
import { View } from '../components/common/View';
import { Button } from '../components/common/Button';
import { ReorderIcon } from '../assets/svg/ReorderIcon';
import { ACTIVE_OPACITY } from '../constants';
import { localizedStrings } from '../localization/localizedStrings';
import { colors, globalStyles, SCREEN_HEIGHT, SCREEN_WIDTH } from '../styles/globalStyles';
import { GradientFooter } from '../components/common/GradientFooter';
import { HorizontalLine } from '../components/common/HorizontalLine';
export const ListScreen: React.FC<{}> = () => {
const { top, bottom } = useSafeAreaInsets();
const { goBack } = useNavigation();
const buttonMargin = Platform.OS === 'ios' ? bottom - 8 : bottom + 16;
const sheetRef = useRef<BottomSheetModal>(null);
const snapPoints = useMemo(() => ['35%'], []);
const handleShowPress = () => {
sheetRef.current && sheetRef.current.present();
};
return (
<>
<ScrollView
style={[styles.container, { paddingTop: top + globalStyles.standardPadding * 2 }]}
>
<View style={styles.header}>
<TouchableOpacity
// TODO re-order feature
onPress={() => {}}
activeOpacity={ACTIVE_OPACITY}
style={styles.rightAlign}
>
<ReorderIcon />
</TouchableOpacity>
<View style={styles.center}>
<View style={styles.button} marginVertical={globalStyles.screenPadding}>
<Button
fontSize={14}
title={'+ Add to List'}
onPress={handleShowPress}
/>
</View>
</View>
</View>
</ScrollView>
<GradientFooter style={styles.center}>
<TouchableOpacity
hitSlop={{ left: 30, right: 30 }}
activeOpacity={ACTIVE_OPACITY}
onPress={goBack}
>
<Text fontSize={14} style={{ marginTop: buttonMargin }} fontFamily="americaBold">
{localizedStrings.labels.back}
</Text>
</TouchableOpacity>
</GradientFooter>
<BottomSheetModalProvider>
<BottomSheetModal
ref={sheetRef}
snapPoints={snapPoints}
keyboardBehavior="interactive"
keyboardBlurBehavior="restore"
handleComponent={null}
backdropComponent={BottomSheetBackdrop}
style={{ ...globalStyles.shadow }}
>
<BottomSheetScrollView style={[styles.cardContent, { paddingBottom: bottom * 4 }]}>
<BottomSheetTextInput
placeholder="Add title"
placeholderTextColor={colors.grey}
style={styles.text}
accessibilityComponentType
accessibilityTraits
/>
<HorizontalLine width={'100%'} />
<BottomSheetTextInput
placeholder="Add more details"
placeholderTextColor={colors.grey}
style={styles.text}
multiline
accessibilityComponentType
accessibilityTraits
/>
</BottomSheetScrollView>
</BottomSheetModal>
</BottomSheetModalProvider>
</>
);
};
const styles = StyleSheet.create({
absolute: {
position: 'absolute',
},
bottom: {
...globalStyles.shadow,
paddingTop: globalStyles.standardPadding,
padding: globalStyles.screenPadding,
},
button: {
width: 170,
},
cardContent: {
padding: globalStyles.screenPadding,
},
center: {
alignItems: 'center',
justifyContent: 'center',
},
container: {
flex: 1,
},
header: {
paddingHorizontal: globalStyles.screenPadding,
},
image: {
width: '100%',
position: 'absolute',
},
rightAlign: {
alignSelf: 'flex-end',
},
text: {
paddingVertical: globalStyles.standardPadding * 2,
},
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Reactions: 3
- Comments: 18 (1 by maintainers)
Commits related to this issue
- fix: fixed the multiline issue on BottomSheetTextInput #411 — committed to gorhom/react-native-bottom-sheet by gorhom 3 years ago
Does anybody still have an issue ? I’m on version 4.5.1 and it still doesn’t work for me.
Hi everyone, sorry for the delay, this issue is resolved for
v4
and it will release on4.0.0-alpha.25
👍Any update on BottomSheetTextInput with multiline?