thanks@beqramo for submitting this PR, but i think it is not about layout not being ready,isLayoutCalculated is responsible to trigger the on mount animation, which waits till container height to be calculated before it become truthful

could you please provide a reproducible sample code of the issue ?

Noticed Reanimated 3 has an unreleased PR related to a race conditionsoftware-mansion/react-native-reanimated#5224 - wonder if there's a relation to this issue.

Hi, thanks for your feedback,@gorhom.

I will try to provide more context before presenting the conclusions:

When snapToPosition is called from the ref right away after mount:

useEffect(()=>{sheetRef.current?.snapToPosition(400);},[]);

At that time, SOMETIMES, the value of isLayoutCalculated is false. Why?

The value of isLayoutCalculated changes after the onLayout callback gets called (when the component is rendered and we have sizes and other details about the container).
We are facing some kind of race condition; sometimes, onLayout is getting called first, and isLayoutCalculated and consecutively, animatedContainerHeight do have correct values.
It is like, in short, which one will get called first? useEffect or onLayout?

What are the solutions? (Sorted from worse to best solution)

1. To have some kind of callback prop like "onReady" that will indicate the parent component that the bottom-sheet is ready.
2. Return a specific value like "not_ready" when it will be triggered from the ref, right away after mount.
3. Take ownership of the problem from the library side; the library needs to automatically wait for the completion of all height calculation processes.

Reproducible sample code:
I first faced this problem on my app. When searching for solutions, I found that another developer already had thesame problem.

Other than that I will drop my code snippet too:

constsheetRef=useRef<BottomSheet>(null);useEffect(()=>{// call right after mountsheetRef.current?.snapToPosition(400);},[]);return<BottomSheetref={sheetRef}snapPoints={[10]}index={-1}><Columnmt={7}px={5}stretch>{/* children here*/}</Column></BottomSheet>

Thank you.

Hope I will not waste your time.

@henrymoulton Thanks for the info,
I think that one is a different issue from this.
From the funny side: I think I was facing that issue too and I'm happy that it is resolved and you informed me about it, waiting for the release.

Thank you

@beqramo can you confirm it still happens if you're using Reanimated V2?

Hi@henrymoulton,

I am currently using my fork, and I haven't encountered the issue. Additionally, I am utilizing reanimated version 3. If you wish to test it, the problem might be more noticeable on low-end devices, particularly Android.

The issue you mentioned seems slightly different here. The problem lies in the synchronization of theonLayout andsnapToPosition functions. The challenge arises because the first function is not synchronous, and its trigger can be delayed. That creates problem ifsnapToPosition gets called right away on parent component mount.

Thank you.

Seems interesting! I'd like to see this PR merged if possible

@gorhom , this is still an issue inv5. It's very difficult to reproduce as it depends on execution order so it can vary from device to device, platform to platform, and codebase to codebase.

It would seem that a simple solution could simply be to provide a callback on the BottomSheet like:onReady which triggers onceisLayoutCalculated istrue. Either that or queuing up calls to snap and then executing them once theisLayoutCalculated istrue.