-
-
Notifications
You must be signed in to change notification settings - Fork 733
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
[v4] BottomSheetModal with BottomSheetModalProvider slow to open and not have initial animation #925
Comments
@Piero87: hello! 👋 This issue is being automatically closed because it does not follow the issue template. |
Same here. I'm using Expo Managed workflow. For me though, it is only happening at iOS, Android seems to be fine. |
I'm having the same issue, it only starts working when I call the I'm testing using Expo Managed Workflow, Expo SDK 45 (was happening on 44) and the following versions:
@gorhom can you help us? thanks |
I have very similar problem, i guess that's the same root of the issue. For me when clicking on button, sometimes it's just not opened, but when clicking 2nd time, modal appears without any animation.
|
I have the same issue. Sometimes when I'm clicking on the open button it doesn't appear, but when I'm clicking wherever it appears without animation
|
So, here's my theory based on a very limited understanding of how reanimated works: I think that in order for an animated node to be evaluated every frame, it must be bound to a view. @Undermaken made a great observation about the Debug view. By including that debug component, the values become bound to the <ReText style={{ position: 'absolute', opacity: 0}} text={""} value={animatedSheetState} /> (Even just console.log Here's my hack fix patch: https://gist.github.com/computerjazz/410f4cbad717ac14af75b49e633384cd |
@computerjazz thanks for the patch |
I'm experiencing the same issue with or without react-navigation. I had a memory leak in my app where useState kept updating in a loop which fixed this issue, but as soon as I removed the leak the issue came back. I'm unsure if it's something in the general View structure of my app that causes this |
I tried incorporating the example from usage section with BottomSheetModal into plain new app and recreated the described issue. Going to try suggested workarounds and also different versions just to try and see if earlier versions also affected
|
Downgrading reanimated to "react-native-reanimated": "2.3.0" appears to fix the initial render issue. Definitely an issue with reanimated because I pretty much had the same issue with "reanimated-bottom-sheet" which is also dependent on it. Only tested briefly, so it may or may not be the fix, but just to give you an idea UPD: Yes, works flawlessly for me with "react-native-reanimated": "2.3.0", may be an issue if your other dependencies require a more recent version of reanimated, otherwise it's a sound fix |
@andrewjmathers I have the same experience. 2.8.0 has this issue, whereas 2.3.0 does not. |
I opened a reanimated issue here: software-mansion/react-native-reanimated#3296 |
@computerjazz FWIW - your patch-package seems to resolve the issue for me. |
Am I the only one who experiences the same on Android too? It's also fairly difficult to downgrade your project to use older version of react reanimated due to compatibility issues with new android architecture |
I experience the same on both platform and the PR on rea doesn't fix it for me |
Finally managed to get it working using react-native-reanimated ver 2.2.4 - requires a slightly different installation than the newer version in case anyone will be trying the same, make sure you open the right documentation version for this. I'm using a very cheap device for testing on android - Xiaomi Redmi 9A and the performance of bottom sheet initial render compared to react-navigation side drawer is significantly slower: empty bottom sheet pops up in about a second after calling .present(), if you have contents including carousel with images etc, it lags for 2-3 seconds. I don't know if device is the issue, it works really well on an iPhone. I will be returning this android and getting a more powerful one tomorrow to test UPD: Got a more powerful Android device, which has 6gb RAM - there still is a lag of 2-3 seconds when calling a .present() on modal, if you change content when it's already open it's nearly instant. Unsure what causes this :( |
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. |
Still having the same issue, the patch made by @computerjazz is not working for me, also I am the only one who has this problem only for production build for Android ?
|
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. |
(bump) the issue is still present |
I've solved it by using rendering initially and calling Also note that modal has
|
Downgrading to react-native-reanimated@2.3.0 seems to fix it for me |
I had the same issue. But with BottomSheet, not the modal one. Hope it helps someone. |
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. |
Still requires this patch: |
Can confirm. Animation is buttery smooth after closing |
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. |
This issue was closed because it has been stalled for 5 days with no activity. |
any news? |
I'm facing the same issue |
Yup, this issue persists and it's quite noticeable on low-end Android devices. :< |
Slowish even with a blank modal. I'm working around this by lazy loading all the inner stuff |
Any updates? this issue is still apparent. |
Bug
Hello,
I'm trying to use BottomSheetModal with the BottomSheetModalProvider inside a React Navigation project, these are my problem:
Environment info
Steps To Reproduce
I have made a repository to see it: https://github.com/Piero87/TestBottomSheet
The text was updated successfully, but these errors were encountered: