react-native-reanimated-bottom-sheet Very slow mount / render (500ms+)

I'm using Expo and react-navigation, where my Bottom-Sheet Component is in a screen component in a nested Navigator. When I navigate to this screen, the bottom-sheet takes about 500ms to appear.

It doen't seem to be related to my header and content components, I replaced them with simple Text components and it still took really long to show up.

I get the issue on android and iphone 6, but on an iphone 7 it shows up instantly. Running expo in PROD or building the app does not help

While opening the route JS FPS fall to -2.

"expo": "~36.0.0", "reanimated-bottom-sheet": "^1.0.0-alpha.19", "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz", "react-native-gesture-handler": "~1.5.0", "react-native-reanimated": "~1.4.0",

Mar 14 '20 20:03 kevgk

I'm also experiencing this. When I dug into it a bit ago (going off memory here) this.Y and this.translateMaster were the culprit. If I removed them from the dist (and broke all animations) mounting was pretty much instant.

I don't know enough about react-native-renanimated to try and find a more exact source of the slowness though.

Would love to get this sped up though. I tried looking for alternatives, but this has been the best library besides the mount/unmount speed.

Apr 04 '20 22:04 rogarMS

yep experiences weird flashing as well with the mounting

Apr 08 '20 08:04 harveyconnor

Same.

Apr 23 '20 02:04 karimcambridge

Same, only on Android.

May 05 '20 14:05 RominHalltari

+1

May 21 '20 03:05 batwood001

Same here. It happens only on Android, iOS runs smoothly.

May 21 '20 10:05 stachu2k

Did anyone manage to solve this?

Jul 25 '20 09:07 wmonecke

Still having this issue sadly.

Sep 04 '20 19:09 rkrueger11

Can we please have a fix for this @osdnk

The bottom sheet isn't even mounting half the time now with expo sdk 39 recommended reanimated 1.13.0

Android is where the issue is it really

Oct 02 '20 00:10 karimcambridge

We're also having this issue causing the bottom sheet to flicker as the screen renders. Until this have been resolved we decided to add an initial snap point that renders the bottom sheet below the viewport and then snap it to the intended snap point when it's already rendered.

Dec 09 '20 14:12 albinekman91

Google Pixel 3a XL. Mounting also causes flickering.

Mar 26 '21 06:03 RohovDmytro

We're also having this issue causing the bottom sheet to flicker as the screen renders. Until this have been resolved we decided to add an initial snap point that renders the bottom sheet below the viewport and then snap it to the intended snap point when it's already rendered.

@albinmartinsson91 how are you getting the on render method for the bottom sheet? Also FYI i am also facing the same issue of bottom sheet taking a couple seconds to show up and when it does the page flickers. Atleast the elements that are supposed to animate with the swipe/scroll of the bottom sheet flicker.

Jun 08 '21 09:06 ws7one

same issue

Aug 12 '21 04:08 hamam99

I'm going to move to https://github.com/gorhom/react-native-bottom-sheet because this component has mounting issues and no support.

Aug 12 '21 05:08 karimcambridge