[v5] (Race Condition?) Popping keyboard sometimes causes bottom sheet to close and never re-open

[henrymoulton]

Bug

This might be related to the bug we've been dealing with since upgrading to REA3. I don't yet have a reproducible code sample but I do have some logs.

Note that the way I reproduced this was by using the Keyboard events, but I have user bug reports from just opening the screen.

Environment info

Library	Version
@gorhom/bottom-sheet	5.0.0-alpha.4
react-native	0.71.14
react-native-reanimated	3.5.4
react-native-gesture-handler	2.13.4

Steps To Reproduce

1. Have a bottom sheet with these props

<BottomSheet
         ref={bottomSheetRef}
        onAnimate={handleOnAnimate}
        index={0}
        snapPoints={snapPoints}
        handleComponent={handleComponent}
        handleHeight={HANDLE_SIZE}
        enablePanDownToClose={false} // Note(Henry): We never want this bottom sheet to be fully closed.
        backgroundStyle={backgroundStyle}
        animatedPosition={currentPositionAnimated}
        onChange={handleSheetChange}
        animationConfigs={config}
        animateOnMount={false}
/>

Note that we'd always want this BottomSheet to be visible, if it is hidden due to Keyboard it should show again.

2. Activate logs in the BS lib
3. Activate "Configure Bundler" in the React Native Debug Menu which shows the keyboard

Watch logs, it doesn't always happen but eventually I got a log:

LOG  [BottomSheetHandleContainer::handleContainerLayout] height:24
LOG  [BottomSheetContainer::handleContainerLayout] height:926
LOG  Calculating next position
LOG  [fun::useAnimatedReaction::OnMount] isLayoutCalculated:true animatedSnapPoints:712,119 nextPosition:712
LOG  [fun::useAnimatedReaction::OnSnapPointChange] snapPoints:712,119
LOG  Animating to position: 712, source: 4
LOG  [BottomSheetContainer::handleContainerLayout] height:580
LOG  handleKeyboardEvent 1 346 404 keyboard
LOG  [fun::useAnimatedReaction::OnSnapPointChange] snapPoints:366,0
LOG  Animating to position: 366, source: 4
LOG  [fun::bound animateToPosition] currentPosition:712 position:366 velocity:0 animatedContainerHeight:580
LOG  [BottomSheet::handleOnAnimate] toIndex:0 fromIndex:0
LOG  [fun::bound animateToPositionCompleted] animatedCurrentIndex:0 animatedNextPosition:366 animatedNextPositionIndex:0
LOG  [BottomSheetContainer::handleContainerLayout] height:926
LOG  handleKeyboardEvent 2 346 250 keyboard
LOG  [fun::useAnimatedReaction::OnSnapPointChange] snapPoints:712,119
LOG  Animating to position: 712, source: 4
LOG  [fun::bound animateToPosition] currentPosition:366 position:712 velocity:0 animatedContainerHeight:926
LOG  [BottomSheet::handleOnAnimate] toIndex:0 fromIndex:0
LOG  [fun::bound animateToPositionCompleted] animatedCurrentIndex:0 animatedNextPosition:712 animatedNextPositionIndex:0
LOG  handleKeyboardEvent 1 346 404 keyboard
LOG  [BottomSheetContainer::handleContainerLayout] height:580 
LOG  [fun::useAnimatedReaction::OnChange] animatedCurrentIndex:0 animatedIndex:-1 <-- first time we see -1
LOG  [BottomSheet::handleOnChange] index:-1 animatedCurrentIndex:-1
LOG  [fun::useAnimatedReaction::OnSnapPointChange] snapPoints:366,0
LOG  Animating to position: 580, source: 5
LOG  [fun::bound animateToPosition] currentPosition:712 position:580 velocity:0 animatedContainerHeight:580
LOG  [BottomSheet::handleOnAnimate] toIndex:-1 fromIndex:-1
LOG  [fun::bound animateToPositionCompleted] animatedCurrentIndex:-1 animatedNextPosition:580 animatedNextPositionIndex:-1

I'm maybe surprised there's no keyboard event for when the keyboard is hidden?

Describe what you expected to happen:

1. assuming enablePanDownToClose is false, the bottom sheet has no reason to go to -1 and even if it did it would recover to 0

Reproducible sample code

None yet, and it's particularly difficult to reproduce.

Workaround

I've added a patch to the props isNeverClosed which checks if the animatedIndex is every -1 and early returns.

Similar solutions exist in https://github.com/gorhom/react-native-bottom-sheet/pull/1359 and https://github.com/gorhom/react-native-bottom-sheet/pull/1320

[gorhom]

Hi @henrymoulton could you please test the latest v5 alpha release, the issue should be address with https://github.com/gorhom/react-native-bottom-sheet/pull/1675.

[ravindraguptacapgemini]

Does this library support React Native new architecture and Reanimated Version 3?