[v4] BottomSheetTextInput can't open keyboard in android

[qaws5503]

Bug

When using BottomSheetTextInput, it works fine on iOS. But when using in android, it will open the keyboard and stretch the bottomSheet as expected. And after keyboard is fully displayed it will dismiss instantly, which is not right.

After some test, I found out it is the problem with style flex. When I don't set flex in styles.container it works fine, but add flex:1 it automatically dismiss keyboard when keyboard is fully displayed.

Not sure if this is an issue with android:windowSoftInputMode, since I'm using Expo and I didn't set softwareKeyboardLayoutMode. So it's the default value: resize which mentioned here.

Environment info

Library	Version
@gorhom/bottom-sheet	4.1.5
react-native	0.68.2
react-native-reanimated	2.8.0
react-native-gesture-handler	2.2.1
expo sdk	45

Steps To Reproduce

Example code from BottomSheetTextInput document here.

https://user-images.githubusercontent.com/57092368/188586875-1247316e-fcbb-49ae-9692-62b9e28cf5ca.mp4

Reproducible sample code

import React, { useCallback, useMemo, useRef } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import BottomSheet from '@gorhom/bottom-sheet';

const App = () => {
  // ref
  const bottomSheetRef = useRef<BottomSheet>(null);

  // variables
  const snapPoints = useMemo(() => ['25%', '50%'], []);

  // callbacks
  const handleSheetChanges = useCallback((index: number) => {
    console.log('handleSheetChanges', index);
  }, []);

  // renders
  return (
    <View style={styles.container}>
      <BottomSheet
        ref={bottomSheetRef}
        index={1}
        snapPoints={snapPoints}
        onChange={handleSheetChanges}
      >
        <View style={styles.contentContainer}>
          <Text>Awesome 🎉</Text>
        </View>
      </BottomSheet>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    backgroundColor: 'grey',
  },
  contentContainer: {
    flex: 1,
    alignItems: 'center',
  },
});

export default App;

[github-actions[bot]]

@qaws5503: hello! :wave:

This issue is being automatically closed because it does not follow the issue template.

[gabimoncha]

I confirm this is happening also on a Google Pixel 3XL and 4A device

[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.

[farhanhaider1]

having this issue. any update

[NathanPo]

Same here

[gediminastub]

Same here. Any ideas?

[ChronoByteCosmonaut]

Same

[hugoPinho012]

Same

[kocaagasefa]

Same

[hakanolgun]

Issue happens when a user use an higher keyboard like Microsoft Swiftkey on an android device.

I use bottom-sheet inside a portal (gorhom/portal) and flex:1 solution did not solve my issue.

Using TextInput from react-native instead of BottomSheetTextInput solves the issue but then you lose some benefits that come from BottomSheetTextInput like expanding bottom sheet when input focused and closing keyboard when gesture down etc.

I hope this issue will be fixed on version 5.