Client screen showing briefly when admin user signs in to app

I have two users, one is admin and the other client, so when I login as admin I want to display admin screen immediately and also when I login as client display client screen but login as admin I still can see client screen for few seconds then take me to the admin screen and when I logout I go back to client screen not login screen

Login screen code:

const SignIn = ({navigation}) => {

    const [email, setEmail] = React.useState('')
    const [password, setPassword] = React.useState('')

      useEffect(()=>{
        const unsubscribe = auth.onAuthStateChanged(user =>{
            if(user){
                navigation.navigate('Tabs')
                setEmail()
                setPassword()
            }
        })
        return unsubscribe
    },[])

App screen code:

const  App = ({navigation}) => {

      const [user, setUser] = React.useState(null) // This user
      const [users, setUsers] = React.useState([]) // Other Users
      
    
      useEffect(() => {
          const unsubscribe = auth.onAuthStateChanged(async user => {
              if (user) {
    
                  const userData = await db.collection("users").doc(user.uid).get();
                  setUser(userData.data());
               
                  
              } else {
                  setUser(null);
              }
          });
          return () => unsubscribe();
      }, [])
    
    
     
    
      
      return (
        <NavigationContainer independent={true}>
          {user?.role === 'admin'? (<AdminNavi />):(<UserNavi/>)}
        </NavigationContainer>
      );
    }
    
    export default App;

I feel like I'm not structure the code correctly, because If you look at app screen code I'm repeating the use Effect again and I put the condition between Container Navigator. Please guys anyone of you can Re-structure my code is highly appreciated.

My best guess is that those few seconds are when you're loading the user data from Firestore. This may take some time, and you'll need to decide what you want to display during that time.

The simplest fix is to set the user to null while you're loading their data from Firestore:

  useEffect(() => {
      const unsubscribe = auth.onAuthStateChanged(async user => {
          if (user) {
              setUser(null); // 👈

              const userData = await db.collection("users").doc(user.uid).get();
              setUser(userData.data());
          } else {
              setUser(null);
          }
      });
      return () => unsubscribe();
  }, [])

This will work, but causes the app to temporarily show the login screen while you're loading the data. If that is not acceptable, you'll want to introduce another state variable for while you're loading the user profile from Firestore:

  useEffect(() => {
      const unsubscribe = auth.onAuthStateChanged(async user => {
          if (user) {
              setLoadingUser(true); // 👈

              const userData = await db.collection("users").doc(user.uid).get();
              setLoadingUser(false); // 👈
              setUser(userData.data());
          } else {
              setUser(null);
          }
      });
      return () => unsubscribe();
  }, [])

And then you'd use the loadUser state property to render a "Loading user profile..." type indicator.