Navigation from a stack screen to tab navigator with reset does not work

I have login screen and main screen. My main screen has Tab.Navigator. When i click on login button of login screen i want to navigate to main screen and remove all the previous routes which are present in stack. When i use navigation.navigate it works but it does not remove previous route but when i use navigation.reset it navigates to a white screen with none of my tabs visible

Here is my code

In App.tsx

<NavigationContainer> <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} backgroundColor={backgroundStyle.backgroundColor} /> <Stack.Navigator> <Stack.Screen name={LoginRoute} component={Login} options={{headerShown: false}} /> <Stack.Screen name={MainRoute} component={Main} options={{headerShown: false}} /> </Stack.Navigator> </NavigationContainer> 

In Main component

const Main = () => { return ( <Tab.Navigator screenOptions={({route}) => ({ headerShown: false, tabBarStyle: {backgroundColor: greenColor, height: 90}, tabBarIcon: ({focused}) => { return <MainItem routeName={route.name} focused={focused} />; }, tabBarLabel: () => <></>, })}> <Tab.Screen name={home} component={HomeScreen} /> <Tab.Screen name={discover} component={DiscoverScreen} /> <Tab.Screen name={explore} component={ExploreScreen} /> <Tab.Screen name={manage} component={ManageScreen} /> <Tab.Screen name={profile} component={ProfileScreen} /> </Tab.Navigator> ); }; 

In login screen's login button press i have added following code

navigation.reset({ index: 0, routes: [{name: MainRoute}], }); 

but i get white screen when i do this. How to navigate to main screen and remove previous routes as well