Slow to open

[eipark]

TrueSheet has been nice to implement, relatively simple to use.

One issue I've noticed is that it's quite slow to load. In my setup, I have a screen I navigate to where TrueSheet is the top level component with initialIndex={0}. So when I navigate to the screen with react navigation (i set presentation: 'transparentModal'), it opens the sheet.

Ive noticed there's a considerable lag until pressing my button that navigates until the sheet opens. It about 500ms I would guess.

I've made sure through elimination to check that the lag isn't coming from the inner components or the navigation. It renders quickly when I dont have TrueSheet in the same route.

[whalemare]

Discovered the same behavior.

I used to use a solution from gorhom, there the bottom sheet opened quickly, but in everything else the performance, especially on Android, was very low.

Since this is a native implementation, it seems to me that a fastests way is to keep TrueSheet always in the root component, and call it through the functions like TrueSheet.present("my-bottom-sheet"). But I haven't tried it yet

[lodev09]

Do you have a video to show?

Try to set initialIndexAnimated={false}. You can try to follow this guide.

[eipark]

I'll try to get a video.

I had tried that thinking the animation just had latency but it still had the lag. It would delay a half second then the sheet would flash open.

---

Ernie Park erniepark.com ( http://www.erniepark.com/?utm_source=ernestipark&utm_medium=email ) | LinkedIn ( https://www.linkedin.com/in/ernestipark/ )

On Sat, Aug 24 2024 at 7:07 AM, Jovanni Lo < @.*** > wrote:

Do you have a video to show?

Try to set initialIndexAnimated={false}. You can try to follow this guide ( https://sheet.lodev09.com/guides/onmount/ ).

— Reply to this email directly, view it on GitHub ( https://github.com/lodev09/react-native-true-sheet/issues/90#issuecomment-2308356436 ) , or unsubscribe ( https://github.com/notifications/unsubscribe-auth/AAFQWQWQSKRZS32V6TIMQVTZTBSOHAVCNFSM6AAAAABNAWEV3CVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMBYGM2TMNBTGY ). You are receiving this because you authored the thread. Message ID: <lodev09/react-native-true-sheet/issues/90/2308356436 @ github. com>

[eipark]

I basically rendered a blank sheet with nothing else in the component, turned off animation, etc, and it still is very slow. I guess it's possible its coming from navigation but I wasn't able to isolate that.

[eipark]

https://github.com/user-attachments/assets/6aa699d2-d730-4942-bf3c-e529306995d2

[lodev09]

I think this has something to do with react-native-screens and not TrueSheet. If you're setting it up for deep link, I would suggest you use param instead and present it through useEffect.

Something like:

const { id } = route.params

useEffect(() => {
  if (id) {
    ;(async () => {
      await sheetRef.current?.present()
      navigation.setParams({ id: undefined })
    })()
  }
}, [id])

[lodev09]

TrueSheet requires a little time to render during mount so it's expected to have few ms delay specially it needs to wait for the rn-screen to be fully loaded.

The actual presentation of the sheet should be performant already once the sheet has been loaded. Try the code above and see if that works.