[Bug]: BottomSheetModal Causes Infinite Re-rendering When Nested Inside Another BottomSheetModal

[sanbondeveloper]

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

iOS, Android

What happened?

I am rendering an independent React Navigation inside the children of a BottomSheetModal, and the initial screen of the React Navigation is rendering another BottomSheetModal. The structure is as follows:

<BottomSheetModal>
  <NavigationContainer independent={true}>
    <Stack.Navigator initialRouteName={'first'}>
      <Stack.Screen name="first">
        {() => (
          <FirstScreen />
        )}
      </Stack.Screen>
      // ...
    </Stack.Navigator>
  <NavigationContainer />
</BottomSheetModal>

When rendering the children of a BottomSheetModal as a function to receive specific values upon opening, infinite re-rendering occurs. Additionally, rendering all BottomSheetModals as functions within the hierarchy results in infinite re-rendering.

<BottomSheetModal>
  {({ data }) => (
    <NavigationContainer independent={true}>
      <Stack.Navigator initialRouteName={'first'}>
        <Stack.Screen name="first">
          {() => (
            <FirstScreen stockId={data.stockId} />
          )}
        </Stack.Screen>
        // ...
    </Stack.Navigator>
  <NavigationContainer />
  )}
</BottomSheetModal>

Reproduction steps

• "Render a BottomSheetModal within a Screen component."
• "Render the children of the BottomSheetModal as a function."
• "The children component renders another BottomSheetModal, and its children are also rendered as a function."
• "Opening all BottomSheetModals causes the Screen component to infinitely re-render."

Reproduction sample

https://snack.expo.dev/KTSHacRX6Uc8HgIwxcBfa

Relevant log output

No response

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