lodev09/react-native-true-sheet

Can't type in TextInput when the bottom sheet is open (Android)

Opened this issue · 5 comments

First of all thanks for building this great library.

I have two input outside the bottom sheet where I want to type even when the bottom sheet is open.
It worked perfectly fine in iOS but I am struggling with Android.

bottom-sheet-focus-bug-2024-07-21_15.50.25.mp4

If the screen recording you can see how the focus stays in the bottom sheet instead of the input which is outside.
Thanks.

Code

The app is open source you can take a look in the source files.

The component looks like this:

    <TrueSheet
      ref={searchSheetRef}
      style={styles.container}
      contentContainerStyle={{flex: 1}}
      dimmed={false}
      sizes={['75%', 'large']}
      keyboardMode="resize"
      cornerRadius={15}
      onDismiss={() => $isSearchOpen.set(false)}
      scrollRef={searchFlatListRef}>
      <CommandList flatListRef={searchFlatListRef} />
    </TrueSheet>

I don't know why android isn't allowing it.. maybe this is the default native behavior.

You could try putting the search box at the top of the bottom sheet instead? That's just my opinion.

Like this:
Screenshot 2024-07-22 at 22 37 59

Thanks.
I had something like this but then I wanted to change it, seems like I will have to switch it back.

It would be great if we could investigate this further, like if this is expected android behavior.

On android, the undimmed background feature is "not" an official UX. I had to do some magic there for consistency with IOS. I'm no android developer so my implementation might be wrong. I hope someone can improve it in the future :/

I'm no android developer

I am not either :) but you've made lot of progress.

I'll try to ask on Reddit and Twitter to see if someone can help us.
Thanks 🙏