Compatibility with react-native-bottom-sheet?

[junchenjun]

Specifically with the bottom sheet modal from react-native-bottom-sheet

When KeyboardProvider is enabled, it breaks keyboard behaviour in the bottom sheet modal.

The bottom sheet uses the default Android behaviour to push the whole modal above the keyboard. When KeyboardProvider is enabled, the modal no longer gets pushed up.

I use the suggested keyboard handling method for the bottom sheet modal.

Right now I am disabling KeyboardProvider by default and only enabling it on certain pages(If I do it the other way around, it causes an animation glitch when the modal opens up), which is not ideal because I have to write lots of code to disable/enable it.

Anyway just wondering if anyone has encountered the issues or did I miss anything?

Love this library btw

[kirillzyusko]

Hello @junchenjun and sorry for long response 🙂

If I do it the other way around, it causes an animation glitch when the modal opens up

I think it could be cause because of async nature of switching on/off module. Basically I'm updating a state variable (async operation), then I update a prop of native view via bridge (also async operation). So I assume if during these updates you show keyboard/modal it can cause glitches 😔

When KeyboardProvider is enabled, the modal no longer gets pushed up.

Because once you wrapped your app in KeyboardProvider your app goes to edge-to-edge mode and default keyboard handler mechanism stops working. And at this point of time both OS (Android & iOS) behaves in the same way (which is good from my point of view because it simplifies writing of cross-platform code).

I have to write lots of code to disable/enable it

The one way is yes, disabling/enabling the module per specific screens (bottom sheet modal in your case).

I don't have a lot of experience with bottom sheets modals, but can't you handle keyboard appearance on your own? For example apply translateY/padding to move a view when keyboard appears/disappears? Or there are some restrictions/limitations?

[VladyslavMartynov10]

Hey @junchenjun !

I've already investigated this issue with multiple tests using gorhom bottomsheet & custom implementation, you can see all details in this feauture request #343.

By the way, if it's really important for you to use gorhom lib just use focus/unfocus input strategy in order to make it work for both Platforms. I've struggled a lot with BottomSheetInput and it leads to some tricky cases especially on Android.

[Streudal]

Hey everyone! I have been having the same issue with the '@gorhom/bottom-sheet' library for a while now and I think I figured out a way to get this to work on both platforms very consistently.

Below is a custom component I created called BottomSheetScrollViewWithKeyboardHandling.tsx and it seems to fix all the issues I was having:

import { SCROLLABLE_TYPE, createBottomSheetScrollableComponent, type BottomSheetScrollViewMethods } from '@gorhom/bottom-sheet';
import type { BottomSheetScrollViewProps } from '@gorhom/bottom-sheet/src/components/bottomSheetScrollable/types';
import { memo } from 'react';
import { ScrollViewProps as RNScrollViewProps } from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-controller';
import Animated from 'react-native-reanimated';

type KeyboardAwareScrollViewProps = {
  /** The distance between keyboard and focused `TextInput` when keyboard is shown. Default is `0`. */
  bottomOffset?: number;
  /** Prevents automatic scrolling of the `ScrollView` when the keyboard gets hidden, maintaining the current screen position. Default is `false`. */
  disableScrollOnKeyboardHide?: boolean;
  /** Controls whether this `KeyboardAwareScrollView` instance should take effect. Default is `true` */
  enabled?: boolean;
} & RNScrollViewProps;

const AnimatedScrollView = Animated.createAnimatedComponent<KeyboardAwareScrollViewProps>(KeyboardAwareScrollView);
const BottomSheetScrollViewComponent = createBottomSheetScrollableComponent<BottomSheetScrollViewMethods, BottomSheetScrollViewProps>(SCROLLABLE_TYPE.SCROLLVIEW, AnimatedScrollView);
const BottomSheetScrollViewWithKeyboardHandling = memo(BottomSheetScrollViewComponent);

BottomSheetScrollViewWithKeyboardHandling.displayName = 'BottomSheetScrollViewWithKeyboardHandling';

export default BottomSheetScrollViewWithKeyboardHandling as (props: BottomSheetScrollViewProps) => ReturnType<typeof BottomSheetScrollViewWithKeyboardHandling>;

The consume it like this (should be able to use all the same props on BottomSheetScrollViewWithKeyboardHandling as you would with BottomSheetScrollView):

import BottomSheet from '@gorhom/bottom-sheet'; 
import BottomSheetScrollViewWithKeyboardHandling from './BottomSheetScrollViewWithKeyboardHandling';

export function Example() {
  return (
    <BottomSheet>
      <BottomSheetScrollViewWithKeyboardHandling>
        {/* More content here*/}
      </BottomSheetScrollViewWithKeyboardHandling>
    </BottomSheet>
  );
}

Some of the types weren't being exported so I either recreated them here or tried to find it in node_modules.

Looking at the source code for both they are very very close to full compatibility without this and when I saw the createBottomSheetScrollableComponent from the bottom sheet library I had a gut feeling I could exploit that since it's also very similar to the reanimated way of created animated components.

Hope this helps!

[kirillzyusko]

Interesting, I didn't know bottom-sheet was exposing createBottomSheetScrollableComponent (though I totally understant why it's needed). I created a PR with exporting all missing props #424 (so that you don't need to copy source code anymore)

@VladyslavMartynov10 please let me know if it indeed fixes an integration with bottom-sheet, if yes, then I'll think on how to document it on the website 👀

[Streudal]

@VladyslavMartynov10 also the current bottom-sheet component from that library exposes a prop android_keyboardInputMode that defaults to adjustPan... I set this to adjustResize just in case but I honestly don't think it effects this component at all. I've tried it both ways and it seems to work just fine on my end (most likely because I set up everything for Android following this libraries documentation).

[kirillzyusko]

@Streudal @VladyslavMartynov10 I opened a PR to documentation - #445

Would you mind to review it and let me know if it's written clear enough? Or maybe something should be improved?

[Streudal]

@kirillzyusko The PR looks pretty solid to me. I can't think of anything else at the moment other than maybe referencing this discussion in the PR. Should fit pretty well in the 'Motivation and Context' section along with the already referenced #343 issue. Just in case if anyone is more interested and wants to deep dive into it then I think this is golden!

Potentially in the near future this can be added to the example app as well.

[kirillzyusko]

@Streudal makes sense! I added a link to your comment 👀 Thank you for review ❤️

Regarding example app - yeah, I will add it 👍