BottomSheet Issue on Android 14 and iOS 17.1/17.2

[salmaAlouane]

Bug

The BottomSheet component of the @gorhom/bottom-sheet plugin is not functioning correctly on Android 14.
on iOS, it works on version 17.0 but does not work on versions 17.1 and 17.2.

Environment info

Library	Version
@gorhom/bottom-sheet	^4.5.1
react-native	^0.72.7
react-native-reanimated	^3.6.1
react-native-gesture-handler	^2.14.0

Steps To Reproduce

1.Open the app
2.Click on the button designed to display the BottomSheet.
3.The BottomSheet should open as a result of these steps, but it is not functioning as expected on Android 14 and iOS 17.1/17.2.

Describe what you expected to happen:

The BottomSheet should open .

Reproducible sample code

https://snack.expo.io/@gorhom/bottom-sheet-v4-reproducible-issue-template

[ricoh-willog]

I don't know it is same case with me. I comment additional environment of this bug.
I found this issue only iPhone 14 series and iOS 17.2.1+

[chamellion]

Same issue here

[salmaAlouane]

@gorhom is there any solution for that please ?

[jdicami]

experiencing problems as well, any update @gorhom

[FawadMahmood]

@jdicami It is related to reanimated with reduced motion, here is a patch that can temporarily fix this issue.

@gorhom+bottom-sheet+4.6.0.patch

[jetaix]

thx @FawadMahmood your patch fix the issue

[daveosterjr]

@gorhom can we get this added in to the next release if possible?

[FawadMahmood]

@daveosterjr, it needs to be appropriately implemented. I just made a quick patch.

[tbonebrad]

This has been causing some major issues for us on both iOS and Android. We love this library and have used it liberally across our app, which in turn made our app unusable for users on the problematic device/os combos. I applied the patch and its now fixed (Thank you @FawadMahmood!). Is there anything I can do to help get this fix moved into a release?

[tbonebrad]

@jdicami It is related to reanimated with reduced motion, here is a patch that can temporarily fix this issue.

@gorhom+bottom-sheet+4.6.0.patch

Quick clarification to others who find this. Reduce motion is a phone setting...

• iOS found under Settings -> Accessibility -> Motion -> Reduce Motion
• Android found under Settings -> Accessibility -> Remove Animations

When enabled the bottom sheet does not work

[uhhhsoyan]

+1 please and thanks!

@gorhom can we get this added in to the next release if possible?

[fobos531]

I've submitted a PR which should fix this in v5 of the library: #1743

[guvenakcoban]

You can extend the animationConfigs with reduceAnimation value if you use react-native-reanimated v3.

import { ANIMATION_CONFIGS } from '@gorhom/bottom-sheet';
import { ReduceMotion } from 'react-native-reanimated';

<BottomSheet
      animationConfigs={{ ...ANIMATION_CONFIGS, reduceMotion: ReduceMotion.Never }}

[gorhom]

this should be fixed on v5

[ericpoulinnz]

@gorhom great to hear! This is a pretty big issue, are you able to give a rough timeline for when v5 is stable?

[iusama46]

This worked for me

const reducedMotion = useReducedMotion();

animateOnMount={!reducedMotion}

[singhayush1403]

On changing the animationConfigs, the bottomSheet is finally starting to show, but I'm facing a new problem now. 3 out of 10 times the bottom sheet doesn't close properly with the close or dismiss function. It goes down and comes back up. Anyone else facing the same issue?

[gtsadaris]

On changing the animationConfigs, the bottomSheet is finally starting to show, but I'm facing a new problem now. 3 out of 10 times the bottom sheet doesn't close properly with the close or dismiss function. It goes down and comes back up. Anyone else facing the same issue?

@singhayush1403 I had the same issue and fixed it by applying the patch @FawadMahmood provided ! I hope it helps.

[codebycorey]

You can extend the animationConfigs with reduceAnimation value if you use react-native-reanimated v3.

import { ANIMATION_CONFIGS } from '@gorhom/bottom-sheet';
import { ReduceMotion } from 'react-native-reanimated';

<BottomSheet
      animationConfigs={{ ...ANIMATION_CONFIGS, reduceMotion: ReduceMotion.Never }}

This solution appears to break BottomSheetTextInput

When we apply this change, the sheet no longer extends to accommodate keyboard. Does anyone know of a solution around that.

We bumped to the version with the patch built in and the same issue happens.

[buzunboy]

You can extend the animationConfigs with reduceAnimation value if you use react-native-reanimated v3.

import { ANIMATION_CONFIGS } from '@gorhom/bottom-sheet';
import { ReduceMotion } from 'react-native-reanimated';

<BottomSheet
      animationConfigs={{ ...ANIMATION_CONFIGS, reduceMotion: ReduceMotion.Never }}

This solution appears to break BottomSheetTextInput

When we apply this change, the sheet no longer extends to accommodate keyboard. Does anyone know of a solution around that.

We bumped to the version with the patch built in and the same issue happens.

Hi, I'm facing the same issue. Any suggestions?

[UgurGumushan]

bottom sheet not appearing for users that have reduced motion turned on (#1743 @fobos531) (9b4ef4d)
https://github.com/gorhom/react-native-bottom-sheet/releases/tag/v5.0.0-alpha.8

[JJSLIoT]

Checked after upgrading to v5.0.0-alpha.8 but the issue seems to persist. The bottom sheet does not open the first time, I need to call sheetRef.current?.snapToIndex(0); twice to actually open it. I started facing this issue after upgrading to RN version 0.70.x from 0.68.x.

The issue persists on RN version 71 as well as on 72. I also tried upgrading reanimated to the latest version: 3.8.1 and tried applying the patch mentioned here: #1674 (comment) after downgrading bottom sheet to 4.6.0 but the issue persists.

[Code-yWilliams]

You can extend the animationConfigs with reduceAnimation value if you use react-native-reanimated v3.

import { ANIMATION_CONFIGS } from '@gorhom/bottom-sheet';
import { ReduceMotion } from 'react-native-reanimated';

<BottomSheet
      animationConfigs={{ ...ANIMATION_CONFIGS, reduceMotion: ReduceMotion.Never }}

This solution appears to break BottomSheetTextInput
When we apply this change, the sheet no longer extends to accommodate keyboard. Does anyone know of a solution around that.
We bumped to the version with the patch built in and the same issue happens.

Hi, I'm facing the same issue. Any suggestions?

Same issue here ☹️ Has anyone been able to address this?

[UgurGumushan]

This is resolved here: https://github.com/gorhom/react-native-bottom-sheet/releases/tag/v5.0.0-alpha.8
But v5 has other issues. Please patch the v4 and close this issue.

[hirbod]

On changing the animationConfigs, the bottomSheet is finally starting to show, but I'm facing a new problem now. 3 out of 10 times the bottom sheet doesn't close properly with the close or dismiss function. It goes down and comes back up. Anyone else facing the same issue?

I have encountered this, and its unrelated to the reduced motion. Whenever you change the animationConfig, this issue starts to arise.

[iway1]

"Reduced Motion" breaks a lot of stuff in this library even previous to 17.1.. IE onClose handlers fire instantly... kind of makes it unusable IMO. In my current project we're going to have to swap out BottomSheet for our own bottom sheet component because of these issues

[sparga]

On changing the animationConfigs, the bottomSheet is finally starting to show, but I'm facing a new problem now. 3 out of 10 times the bottom sheet doesn't close properly with the close or dismiss function. It goes down and comes back up. Anyone else facing the same issue?

I have encountered this, and its unrelated to the reduced motion. Whenever you change the animationConfig, this issue starts to arise.

I had the same issue and found that it happens when the animationConfig is not memoized. If the component containing <BottomSheet> re-renders during the close animation this useEffect is run and re-opens the bottom sheet.

I actually noticed the same issue when using useBottomSheetSpringConfigs as well because it's not correctly memoized. The config object is not "shallow equal", so the useMemo has no effect.

I fixed it by declaring the config object outside the component, which keep the same reference between each render.

import { ANIMATION_CONFIGS } from '@gorhom/bottom-sheet';
import { ReduceMotion } from 'react-native-reanimated';

// Constants
const bottomSheetAnimationConfig = {...ANIMATION_CONFIGS, reduceMotion: ReduceMotion.Never};

// In Component
<BottomSheet
      animationConfigs={bottomSheetAnimationConfig}