[v4] BottomSheet flickers when adding Animated component

[nastarfan]

Bug

The BottomSheet is flickering when displayed after animated component has been mounted, specifically the flickering part is the BottomSheetBackdrop.

From my observation, the flickering only happens when the BottomSheet has onChange prop since removing it while still keeping the animated component dismisses the issue. Tho, keeping the onChange prop while removing the animated component also removes the issue. So it seems both cannot present at the same time, otherwise the issue will arise.

The issue exists on both BottomSheet and BottomSheetModal.

Environment info

I have only tested this on Android

Library	Version
@gorhom/bottom-sheet	4.1.5
react-native	0.68.0 (also tested on 0.67.4)
react-native-reanimated	2.6.0 (also tested on 2.5.0)
react-native-gesture-handler	2.3.2

Steps To Reproduce

1. Add animated components (from reanimated), mounted before the bottom sheet
2. Add bottomsheet with backdropComponent and onChange props
3. The bottom sheet will flicker when shown

Describe what you expected to happen:

1. The BottomSheet doesn't flicker even we have backdrop, onChange handler, and animated components

Reproducible sample code

I created a repo to reproduce the issue, specifically in this file

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

[kaogire]

@nastarfan Did you finally resolve this?

[OlehOutlierlabs]

why is this closed? this is still an issue!!!! @kaogire @nastarfan did you fix this?

[kaogire]

@OlehOutlierlabs Nah, it's still an issue

[HGCollier]

Managed to find a solution here: #208
Essentially, rather than putting a function directly into the onChange prop, create a callback instead:

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

onChange={handleSheetChanges}