title: React navigation v5 + firebase authentication
body: <p>I'm trying to achieve authentication with react navigation v5, with v4 and switchNavigator my code was working but now I understand the problem I got but don't know how to solve it. </p>
  
  <p>This functional component is rendered in the first time app is opened and determinate what navigator show. This works as expected showing the authnav or the homenav when the app is opened the problem appears when I try to login(from authnav) and then navigate to 'Home' screen that is inner homenav but I understand that IsAuth is not re-rendered so I got this error, so my question is how to make IsAuth render when there are changes.</p>
  
  <p><a href="https://i.stack.imgur.com/EitJf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EitJf.png" alt="enter image description here"></a>
  First component rendered</p>
  
  <pre><code>export type isAuthProps = ThemedComponentProps &amp; ComponentProps;
  const IsAuth: React.FC&lt;RoutesProps&gt; = (props: isAuthProps) =&gt; {
      let navigator: any;
      const { themedStyle, theme, ...rest } = props;
      const [user, setUser] = useState(null);
      const [loading, setLoading] = useState(true);
      const onAuthStateChanged = (currentUser: any) =&gt; {
          console.log("TCL: onAuthStateChanged -&gt; currentUser", currentUser);
          if (!currentUser) {
              setUser(currentUser);
              setLoading(false);
          } else {
              if (!currentUser.emailVerified) {
                  console.log("TCL: onAuthStateChanged -&gt; currentUser.emailVerified", currentUser.emailVerified)
                  setUser(null);
                  setLoading(false);
              } else {
                  setUser(currentUser);
                  setLoading(false);
              }
          }
      };
      useEffect(() =&gt; {
          NavigationService.setNavigator(navigator);
          const subscriber = firebase.auth().onAuthStateChanged(onAuthStateChanged);
          return () =&gt; {
              subscriber();
          }; // unsubscribe on unmount
      }, []);
  
      if (loading) {
          return (&lt;View style={themedStyle.container} &gt;
              &lt;LoadingIndicator size='large' /&gt;
          &lt;/View&gt;);
      }
  
      return (
          &lt;NavigationContainer theme={navigatorTheme} ref={(nav: any) =&gt; {
              navigator = nav;
          }}
          &gt;
              {user ? &lt;HomeTabsNavigator /&gt; : &lt;AuthNavigator /&gt;}
          &lt;/NavigationContainer&gt;
      );
  };
  </code></pre>
  
  <p>Navigators</p>
  
  <pre><code>export const HomeTabsNavigator = (): React.ReactElement =&gt; {
      return (
          &lt;BottomTab.Navigator
              screenOptions={TabBarVisibleOnRootScreenOptions}
              initialRouteName={'Home'}
              tabBar={props =&gt; &lt;HomeBottom {...props} /&gt;}&gt;
              &lt;BottomTab.Screen name='Home' component={LayoutsNavigator} /&gt;
              &lt;BottomTab.Screen name='Post' component={PostNavigator} /&gt;
              &lt;BottomTab.Screen name='Favorites' component={FavoritesNavigator} /&gt;
              &lt;BottomTab.Screen name='Themes' component={ThemesNavigator} /&gt;
              &lt;BottomTab.Screen name='Settings' component={SettingsNavigator} /&gt;
          &lt;/BottomTab.Navigator&gt;
      )
  };
  
  export const AuthNavigator = () =&gt; {
      return (
          &lt;Stack.Navigator headerMode='none'&gt;
              &lt;Stack.Screen name='Signin' component={SigninContainer}&gt;&lt;/Stack.Screen&gt;
              &lt;Stack.Screen name='Signup' component={SignupContainer}&gt;&lt;/Stack.Screen&gt;
              &lt;Stack.Screen name='ForgotPassword' component={ForgotPasswordContainer}&gt;&lt;/Stack.Screen&gt;
              &lt;Stack.Screen name='SigninGoogle' component={SigninGoogleContainer}&gt;&lt;/Stack.Screen&gt;
          &lt;/Stack.Navigator&gt;
      );
  };
  
  </code></pre>
  
  <p>My signIn Button call this saga</p>
  
  <pre><code>export function* signinSaga(action: Signin) {
      try {
          const payload = action.payload;
          const response = yield firebase.auth().signInWithEmailAndPassword(payload.email, payload.password);
          const user = response.user;
          const token = yield firebase.auth().currentUser?.getIdToken();
          yield put(new SigninSuccess({ token, uid: user.uid }));
          yield NavigationService.navigate('Explore');
          yield showMessageSuccess({ code: 'Successfully login', message: 'Welcome to XXXX!' });
      } catch (e) {
          const error = errorParser(e);
          yield put(new SigninFail(error));
          yield showMessageDanger(error);
      }
  }
  </code></pre>