[v4] Integrate with react navigation as mid-level navigator (non-root)

[julian-kingman-lark]

Feature Request

Why it is needed

Forgive me if this is already possible, but I'm trying to implement a bottom sheet navigator, but not at the root level, and all the examples (in the repo and related issues I've been able to find) show the BottomSheet component being at the root level above all navigators. I'd like it like this:

• RootNavigator
• TabNavigator
• BottomSheetNavigator

Possible implementation

The way I've gone about implementing this is to put a component that returns the BottomSheet component with another StackNavigator inside of it, but when I try to navigate to those routes it tells me they don't exist, so I'm assuming this is not supported functionality? LMK if I'm doing something wrong here.

Code sample

const BottomSheetStack = () => {
  const screenOptions = useMemo<StackNavigationOptions>(
    () => ({
      ...TransitionPresets.SlideFromRightIOS,

      headerShown: true,
      safeAreaInsets: { top: 0 },
      cardStyle: {
        backgroundColor: 'white',
        overflow: 'visible',
      },
    }),
    [],
  );
  return (
    <Stack.Navigator initialRouteName="Screen1">
      <Stack.Screen name="Screen1" options={screenOptions} component={View} />
      <Stack.Screen name="Screen2" options={screenOptions} component={View} />
    </Stack.Navigator>
  );
};

const snapPoints = ['80%'];
const BottomSheetNavigator = () => {
  const bottomSheetRef = useRef(null);
  return (
    <BottomSheet ref={bottomSheetRef} snapPoints={snapPoints}>
      <BottomSheetStack />
    </BottomSheet>
  );
};

What do you think, possible?

[julian-kingman-lark]

I created my own navigator, would you accept a PR with the navigator?

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

[vxm5091]

@julian-kingman-lark
In your navigator, are you still able to interact with the screen underneath? Would love to take a peak if you don't mind sharing.

I'm looking to implement something similar to Google Maps:

• Stack navigator
  • Map screen
  • BottomSheetStack (at initial snap point, both the BottomSheet and MapScreen are responsive)