[Bug]: TextInput shrink causes bottom sheet to "blink" on Android

[pakerwreah]

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

Android

What happened?

I have a bottom sheet with enableDynamicSizing and a multiline TextInput.
If I press "enter", the text input grows and so the bottom sheet. So far so good.

If I delete a line, the bottom sheet briefly snaps to animatedIndex -1 and immediately goest back to 0.

That causes view to "blink" because of this code from BottomSheetBody.tsx:

const containerAnimatedStyle = useAnimatedStyle(
    () => ({
      opacity: Platform.OS === 'android' && animatedIndex.get() === -1 ? 0 : 1,

If I change that condition to 'ios', the same "blinking" issue happens on iPhone.

I don't know what was the motivation for that specific tweak on Android, but I don't think animatedIndex should be snapping to -1 out of the blue when resizing the content.

Reproduction steps

• Create a simple bottom sheet with enableDynamicSizing and a multiline TextInput as child of BottomSheetView.
• Press "enter" a few times to make it grow bigger.
• Press "backspace" to delete a line
• Notice that animatedIndex snaps to -1 and immediately reverts to 0
• Do that on Android and verify that the bottom sheet "blinks" every time you delete a line.

Relevant Packages:

"expo": "^53.0.11",
"react": "^19.0.0",
"react-native": "^0.79.3",
"react-native-gesture-handler": "^2.24.0",
"react-native-reanimated": "^3.18.0",
"@gorhom/bottom-sheet": "^5.1.6",

Reproduction sample

Sorry, I was not able to make the input grow in snack.expo.dev for some reason.

Relevant log output

 LOG  {"category": "layout", "component": "BottomSheetView", "method": "handleLayout", "params": {"height": 113.33332824707031}}
 LOG  {"category": "layout", "component": "BottomSheetView", "method": "handleLayout", "params": {"height": 129.6666717529297}}
 LOG  {"category": "layout", "component": "BottomSheetView", "method": "handleLayout", "params": {"height": 146}}
 LOG  {"category": "layout", "component": "BottomSheetView", "method": "handleLayout", "params": {"height": 129.6666717529297}}
 LOG  animatedIndex -1
 LOG  animatedIndex 0
 LOG  {"category": "layout", "component": "BottomSheetView", "method": "handleLayout", "params": {"height": 113.33332824707031}}
 LOG  animatedIndex -1
 LOG  animatedIndex 0
 LOG  {"category": "layout", "component": "BottomSheetView", "method": "handleLayout", "params": {"height": 97}}
 LOG  animatedIndex -1
 LOG  animatedIndex 0

[SokolovRU]

temporary solution 2, version 5.1.1 is working, as I understand it, the latest updates gave this error

[carloscarnero]

I'm observing the same behavior, only with a BottomSheetModal. I have a text input (BottomSheetTextInput) that is autofocused, and that automatically brings the keyboard. This behaves as expected and as configured. However, when I start typing, the sheet glitches:

blink-1.webm

Notice that the backdrop (BottomSheetBackdrop as configured) also blinks. Now, if comment the opacity animation that @pakerwreah noticed, I get slightly better results:

blink-2.webm

Only this time only the backdrop flickers.

EDIT: Downgrading to 5.1.1 as @SokolovRU suggested fixed the issue (although with a weird spacing issue that can probably be fixed with styling.) So, is there a regression?

[pakerwreah]

I think I found a fix:
in BottomSheet.tsx:

/**
 * offset the position if keyboard is shown,
 * and behavior not extend.
 */
let offset = 0;
if (
  animatedKeyboardState.value === KEYBOARD_STATE.SHOWN &&
  keyboardBehavior !== KEYBOARD_BEHAVIOR.extend &&
  position < animatedPosition.value
) {
  offset = animatedKeyboardHeightInContainer.value;
}

animatedNextPositionIndex.value = animatedSnapPoints.value.indexOf(
  position + offset
);

change:

position < animatedPosition.value

to:

position !== animatedPosition.value

Otherwise the position will not match the dynamic one in animatedSnapPoints and indexOf will set -1 to the animatedIndex.

[carloscarnero]

@pakerwreah Tried you suggested fix and, indeed, it worked! Hope the PR gets accepted.

[pakerwreah]

If anyone wants to try it out, I have a branch with a prebuilt lib, so you can just use it in your package.json.
(tested with pnpm)

"@gorhom/bottom-sheet": "pakerwreah/react-native-bottom-sheet#patches"

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[carloscarnero]

Not stale, so... bumping 🤷