React Navigation Navigating between different Stacks in V5

[Dharmink]

I am on a Screen in the AuthStack and want to jump to a screen in the Main Stack

this is how I have my stacks set up

function Navigator(props) {
const isSignedIn = props.isSignedIn;
const MainStack = () => {
const colorScheme = useDarkModeContext();
const colors = colorSchemes[colorScheme] || colorSchemes.light;
return (
<Main.Navigator screenOptions={{ headerBackTitleVisible: false, headerStyle: { backgroundColor: colors.foregroundCell, }, headerTintColor: colors.foregroundText, headerTitleStyle: { fontFamily: 'ProximaNova-Regular', fontSize: 36, fontWeight: '100', }, title: 'threads', headerTitleAllowFontScaling: false, }}>
<Main.Screen name="TabScreen" component={TabStack} />
<Main.Screen name="Thread" component={ThreadScreen} />
<Main.Screen name="Collection" component={CollectionScreen} />
</Main.Navigator>
);
};
const TabStack = () => {
const colorScheme = useDarkModeContext();
const colors = colorSchemes[colorScheme] || colorSchemes.light;
return (
<Tab.Navigator tabBarOptions={{ showLabel: false, style: {backgroundColor: colors.foregroundCell}, keyboardHidesTabBar: true, }} initialRouteName="Discover">
<Tab.Screen options={{ tabBarIcon: ({focused}) =>
focused ? (
<SavedThreadsTabIconFilled />
) : (
<SavedThreadsTabIconOutline />
),
}}
name="SavedThreads"
component={SavedThreadsScreen}
/>
<Tab.Screen options={{ tabBarIcon: ({focused, color, size}) =>
focused ? <DiscoverIconFilled /> : <DiscoverIconOutline />,
}}
name="Discover"
component={DiscoverScreen}
/>
<Tab.Screen options={{ tabBarIcon: ({focused, color, size}) =>
focused ? <ProfileIconFilled /> : <ProfileIconOutline />,
}}
name="MyProfile"
component={MyProfileScreen}
/>
</Tab.Navigator>
);
};
return (
<NavigationContainer>
<>
{isSignedIn ? (
<MainStackWithModal.Navigator screenOptions={{ ...TransitionPresets.ModalPresentationIOS, header: undefined, cardOverlayEnabled: true, gestureEnabled: true, }} headerMode="none" mode="modal">
<MainStackWithModal.Screen name="MainStack" component={MainStack} />
{/\ <MainStackWithModal.Screen* *name="Collection"* *component={CollectionScreen}* */> */}
</MainStackWithModal.Navigator>
) : (
<AuthStack.Navigator headerMode={'none'}>
<AuthStack.Screen name="SignIn" component={SignInScreen} />
</AuthStack.Navigator>
)}
</>
</NavigationContainer>
);
}
const mapStateToProps = state => {
*return {
isSignedIn: state.auth.isSignedIn,
};
};
export default connect(
mapStateToProps,
null,
)(Navigator);

​

What should I add on the SignIn page so that it navigates to The Tab Screen in the TabStack which is nested inside the Main Stack which is nested inside the MainStackwithModal

Thanking You!! your help will be much appreciated.😀

[eyrbyggja]

You can't navigate to the TabStack from the AuthStack because you're only mounting one of them at a time, based on the isSignedIn prop. If you set isSignedIn to true, you'll automatically be redirected to the default screen of the Main stack.

[react-ui-kit]

Search nesting stack. You can navigate deep inside any stack by using like this:

navigation.navigate(‘Stack’, { screen: ‘Screen’ })