[v4] BottomSheetModal with BottomSheetModalProvider slow to open and not have initial animation

[Piero87]

Bug

Hello,
I'm trying to use BottomSheetModal with the BottomSheetModalProvider inside a React Navigation project, these are my problem:

1. When I click on the button to show the sheet it's very slow to open
2. the bottom sheet open with no animation (on|off)
3. This is not a problem but a question to understand if I am doing it well, I want to show the bottom sheet over the react navigation bottom bar, is the BottomSheetModalProvider the right choice?

Environment info

Library	Version
@gorhom/bottom-sheet	^4
react-native	0.68.1
react-native-reanimated	^2.7.0
react-native-gesture-handler	^2.4.0

Steps To Reproduce

I have made a repository to see it: https://github.com/Piero87/TestBottomSheet

[github-actions]

@Piero87: hello! 👋

This issue is being automatically closed because it does not follow the issue template.

[junaiddarajat]

Same here. I'm using Expo Managed workflow. For me though, it is only happening at iOS, Android seems to be fine.

[Undermaken]

I cannot reach the root cause of the problem but I found an ugly workaround that could be useful to make some hypothesis

If you enable the BottomSheetDebugView in src/components/bottomSheet/BottomSheet.tsx

and then you move the debug content out of the screen in
src/components/bottomSheetDebugView/BottomSheetDebugView.tsx

the animation is always done and it seems to be smooth

I guess that the inclusion of BottomSheetDebugView forces the component redrawing that, due to the bug, it's not always done

[FilipeAraujo]

I'm having the same issue, it only starts working when I call the enableLogging which on production it will not work.

I'm testing using Expo Managed Workflow, Expo SDK 45 (was happening on 44) and the following versions:

"@gorhom/bottom-sheet": "^4.2.2"
"@gorhom/portal": "^1.0.13",
"expo": "^45.0.0",
"react": "17.0.2",
"react-native-reanimated": "~2.8.0",

@gorhom can you help us? thanks

[denissdubinin]

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.

"@gorhom/bottom-sheet": "^4.2.2",
"react": "17.0.2",
"react-native": "0.68.1",
"react-native-gesture-handler": "^2.4.2",
 "react-native-reanimated": "^2.8.0"

[IvanIhnatsiuk]

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

"@gorhom/bottom-sheet": "^4.2.2",
"react": "17.0.2",
"react-native": "0.68.1",
"react-native-gesture-handler": "^2.4.2",
 "react-native-reanimated": "^2.8.0"

[computerjazz]

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 views within, and so are evaluated on every frame. So really all you need to do is put the following anywhere in the BottomSheet.tsx return:

<ReText style={{ position: 'absolute', opacity: 0}} text={""} value={animatedSheetState} />

(Even just console.log animatedSheetState within a useDerivedValue seems to force it to re-evaluate and fixes the bug).
I haven't spent enough time studying the source here to really understand the root cause here, but hopefully this gets us closer to the fix.

Here's my hack fix patch: https://gist.github.com/computerjazz/410f4cbad717ac14af75b49e633384cd

[sgtpsibin]

@computerjazz thanks for the patch

[andrewjmathers]

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

[andrewjmathers]

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

const App = () => {
  // ref
  const bottomSheetRef = useRef(null);

  // variables
  const snapPoints = useMemo(() => ['25%', '50%'], []);

  // callbacks
  const handleSheetChanges = useCallback((index: number) => {
    console.log('handleSheetChanges', index);
  }, []);

  // renders
  return (
    <View
      style={{
        height: '100%',
      }}>
      <TouchableOpacity
        style={{marginTop: '50%', padding: 20, backgroundColor: 'white'}}
        onPress={() => bottomSheetRef.current.present()}>
        <Text>Toggle open</Text>
      </TouchableOpacity>
      <BottomSheetModalProvider>
        <BottomSheetModal
          ref={bottomSheetRef}
          index={1}
          snapPoints={snapPoints}
          onChange={handleSheetChanges}>
          <View
            style={{backgroundColor: 'white', height: '100%', width: '100%'}}>
            <Text>Awesome</Text>
          </View>
        </BottomSheetModal>
      </BottomSheetModalProvider>
    </View>
  );
};

export default App;

[andrewjmathers]

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

[cam-shaw]

@andrewjmathers I have the same experience. 2.8.0 has this issue, whereas 2.3.0 does not.
Using reanimated 2.7.0 also seems to work fine.

[computerjazz]

I opened a reanimated issue here: software-mansion/react-native-reanimated#3296

[cam-shaw]

@computerjazz FWIW - your patch-package seems to resolve the issue for me.

[andrewjmathers]

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

[Titozzz]

I experience the same on both platform and the PR on rea doesn't fix it for me

[andrewjmathers]

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 :(

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

[sam-houle1]

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 ?

"@gorhom/bottom-sheet": "^4.3.2",
"react": "17.0.2",
"react-native": "0.67.4",
"react-native-gesture-handler": "^2.5.0",
 "react-native-reanimated": "^2.4.0"

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

[sharathprabhal]

(bump) the issue is still present

[enagorny]

I've solved it by using rendering initially and calling snapToPoint(0) instead of present. Potentially it might be slower as modal content is already mounted on my component render.

Also note that modal has enableDismissOnClose={false} so it's not unmounted on swipe down.

  // ref
  const bottomSheetModalRef = useRef<BottomSheetModal>(null);

  // variables
  const snapPoints = useMemo(() => ["75%", "100%"], []);

  // callbacks
  const handlePresentModalPress = useCallback(() => {
    bottomSheetModalRef.current?.snapToIndex(0);
  }, []);

  useEffect(() => {
    bottomSheetModalRef.current?.present();
  }, [bottomSheetModalRef]);

return (
  <>
     <Text> My component content </Text>

      <BottomSheetModal ref={bottomSheetModalRef} index={-1} snapPoints={snapPoints} enableDismissOnClose={false}>
        <View>
          <Text>Modal content</Text>
        </View>
      </BottomSheetModal>
  </> 

[RobbeCl]

Downgrading to react-native-reanimated@2.3.0 seems to fix it for me

[HenriqueDerosa]

I had the same issue. But with BottomSheet, not the modal one.
It was caused by the react-native-debugger. While it runs, it was very slow on Android [ios didn't have impact on it].
So the issue is not really happening, I don't know the reason, but closing the debugger made it work very smooth.

Hope it helps someone.

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

[AronBe]

Still requires this patch:
#925 (comment)

[JasonHiew]

I had the same issue. But with BottomSheet, not the modal one. It was caused by the react-native-debugger. While it runs, it was very slow on Android [ios didn't have impact on it]. So the issue is not really happening, I don't know the reason, but closing the debugger made it work very smooth.

Hope it helps someone.

Can confirm. Animation is buttery smooth after closing React Native Debugger. Initially I thought it had something to do with useNativeDriver: true bc I fixed laggy reanimated animations before using that.

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

[github-actions]

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

[TheBous]

any news?

[andvalsol]

I'm facing the same issue

[mwoss]

Yup, this issue persists and it's quite noticeable on low-end Android devices. :<

[demfabris]

Slowish even with a blank modal. I'm working around this by lazy loading all the inner stuff

[nitzanpap]

Any updates? this issue is still apparent.