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

Jun 12 '25 19:06 pakerwreah

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

Jun 13 '25 13:06 SokolovRU

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:

https://github.com/user-attachments/assets/da27a707-6703-4a43-b84a-848867d1146f

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

https://github.com/user-attachments/assets/9d4c6d73-3183-4da9-8d07-992d2bc71eeb

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?

Jun 13 '25 13:06 carloscarnero

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.

Jun 13 '25 16:06 pakerwreah

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

Jun 13 '25 17:06 carloscarnero

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"

Jun 17 '25 10:06 pakerwreah

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.

Jul 18 '25 09:07 github-actions[bot]

Not stale, so... bumping 🤷

Jul 18 '25 11:07 carloscarnero

Facing same issue in BottomSheetModal while using BottomSheetTextInput. If i use TextInput then keyboard not working as expected.

Jul 29 '25 14:07 rahul-jalandhra

Same behibor here, the backdrop flickers insane. Any fix?

Jul 31 '25 02:07 DvzZDev

Got the same problem🙋 For now, this patch solution works fine

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

Aug 15 '25 05:08 likeSo

without a repro example i can't help

Sep 04 '25 17:09 gorhom

@gorhom Sorry man, the repro is in my PR https://github.com/gorhom/react-native-bottom-sheet/pull/2327

I had fixed it on v5.1.8 but I rebased the PR and fixed it for v5.2.4.

The bottom sheet completely closes on v5.2.3 and v5.2.4 if the input resizes, which makes multiline unusable.

Sep 04 '25 17:09 pakerwreah

@pakerwreah thanks for submitting the PR , i do appreciate it. but without repo example, it is difficult for me to understand the issue.

However, i have fixed a similar issue today regarding the bottom sheet is closing after focusing on a text input , would you mind testing it before i publish a new release

https://github.com/gorhom/react-native-bottom-sheet/commit/f8cd4fe37c1b05abd4153f586d61658a3d7954b8

Sep 04 '25 18:09 gorhom

@gorhom I just tried v5.2.5 and still have the same issue. (even the modal closing)

Here's a repo with a branch reproducing both issues: 💡 branch: bottom-sheet-bug-repro https://github.com/pakerwreah/react-native-shared-header/tree/bottom-sheet-bug-repro

Here's 2 videos demonstrating both issues: