Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[v4] | Keyboard causing bottom-sheet to close down completely when using enableDynamicSizing (Android only) #1602

Open
anurbecirovic opened this issue Oct 30, 2023 · 58 comments
Assignees
Labels
bug Something isn't working question Further information is requested

Comments

@anurbecirovic
Copy link

Bug

I've recently refactored old logic behind the bottom sheet modal since I used useBottomSheetDynamicSnapPoints and changed it to enableDynamicSizing. Everything is working fine but when using with Input Field the bottom-sheet is closing only on Android larger devices.

Changing the keyboardBehavior: 'interactive' to: keyboardBehavior={Platform.OS === 'ios' ? 'interactive' : 'fillParent'} made unwanted closing to go away but now the modal doesn't look really good since it will take up whole screen. Ideally I want to have modal just above the keyboard, something that I had before with older logic.

The linked issue but without using enableDynamicSizing is here it's same now for me since 'interactive' doesn't work.

Environment info

Library Version
@gorhom/bottom-sheet 4.5.1
react-native 0.72.4
react-native-reanimated 3.5.2
react-native-gesture-handler 2.12.1

Steps To Reproduce

  1. Using enableDynamicSizing
  2. Add these properties:
    keyboardBehavior='interactive'
     keyboardBlurBehavior='restore'
     android_keyboardInputMode='adjustResize'
  1. Add input field inside the Bottom Sheet modal
  2. Open the bottom sheet and try to enter something.
  3. FYI: I also tried the: BottomSheetTextInput and regular input

Describe what you expected to happen:

  1. Open the keyboard bellow the modal.
  2. Render modal above the keyboard same as it's on IOS devices

When I added logging before closing down I get this in console:

LOG [BottomSheetContainer::handleContainerLayout] height:779.8095092773438
LOG [BottomSheetModal::handleDismiss] currentIndexRef:0 minimized:false
LOG [BottomSheetModal::handleDismiss] currentIndexRef:0 minimized:false
LOG [BottomSheetModal::handleDismiss] currentIndexRef:-1 minimized:false
LOG [BottomSheetModal::handleDismiss] currentIndexRef:-1 minimized:false
LOG [BottomSheetModal::handleDismiss] currentIndexRef:1 minimized:false

Not sure if info can be used for debugging. 🤔

Reproducible sample code

 <BottomSheetModal
      ref={bottomSheetModalRef}
      enableDynamicSizing
      onDismiss={handleDismiss}
      enablePanDownToClose={dismissOnPanDown}
      backdropComponent={renderBackdrop}
      backgroundComponent={backgroundComponent}
      keyboardBehavior='interactive'
      keyboardBlurBehavior='restore'
      android_keyboardInputMode='adjustResize'
      handleIndicatorStyle={!dismissOnPanDown && styles.handleIndicator}
      {...rest}
    >
      <BottomSheetScrollView
        contentContainerStyle={[
          styles.scrollViewContainer,
          styleScrollViewContent,
        ]}
        keyboardDismissMode='on-drag'
        bounces={bounces}
        keyboardShouldPersistTaps='handled'
        showsVerticalScrollIndicator={false}
      >
        <BottomSheetView
          style={[styles.container, styleContainer]}
        >
          {children} // <---- HERE I HAVE INPUT FIELD
        </BottomSheetView>
        <KeyboardHeight />
      </BottomSheetScrollView>
    </BottomSheetModal>

Any help would be amazing. 🙏

@anurbecirovic anurbecirovic added the bug Something isn't working label Oct 30, 2023
@ajsmth
Copy link

ajsmth commented Oct 31, 2023

I've run into this same issue without the new dynamic sizing API as well - from what I can tell the internal animated index is being set to -1 which leads to the sheet closing. Here are the logs I've found that might be helpful, but I haven't been able to fix this after poking around the codebase:

image

@jamiefrew
Copy link

Having the same issue 😢

@ivoneug
Copy link

ivoneug commented Nov 7, 2023

We have the same issue

@dibyopra
Copy link

dibyopra commented Nov 8, 2023

same issue, it will close when height of bottom sheet is to low
note: only on BottomSheetModal

@z1haze
Copy link

z1haze commented Nov 14, 2023

I have this same issue! It seems to only be an issue on android. When monitoring the onChange handler of the BottomSheetModal, when opening the keyboard using "interactor" behavior, the index goes to -1, then back to 0, where as on ios, opening the keyboard does not trigger the onChange and therefore no issues arise.

I've also found that if you do not use dynamic sizing, and specify a rather tall snappoint, it does not occur, but that sort of defeats the purpose of automatic sizing, and having the keyboard push the modal up just far enough to fit in the keyboard.

@mangeshkchauhan
Copy link

Use BottomSheetTextInput instead of TextInput from react native to fix this.

@anurbecirovic
Copy link
Author

hey @mangeshkchauhan. As I mentioned above, using the BottomSheetTextInput doesn't fix the problem :/

@z1haze
Copy link

z1haze commented Nov 21, 2023

Correct, it doesn't fix the issue.

@calebpanza
Copy link

Running into this same issue atm. Anyone have a solution for it?

@markymc
Copy link

markymc commented Dec 19, 2023

I've also just seen this issue. For me, setting keyboardBehavior={Platform.OS === 'ios' ? 'interactive' : 'fillParent'} didn't seem to help... will keep looking into it.

@junchenjun
Copy link

junchenjun commented Dec 21, 2023

Same issue here. The problem for is not even about the enableDynamicSizing. As long as the height of the modal is too low, it closes itself upon opening the keyboard. This includes the snapoints.

BottomSheetTextInput doesn't fix it neither.

@mhsfh
Copy link

mhsfh commented Dec 22, 2023

i have same issue

@mhsfh
Copy link

mhsfh commented Jan 2, 2024

I could fix this by adding enableDismissOnClose={false} to BottomSheetModal

Otherwise, you need to put the minHeight of the content more than the keyboard height

Edit: you will have a small problem when you set enableDismissOnClose to false, the keyboard won't be dismissed when you close the bottom sheet you can fix it by adding this callback to onChange:

import debounce from 'lodash/debounce';

const debouncedOnChange = debounce((index) => {
  if (index === -1) {
    Keyboard.dismiss();
  }
}, 10);

@dealvz
Copy link

dealvz commented Jan 3, 2024

I could fix this by adding enableDismissOnClose={false} to BottomSheetModal

Otherwise, you need to put the minHeight of the content more than the keyboard height

@mhsfh this does work, however if you're using the backdropComponent prop then that component will remain. I tried to just work around this by implementing my own backdrop component but I can't get the modal to show again if im using enableDismissOnClose={false}

Guess I'll have to use the larger snap point.

@mhsfh
Copy link

mhsfh commented Jan 3, 2024

@dealvz
that's how I'm closing and opening the bottom sheet:

const handleOpen = React.useCallback((): void => {
      Keyboard.dismiss();
      bottomSheetRef?.current?.present();
      bottomSheetRef?.current?.expand();
      if (Platform.OS === 'ios') KeyboardManager.setEnable(false);
    }, []);
    
    
     const handleClose = React.useCallback((): void => {
      bottomSheetRef?.current?.close();
      if (Platform.OS === 'ios') KeyboardManager.setEnable(true);
    }, []);

and by the way, you will have a small problem when you set enableDismissOnClose to false, the keyboard won't be dismissed when you close the bottom sheet you can fix it by adding this callback to onChange:

    import debounce from 'lodash/debounce';
    const debouncedOnChange = debounce((index) => {
  if (index === -1) {
    Keyboard.dismiss();
  }
}, 10);

@victorkvarghese
Copy link

I have same issue with and without enableDynamicSizing. Bottom sheet get dismissed when keyboard is opened in Android.

Any workarounds ?

@gorhom any workaround would be helpful.

@gorhom
Copy link
Owner

gorhom commented Jan 3, 2024

let me have a look

@gorhom gorhom self-assigned this Jan 3, 2024
@gorhom
Copy link
Owner

gorhom commented Jan 3, 2024

could someone provide a repo using Expo Snack: https://snack.expo.io/@gorhom/bottom-sheet-v4-reproducible-issue-template

@gorhom gorhom added the question Further information is requested label Jan 3, 2024
@mhsfh
Copy link

mhsfh commented Jan 3, 2024

I have same issue with and without enableDynamicSizing. Bottom sheet get dismissed when keyboard is opened in Android.

Any workarounds ?

@gorhom any workaround would be helpful.

@victorkvarghese
enableDynamicSizing is by default true so you need to set it manually to false, did you do that?

@gorhom
Copy link
Owner

gorhom commented Jan 3, 2024

tested it , and it did not dismiss.

while you are here, could you test this issue against v5

@mhsfh
Copy link

mhsfh commented Jan 3, 2024

tested it , and it did not dismiss.

while you are here, could you test this issue against v5

@gorhom
I couldn't reproduce the bug in 5.0.0-alpha.5 but in "^4.5.1" it exist

<BottomSheetModal
keyboardBehavior="interactive"
        keyboardBlurBehavior="restore"
        android_keyboardInputMode="adjustResize"
        ...

@zguo123
Copy link

zguo123 commented Jan 4, 2024

I have "expo": "^49.0.21" which is preventing me from installing v.5.0.0

@johnnywang
Copy link

johnnywang commented Jan 4, 2024

Here to report the same/similar issue, except I'm seeing it in both Android AND iOS, and can confirm that it seems to only happen when dynamic sizing is enabled. I will note that the UI does not auto-dismiss unless I have some custom onAnimate code in place, which is necessary for us to pop the nav stack:

  const handleAnimationChange = useCallback((fromIndex: number, toIndex: number) => {
    console.log('--------from: ', fromIndex);
    console.log('--------to: ', toIndex);
    if (fromIndex !== -1 && toIndex <= 0) {
      navigation.pop();
    }
  }, []);

  <BottomSheet
      animationConfigs={hasInput ? undefined : animationConfigs}
      backdropComponent={renderBackdrop}
      backgroundStyle={styles.drawerContainer}
      contentHeight={Dimensions.get('screen').height}
      enableDynamicSizing
      enablePanDownToClose={fullyMounted}
      handleComponent={null}
      keyboardBlurBehavior="restore"
      onAnimate={handleAnimationChange}
      onChange={handleIndexChange}
      ref={bottomSheetRef}
    >
    <BottomSheetTextInput />
  </>

This seems to happen directly as a result of incorrect indices when the keyboard first appears, but only if it's brought up AFTER the bottom sheet has finished rendering/expanding/animating. So either it's brought up manually by tapping into a non-autofocused text input, or in the case of an autofocused input, after the keyboard is dismissed (i.e. in Android) and then brought back by tapping the input field again.

As others have mentioned, this seems to be a result of the onAnimate index unexpectedly going from 0 to -1 when the keyboard is brought up, which triggers our close handler above. It looks like this has also been previously reported in an issue that was auto-closed: #1441

could someone provide a repo using Expo Snack: https://snack.expo.io/@gorhom/bottom-sheet-v4-reproducible-issue-template

@gorhom I tried to create a repro but was unable to even get the template snack to work: it seems to fail on a workletInit function missing, and some Googling suggested using a polyfill, which resulted in the app crashing. This was as far as I was able to diagnose, but I was not able to get that working: https://snack.expo.dev/@jwalt/bottom-sheet-v4-reproducible-issue-template

@victorkvarghese
Copy link

victorkvarghese commented Jan 4, 2024

I am using 4.5.1. and enableDynamicSizing={true} is required, otherwise the sheet will break in small devices. Will try upgrading to latest versions

I had to wrap the view in BottomSheetView to make it visible with enableDynamicSizing={true}.

`

<BottomSheetModal
  ref={reusableBottomSheetModalRef}
  index={0}
  backdropComponent={renderBackdrop}
  enablePanDownToClose={false}
  enableDynamicSizing
  contentHeight={animatedContentHeight}
  android_keyboardInputMode="adjustResize"
  keyboardBehavior="interactive"
  keyboardBlurBehavior="restore"
  maxDynamicContentSize={Dimensions.get('window').height - 48}      onChange={handleSheetChanges}>
  <Suspense fallback={<CustomLoader />}>
    <BottomSheetView style={{ paddingBottom: insets.bottom }}> 
    {getBottomSheetView(bottomSheetProps.type)}
    </BottomSheetView> 
  </Suspense>
</BottomSheetModal>

`

EDIT: upgrading to latest v5 aplha version, keyboard is not dismissing in android.

@mihalcinD
Copy link

Having same issue :(

@stephenjarrett
Copy link

Having same issue with enableDynamicSizing on android. Did try upgrading to 5.0.0-alpha but was still seeing this issue.

@DenianFossatti
Copy link

For people trying to replace the enableDismissOnClose param in version 5.0.0-alpha.6 I was able to make it work using the cancel method of the debounce return. I used a hook instead that handles it. With that, I make the keyboard close when the index is -1, and with the debounce cancel method, it resolves the issue mentioned on #1441.

The relevant parts

const debouncedOnChange = useDebounce((index: number) => {
      if (index === -1) {
        Keyboard.dismiss()
      }
    }, 50)
    
<BottomSheet
        index={-1}
        enableDynamicSizing={false}
        snapPoints={['50%']}
        keyboardBehavior="interactive"
        enableHandlePanningGesture
        keyboardBlurBehavior="restore"
        android_keyboardInputMode="adjustResize"
        onChange={debouncedOnChange}
        ...

useDebounce.ts

import debounce from 'lodash/debounce'
import { useEffect, useMemo, useRef } from 'react'

export const useDebounce = (func: any, wait: number) => {
  const throttle = useRef<any>()

  useEffect(() => {
    const debounced = debounce(func, wait, { leading: false })
    throttle.current = debounced

    return () => {
      debounced.cancel()
    }
  }, [func, wait])

  return useMemo(() => {
    const callback = (...args: any[]) => {
      return throttle.current(...args)
    }

    callback.cancel = () => {
      if (throttle.current) {
        throttle.current.cancel()
      }
    }

    callback.flush = () => {
      if (throttle.current) {
        throttle.current.flush()
      }
    }

    return callback
  }, [])
}

@apetta
Copy link

apetta commented Jan 25, 2024

Sooo, I've tried a solution from @apetta above and it didn't work for me (idk why...), but with some changes it works!

I added code from useEffect with setEnableDismissOnClose(true) and timer in some pressable component for "backdropComponent" prop:

  <BottomSheetModal
    enableDismissOnClose={enableDismissOnClose}
    ref={bottomSheetRef}
    snapPoints={snapPoints}
    enableDynamicSizing={enableDynamicSizing}
    backdropComponent={() => (
      <BackdropBottomSheetModal
        onPress={() => {
          if (!enableDismissOnClose && keyboardOpen) {
            setEnableDismissOnClose(true);
          }
          bottomSheetRef.current?.dismiss();
        }}
      />
    )}>
      {children}
  </BottomSheetModal>

const BackdropBottomSheetModal: FC<IPropsBackground> = observer(
  ({onPress = () => {}}) => (
    <Pressable onPress={onPress} />
  ),
);

And in the solution I changed this useEffect:

 useEffect(() => {
  if (keyboardOpen) {
    setEnableDismissOnClose(false);
  }
}, [keyboardOpen]);

to this:

   useEffect(() => {
    setEnableDismissOnClose(!keyboardOpen);
  }, [keyboardOpen]);

@ssomarii Glad you got it working! I forgot to include the backdrop component in my previous comment, not sure if that's what was missing

@badalsaibo
Copy link

badalsaibo commented Jan 30, 2024

Can confirm this bug. Happens when the content height is short.

Adding some video for reference:

Normal behaviour where the sheet content height is big enough

big.mp4

Buggy behaviour where the sheet content height is small

small.mp4

Fix as stated by @apetta and @ssomarii

  const bottomSheetModalRef = useRef();
  const [keyboardOpen, setKeyboardOpen] = useState(false);
  const [enableDismissOnClose, setEnableDismissOnClose] = useState(true);

  const renderBackdrop = useCallback(
    (props: any) => (
      <CustomBackdrop
        {...props}
        onPress={() => {
          if (!enableDismissOnClose && keyboardOpen) {
            setEnableDismissOnClose(true);
          }
          bottomSheetModalRef.current?.close();
        }}
      />
    ),
    [enableDismissOnClose, handleClose, keyboardOpen],
  );

  useEffect(() => {
    if (Platform.OS !== 'android') return;

    const keyboardDidShowListener = Keyboard.addListener(
      'keyboardDidShow',
      () => setKeyboardOpen(true),
    );

    const keyboardDidHideListener = Keyboard.addListener(
      'keyboardDidHide',
      () => setKeyboardOpen(false),
    );

    return () => {
      keyboardDidShowListener.remove();
      keyboardDidHideListener.remove();
    };
  }, []);

  useEffect(() => {
    setEnableDismissOnClose(!keyboardOpen);
  }, [keyboardOpen]);
  
  
  return (
        <BottomSheetModal 
            ref={bottomSheetModalRef}
            enableDynamicSizing
            enableDismissOnClose={enableDismissOnClose} 
            backdropComponent={renderBackdrop}
   
         >
            {/* your content */}
        </BottomSheetModal>
  )

@RakiroxFemsa
Copy link

Is this issue being resolved in any alpha tag or pr ?

@fab-nikhil
Copy link

Facing this issue on Android

@mmehul
Copy link

mmehul commented Feb 23, 2024

same issue happening in my android also.

@badalsaibo
Copy link

Related with #1356

@jgillick
Copy link

@jgillick
Copy link

In this snack, even setting explicit snap points doesn't fix the issue:

const snapPoints = useMemo(() => [200], []);

<BottomSheetModal
  ref={bottomSheetRef}
  snapPoints={snapPoints}
>

@RoyalBosS-Ayush
Copy link

Facing Same. Any Solution?

@andreknieriem
Copy link

Ah I just came here, because I thought I am doing something wrong. Happens to me too. Will try out some solutions too.

@Mirthis
Copy link

Mirthis commented Apr 24, 2024

Same issue here.
It doesn't look like having enableDynamicSizing make a difference and the issue is there regardless if the bottom sheet height is too small (I guess smaller than the keyboard height)>
I'm currently setting minHeight to the BottomSheetView component to avoid this happening, but I'm not sure what is the best way to set this dynamically (I assume keyboard size may vary) and it's also not ideal cause I would like to have sheets smaller than the keyboard height if needed.

@danbeo95
Copy link

Still get this bug

@danbeo95
Copy link

danbeo95 commented Apr 25, 2024

I try with version 5.0.0-alpha.9 and this bug does not occur
But feel close animation does not smoothly on Android only

@UmidbekU
Copy link

UmidbekU commented May 1, 2024

I've been using version 5.0.0-alpha.9 with the enableDynamicSizing parameter wrapped in a BottomSheetView, and it works flawlessly. However, in Android, the animation when the modal is raised upon opening the keyboard isn't smooth.

@pesohub
Copy link

pesohub commented May 7, 2024

I fixed the problem by installing react-native-keyboard-controller and adding keyboardBehavior and keyboardBlurBehavior.

<BottomSheetModal
  enableDynamicSizing={true}
  keyboardBehavior="interactive"
  keyboardBlurBehavior="restore"
>
  <BottomSheetTextInput />
<BottomSheetModal>

@psk-dreampay
Copy link

This is happening in case of BottomSheet as well.

@anurbecirovic
Copy link
Author

I can confirm it's not happening anymore for me in the 5.0.0-alpha.10 version.

@Jad-Jbara
Copy link

Can confirm 5.0.0-alpha.10 fixes this issue.
@gorhom any expectancy when this version will be released?

@mashish584
Copy link

@Mirthis , I agree with your point. I am facing the same issue when the view height is less than the keyboard height.

@Kakaranara
Copy link

same issue

@saaaab1213
Copy link

saaaab1213 commented Aug 1, 2024

I was able to solve the issue turning on autofocus on the BottomSheetTextInput;
Also adding 'react-native-keyboard-controller' as @pesohub said worked for me

@marcshilling
Copy link

I upgraded to 5.0.0-alpha.11 and this bug is gone and not noticing any other changes or regressions 👍

@micheleb
Copy link

unfortunately, 5.0.0-alpha.11 didn't fix it for me, and neither did adding react-native-keyboard-controller. Using expo 51, problem only affects Android, iOS works well.

@minhajul-islam
Copy link

@Mirthis , I agree with your point. I am facing the same issue when the view height is less than the keyboard height.

Yes, when we set the minimum height of the bottom sheet to be greater than the keyboard height, the keyboard behaves well.

@markymc
Copy link

markymc commented Oct 5, 2024

I'm seeing this on 5.0.0-alpha.11 too.

@markymc
Copy link

markymc commented Oct 5, 2024

Oh... I just spent a while going through the codepaths to see if I can find a solution and tracked it down to what I think is this return value being -1:

.

I then noticed a few lines above with an early return if the animation is due to the keyboard:

android_keyboardInputMode === KEYBOARD_INPUT_MODE.adjustResize &&
animatedAnimationSource.value === ANIMATION_SOURCE.KEYBOARD &&
animatedAnimationState.value === ANIMATION_STATE.RUNNING &&
isInTemporaryPosition.value
) {
return Math.max(animatedCurrentIndex.value, currentIndex);
}

I noticed that it requires android_keyboardInputMode to be set to adjustResize. Upon setting that in my BottomSheetModal the issue seems to have stopped!

I wonder if those who did get it working on 5.0.0-alpha.11 had this value set, and those that didn't were missing that value?

@dniccum
Copy link

dniccum commented Oct 18, 2024

I have just upgraded to 5.0.2 and over all it does appear to be better. However I am still seeing the issue if a minHeight is not set on the root BottomSheetView component. This is what my Modal looks like:

<BottomSheetModal snapPoints={newConnectionSnapPoints}
                  topInset={insets.top}
                  ref={newConnectionRef}
                  enableOverDrag={false}
                  enableHandlePanningGesture={false}
                  enableContentPanningGesture={true}
                  enableDynamicSizing={true}
                  keyboardBlurBehavior={'restore'}
                  keyboardBehavior={'interactive'}
                  enablePanDownToClose={true}
                  handleComponent={() => <View />}
                  backdropComponent={(props : BottomSheetBackdropProps) => (
                      <BlurredBackground sheetProps={props} />
                  )}
                  onDismiss={resetAddConnection}
                  index={0}
                  footerComponent={SheetFooter}
                  android_keyboardInputMode="adjustResize"
>
    <BottomSheetView style={[layout.bottomSheetWrapper, buttons.fixedBottomContainer, { minHeight: 410 }]}>

@harrisrobin
Copy link

I am experiencing this as well, on iOS using 5.0.5.

here's my code:

import { useThreadsSheet } from '@/components/threads-sheet/threads-sheet-provider'
import { useStores } from '@/models'
import BottomSheet, {
  BottomSheetBackdrop,
  BottomSheetBackdropProps,
  BottomSheetFooter,
  BottomSheetFooterProps,
  BottomSheetScrollView,
  BottomSheetTextInput,
  BottomSheetView,
} from '@gorhom/bottom-sheet'
import { Separator } from '@repo/ui/components/ui/separator'
import { Text } from '@repo/ui/components/ui/text'
import { observer } from 'mobx-react-lite'
import { useCallback, useMemo } from 'react'
import { useSafeAreaInsets } from 'react-native-safe-area-context'

export const ThreadsSheet = observer(() => {
  const { bottomSheetRef } = useThreadsSheet()
  const { threadsStore } = useStores()
  const { bottom } = useSafeAreaInsets()

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

  const renderBackdrop = useCallback(
    (props: BottomSheetBackdropProps) => (
      <BottomSheetBackdrop
        {...props}
        disappearsOnIndex={-1}
        appearsOnIndex={0}
      />
    ),
    [],
  )

  const renderFooter = useCallback(
    (props: BottomSheetFooterProps) => (
      <BottomSheetFooter {...props} bottomInset={bottom}>
        <BottomSheetTextInput
          style={{
            marginTop: 8,
            marginBottom: 10,
            borderRadius: 10,
            fontSize: 16,
            lineHeight: 20,
            padding: 8,
            backgroundColor: 'rgba(151, 151, 151, 0.25)',
            color: '#fff',
          }}
        />
      </BottomSheetFooter>
    ),
    [],
  )

  const snapPoints = useMemo(() => ['50%', '70%'], [])

  return (
    <BottomSheet
      index={-1}
      snapPoints={snapPoints}
      ref={bottomSheetRef}
      onChange={handleSheetChanges}
      backdropComponent={renderBackdrop}
      footerComponent={renderFooter}
      enablePanDownToClose={true}
      backgroundStyle={{
        backgroundColor: '#151616',
      }}
    >
      <BottomSheetView
        className='bg-secondary'
        style={{
          flex: 1,
        }}
      >
        <BottomSheetView className='flex-col items-center justify-between mb-2'>
          <Text className='text-lg font-semibold mb-3'>Comments</Text>
          <Separator className='w-full bg-border-gray' />
        </BottomSheetView>

        <BottomSheetScrollView>
          <Text>{threadsStore.selectedThreadId}</Text>
          <Text>{threadsStore.selectedThreadId}</Text>
          <Text>{threadsStore.selectedThreadId}</Text>
          <Text>{threadsStore.selectedThreadId}</Text>
        </BottomSheetScrollView>
      </BottomSheetView>
    </BottomSheet>
  )
})

whenever the keyboard appears, the bottom sheet simply closes entirely. It's unclear what the right path forward is here but wanted to report that this is not at all fixed in the latest version.

@LouisHaftmann
Copy link

I noticed that it requires android_keyboardInputMode to be set to adjustResize. Upon setting that in my BottomSheetModal the issue seems to have stopped!

I had the same issue (using the latest version). This fixed it for me too!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working question Further information is requested
Projects
None yet
Development

No branches or pull requests