Compatibility with react-native-bottom-sheet? #309
Replies: 3 comments 7 replies
-
|
Hello @junchenjun and sorry for long response 🙂
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 😔
Because once you wrapped your app in
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 |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
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 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 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 Looking at the source code for both they are very very close to full compatibility without this and when I saw the Hope this helps! |
Beta Was this translation helpful? Give feedback.
-
|
Interesting, I didn't know @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 👀 |
Beta Was this translation helpful? Give feedback.
-
|
@VladyslavMartynov10 also the current |
Beta Was this translation helpful? Give feedback.
-
|
@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? |
Beta Was this translation helpful? Give feedback.
-
|
@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. |
Beta Was this translation helpful? Give feedback.
-
|
@Streudal makes sense! I added a link to your comment 👀 Thank you for review ❤️ Regarding example app - yeah, I will add it 👍 |
Beta Was this translation helpful? Give feedback.
-
|
A lot of fixes/integrations landed since the time when discussion was created. I believe now If you discover any issue, then please open a new issue ❤️ I'll close this discussion. |
Beta Was this translation helpful? Give feedback.
-
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
Beta Was this translation helpful? Give feedback.
All reactions