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

BottomSheet Issue on Android 14 and iOS 17.1/17.2 #1674

Closed
salmaAlouane opened this issue Dec 25, 2023 · 29 comments
Closed

BottomSheet Issue on Android 14 and iOS 17.1/17.2 #1674

salmaAlouane opened this issue Dec 25, 2023 · 29 comments
Labels
bug Something isn't working no-issue-activity

Comments

@salmaAlouane
Copy link

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

@salmaAlouane salmaAlouane added the bug Something isn't working label Dec 25, 2023
@ricoh-willog
Copy link

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
Copy link

Same issue here

@salmaAlouane
Copy link
Author

@gorhom is there any solution for that please ?

@salmaAlouane salmaAlouane reopened this Jan 2, 2024
@salmaAlouane salmaAlouane changed the title BottomSheet Issue on Android 14 and iOS 17.1/1 BottomSheet Issue on Android 14 and iOS 17.1/17.2 Jan 3, 2024
@jdicami
Copy link

jdicami commented Jan 8, 2024

experiencing problems as well, any update @gorhom

@FawadMahmood
Copy link

@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

@gorhom gorhom assigned gorhom and unassigned gorhom Jan 9, 2024
@jetaix
Copy link

jetaix commented Jan 9, 2024

thx @FawadMahmood your patch fix the issue

@daveosterjr
Copy link

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

@FawadMahmood
Copy link

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

@tbonebrad
Copy link

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
Copy link

@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
Copy link

+1 please and thanks!

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

@fobos531
Copy link
Contributor

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

@guvenakcoban
Copy link

guvenakcoban commented Feb 22, 2024

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
Copy link
Owner

gorhom commented Feb 27, 2024

this should be fixed on v5

@ericpoulinnz
Copy link

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

@iusama46
Copy link

iusama46 commented Mar 8, 2024

This worked for me

const reducedMotion = useReducedMotion();

animateOnMount={!reducedMotion}

@singhayush1403
Copy link

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
Copy link

gtsadaris commented Mar 13, 2024

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.

yayvery pushed a commit to discord/react-native-bottom-sheet that referenced this issue Mar 18, 2024
gorhom#1674)

fix: bottom sheet not appearing for users that have reduced motion turned on (gorhom#1743)(by @fobos531)
yayvery pushed a commit to discord/react-native-bottom-sheet that referenced this issue Mar 18, 2024
gorhom#1674)

fix: bottom sheet not appearing for users that have reduced motion turned on (gorhom#1743)(by @fobos531)
@codebycorey
Copy link

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.

image

@buzunboy
Copy link

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.

image

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

@UgurGumushan
Copy link

UgurGumushan commented Mar 27, 2024

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
Copy link

JJSLIoT commented Apr 2, 2024

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
Copy link

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.
image

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

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

@UgurGumushan
Copy link

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
Copy link
Contributor

hirbod commented Apr 17, 2024

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
Copy link

iway1 commented Apr 24, 2024

"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
Copy link

sparga commented May 15, 2024

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}

Copy link

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.

Copy link

This issue was closed because it has been stalled for 5 days with no activity.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working no-issue-activity
Projects
None yet
Development

No branches or pull requests