[v4] | [v2] [Android] : backgroundComponent re-rendering causes BottomSheet UI to flicker

[mhmaidi789]

Bug

Expanded BottomSheet content flickers when backgroundComponent prop is updated. Only impacts android.

Environment info

Library	Version
@gorhom/bottom-sheet	4.6.0
react-native	0.73.2
react-native-reanimated	3.6.2
react-native-gesture-handler	2.14.0

Steps To Reproduce

1. Expand BottomSheet
2. Select Update Background CTA
3. Observe BottomSheetView content flicker on android

Describe what you expected to happen:

1. backgroundComponent to re-render with new color
2. BottomSheet content to remain visible and not flicker.

Reproducible sample code

https://snack.expo.dev/@mhmaidi789/bottom-sheet-v4-reproducible-issue-template

[Sakethtadimeti]

I had the same problem while rendering react-native-maps in the background. the whole map re-renders after it snaps to the first index. Temporarily solved by using an Absolute flex view & a render prop

<GestureHandlerRootView>
      {renderBackdrop?.()}
      <BottomSheet
        ref={sheetRef}
        handleComponent={PanelHandle}
        snapPoints={snapPoints}
        onChange={handleSnapPointChange}
        animateOnMount={false}
      >
       {children}
      </BottomSheet>
</GestureHandlerRootView>

[github-actions[bot]]

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[bot]]

This issue was closed because it has been stalled for 5 days with no activity.