[v4] BottomSheetContainer height increase when keyboard open

[LouisCapelle]

Bug

There is just one snapPoint, but when the keyboard is opened the height of the modal is increasing.

Environment info

Library	Version
@gorhom/bottom-sheet	^4
react-native	0.70.8
react-native-reanimated	^3.1.0
react-native-gesture-handler	~2.8.0

Steps To Reproduce

1. Create a bottomSheet with just one SnapPoint
2. The bottom sheet container contains a BottomSheetFlatList
3. Create a customFooter with a BottomSheetTextInput

Describe what you expected to happen:

1. The height of the modal shouldn't increase the height

Reproducible sample code

<BottomSheet
      ref={bottomSheetRef}
      android_keyboardInputMode="adjustResize"
      backdropComponent={renderBackdrop}
      // eslint-disable-next-line react-native/no-inline-styles
      backgroundStyle={{ borderRadius: 8, backgroundColor: colors.background }}
      enablePanDownToClose
      footerComponent={status === 'authenticated' ? CustomFooter : undefined}
      handleIndicatorStyle={styles.indicatorStyle}
      index={-1}
      keyboardBehavior={Platform.OS === 'ios' ? 'extend' : 'interactive'}
      keyboardBlurBehavior="restore"
      snapPoints={snapPoints}
    >
      <BottomSheetFlatList
            bounces={true}
            contentContainerStyle={styles.contentContainerStyle}
            data={noxComments?.data}
            keyExtractor={({ id }) => id}
            ListFooterComponent={renderFooterComponent}
            ListHeaderComponent={headerComponent}
            // eslint-disable-next-line react-native/no-color-literals, react-native/no-inline-styles
            ListHeaderComponentStyle={{ backgroundColor: colors.background, paddingTop: 7 }}
            onEndReached={noxComments?.hasMore ? onEndReached : null}
            onEndReachedThreshold={0.5}
            onRefresh={handleRefresh}
            query={commentsQuery}
            refreshControl={
              <RefreshControl
                colors={[colors.primary]}
                onRefresh={isRefreshEnabled ? handleRefresh : undefined}
                refreshing={commentsQuery.networkStatus === NetworkStatus.refetch || refreshing}
                tintColor={colors.primarySpinner}
              />
            }
            refreshing={false}
            renderItem={renderComponent}
            showsVerticalScrollIndicator={false}
            stickyHeaderIndices={[0]}
            testID="_remoteDataList"
          />
    </BottomSheet>

IMG_4925.MOV

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[github-actions]

This issue was closed because it has been stalled for 5 days with no activity.

[hotaryuzaki]

just an idea, try using keyboardVerticalOffset from react native KeyboardAvoidingView

[omar-bear]

this fixed the problem for me, at least when the size change, it changes with animation

import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
import { KeyboardAvoidingView } from 'react-native-keyboard-controller';

      <KeyboardAvoidingView
        behavior="height"
        style={{
          flex: 1,
          // with position absolute if there is a problem of padding 
        }}
      >
        <BottomSheetModalProvider>{children}</BottomSheetModalProvider>
      </KeyboardAvoidingView>