[v4] On Android there is unexpected overlay on top of modal window when keyboard reappears.

[Gruzchick]

Bug

The bug is shown in the video

Environment info

Library	Version
@gorhom/bottom-sheet	4.6.0
react-native	0.71.12
react-native-reanimated	2.17.0
react-native-gesture-handler	2.14.1

Steps To Reproduce

To reproduce the bug:

1. Open a modal window
2. Set focus to the input field so that the keyboard appears
3. Then hide the keyboard
4. Tap on the input field to open the keyboard

Current behavior: modal window content is covered with some kind of white overlay

Expected behavior: modal window content would not be covered with an overlay

Reproducible sample code

import React, { useRef } from 'react';
import { Button, Dimensions, StyleSheet, Text, View } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import {
  BottomSheetModal,
  BottomSheetModalProvider,
  BottomSheetScrollView,
  BottomSheetTextInput,
} from '@gorhom/bottom-sheet';

const App = () => {
  const bottomSheetModalRef = useRef<BottomSheetModal>(null);

  const handleOpenPres = () => {
    bottomSheetModalRef.current?.present();
  };

  return (
    <GestureHandlerRootView style={s.gestureHandlerRootView}>
      <BottomSheetModalProvider>
        <View style={s.screen}>
          <View style={s.buttonWrapper}>
            <Button onPress={handleOpenPres} title={'Open'} />
          </View>
        </View>
        <BottomSheetModal
          index={0}
          ref={bottomSheetModalRef}
          enableDynamicSizing
          maxDynamicContentSize={Dimensions.get('window').height - 40}
          enablePanDownToClose
        >
          <BottomSheetScrollView stickyHeaderIndices={[0]}>
            <BottomSheetTextInput style={s.input} />
            {new Array(20).fill(0).map((_, index) => (
              <View style={s.item}>
                <Text>{index}</Text>
              </View>
            ))}
          </BottomSheetScrollView>
        </BottomSheetModal>
      </BottomSheetModalProvider>
    </GestureHandlerRootView>
  );
};

export default App;

const s = StyleSheet.create({
  gestureHandlerRootView: { flex: 1, backgroundColor: '#cccccc' },
  screen: {
    flex: 1,
    borderWidth: 1,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  },
  buttonWrapper: {
    width: 100,
  },
  input: {
    borderWidth: 1,
    marginHorizontal: 16,
    backgroundColor: '#ffffff',
    marginBottom: 20,
  },
  item: {
    height: 30,
    marginBottom: 10,
    marginHorizontal: 16,
    backgroundColor: 'red',
  },
});

[Gruzchick]

I noticed that this happens when I use BottomSheetTextInput, if I use TextInput the overlay does not appear

[vipien]

Did you manage to solve it? I have the same problem but it always happens not only when it reappears.

[harzh307]

try using android_keyboardInputMode="adjustResize" in the bottomsheet component like this

<BottomSheet
        ref={sheetRef}
        android_keyboardInputMode="adjustResize">

this worked for me and if i speak for every developer it will work for everyone, and if you're using keyboardBehavior prop then use its "interactive" value

[Gruzchick]

@harzh307 the bug remains

[harzh307]

@harzh307 the bug remains

what does your code looks like ?

[noahkurz]

Moving to a normal input fixed it for me

[jgillick]

Here's a snack demonstrating the bug: https://snack.expo.dev/@jeremyplura/android-keyboard-padding-bottom-sheet-v4

Setting android_keyboardInputMode="adjustResize" does seem to fix it for me (as @harzh307 suggested)

[github-actions[bot]]

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.

[harzh307]

Here's a snack demonstrating the bug: https://snack.expo.dev/@jeremyplura/android-keyboard-padding-bottom-sheet-v4

Setting android_keyboardInputMode="adjustResize" does seem to fix it for me (as @harzh307 suggested)

this is how you should've approached the problem @jgillick <BottomSheetModal android_keyboardInputMode="adjustResize" ref={bottomSheetRef} snapPoints={snapPoints} index={0} style={styles.modal} > <BottomSheetView style={styles.scroller}> <BottomSheetTextInput style={styles.input} placeholder="Field input" /> </BottomSheetView> </BottomSheetModal>

[abdulragib]

android_keyboardInputMode="adjustResize" working fine in android , but not working fine in ios

[github-actions[bot]]

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.

[jgillick]

Keep it fresh, because I think it's still broken.

[github-actions[bot]]

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[bot]]

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