로그인 처리가 정상적으로 완료된 경우 로그인한 사용자에게 처음으로 보이는 화면은 MainTab입니다. MainTab을 보여줄 때, 단순히 해당 화면으로 navigate 또는 push하는 것은 조금 문제가 있습니다. 스택에 기존 로그인 또는 프로필 등록 화면이 남아있으므로, iOS에서 화면을 스와이프하거나 안드로이드에서 뒤로가기 버튼을 누르면 이전 화면이 다시 노출될 수 있기 때문입니다.

이럴 경우 화면을 띄운 다음에 navigation의 reset 메서드를 사용하는 방법이 있습니다만, 이 방법은 번거롭기도 하고 제대로 하지 않으면 버그가 발생하기 쉬워서 권장하지 않습니다. 만약 관심이 있다면 다음 링크를 참조하세요.

• https://reactnavigation.org/docs/navigation-prop/#reset

대신 특정 조건이 성립하면 RootStack에서 아예 불필요한 화면들을 제거하는 방법으로 구현하겠습니다. 이는 리액트 내비게이션 공식 문서에서도 권장하는 방법입니다.

아까 UserContext를 만들었기 때문에 매우 간단하게 구현할 수 있습니다. 우선 MainTab 컴포넌트를 만들어주세요.

screens/MainTab.js

import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
import {useUserContext} from '../contexts/UserContext';

function MainTab() {
  const {user} = useUserContext();
  return (
    <View style={styles.block}>
      <Text style={styles.text}>Hello, {user.displayName}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  block: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 24,
  },
});

export default MainTab;