Remove navigation stack for login screen after user login

Question

I am new to React Native. I am so confused about navigation stack.

Here is my code.

const AppNavigator = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Login" component={LoginScreen} options={{ title: 'login' }}/>
        <Stack.Screen name="Home" component={HomeScreen} options={{ title: 'home' }}/>
      </Stack.Navigator>
    </NavigationContainer>
  );
};

Users will see the login screen once they run this app. And here is LogInScreen.

const LogInScreen = ({ navigation }) => {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button 
        title="google login"
        onPress={() => 
          navigation.navigate('Home')
        }
      />
    </View>
  );
};

Users is going to see home screen after they clicked login button. But the problem is they still can see back button in home screen. After log in , it's not necessary to show login screen to users. Hence, I need to reset stack to remove back button in home screen.

Answer 1

If you want to remove the back button in the home screen, you can use the headerLeft option as specified here.

I think it is enough if you're developing for iOS. For Android, the user can still use the back button to go back. I think resetting the stack and navigate the user the home page is also a good solution. You can look into this post