search

osdnk / react-native-reanimated-bottom-sheet

Highly configurable bottom sheet component made with react-native-reanimated and react-native-gesture-handler
MIT License
3.33k stars 327 forks source link

Very slow mount / render (500ms+) #191

Open kevgk opened 4 years ago

kevgk commented 4 years ago

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",

rogarMS commented 4 years ago

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.

harveyconnor commented 4 years ago

yep experiences weird flashing as well with the mounting

karimcambridge commented 4 years ago

Same.

RominHalltari commented 4 years ago

Same, only on Android.

batwood001 commented 4 years ago

+1

stachu2k commented 4 years ago

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

wmonecke commented 4 years ago

Did anyone manage to solve this?

rkrueger11 commented 4 years ago

Still having this issue sadly.

karimcambridge commented 4 years ago

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

albinekman91 commented 3 years ago

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.

RohovDmytro commented 3 years ago

Google Pixel 3a XL. Mounting also causes flickering.

ws7one commented 3 years ago

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.

hamam99 commented 3 years ago

same issue

karimcambridge commented 3 years ago

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