title: How do I render different Screens of an iOS app with React Native and Firebase/Firestore based on a user's role (provider or customer) after login?
body: <p>I'm creating an app with React Native and Firebase/Firestore, and I need the app to show different screens based on the role of the user's account (Provider or Customer). After a user logs into their account, the app should check their role data from Firebase and render a different screen based on it. So the app will first evaluate the condition to see if they're logged in. Then it will evaluate the condition to see if they're a Provider or Customer and then render the proper screen (either the Login, ProviderHomeScreen, or CustomerHomeScreen).</p>
  <p>I've tried to use the condition:</p>
  <pre><code>const user = firebase.auth().currentUser;
  var role;
  
    if (user != null) {
      role = user.role;
      console.log(role);
    }
  
    if (isLoggedIn) {
      if (user.role === 'provider') {
        return (
          &lt;NavigationContainer&gt;
            &lt;ProviderStack.Navigator&gt;
              &lt;Stack.Navigator&gt;
                &lt;Stack.Screen
                  name={'Provider Home'}
                  component={ProviderHomeTabNavigator}
                  options={{
                    headerShown: false,
                  }}
                /&gt;
              &lt;/Stack.Navigator&gt;
            &lt;/ProviderStack.Navigator&gt;
          &lt;/NavigationContainer&gt;
        );
      } else {
        return (
          &lt;NavigationContainer&gt;
            &lt;CustomerStack.Navigator&gt;
              &lt;Stack.Screen
                name={'Customer Home'}
                component={CustomerHomeTabNavigator}
                options={{
                  headerShown: false,
                }}
              /&gt;
              &lt;Stack.Screen
                name={'Search'}
                component={SearchScreen}
                options={{
                  title: 'Search Availa Providers',
                }}
              /&gt;
            &lt;/CustomerStack.Navigator&gt;
          &lt;/NavigationContainer&gt;
        );
      }
    }
    return (
      &lt;NavigationContainer&gt;
        &lt;Stack.Navigator&gt;
          &lt;Stack.Screen name=&quot;Login&quot; component={LoginScreen} /&gt;
          &lt;Stack.Screen
            name=&quot;Customer Sign-up&quot;
            component={CustomerRegistrationScreen}
          /&gt;
          &lt;Stack.Screen
            name=&quot;Provider Sign-up&quot;
            component={ProviderRegistrationScreen}
          /&gt;
        &lt;/Stack.Navigator&gt;
      &lt;/NavigationContainer&gt;
  </code></pre>
  <p>but when I console.log the user.role, it says undefined in the console, and the app just renders the CustomerHomeScreen with the CustomerHomeTabNavigator.
  Please help me successfully access the role data of the currently signed-in user from Firestore and create conditions to render the proper screens for the proper role of the users.</p>
  <p>Right now, this is what my code looks like for App.js:</p>
  <pre><code>import 'react-native-gesture-handler';
  import React, {useEffect, useState} from 'react';
  import {View, Text} from 'react-native';
  import {NavigationContainer} from '@react-navigation/native';
  import {createNativeStackNavigator} from '@react-navigation/native-stack';
  import {createStackNavigator} from '@react-navigation/stack';
  import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
  import CustomerHomeScreen from '../Availa/src/Customer/screens/Home/index';
  import Fontisto from 'react-native-vector-icons/Fontisto';
  import FontAwesome from 'react-native-vector-icons/FontAwesome';
  import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
  import Feather from 'react-native-vector-icons/Feather';
  import AntDesign from 'react-native-vector-icons/AntDesign';
  import Ionicons from 'react-native-vector-icons/Ionicons';
  import {firebase} from '../Availa/src/firebase/config';
  import 'firebase/auth';
  import firestore from '@react-native-firebase/firestore';
  import 'firebase/firestore';
  import 'react-native-gesture-handler';
  Fontisto.loadFont();
  FontAwesome.loadFont();
  Feather.loadFont();
  AntDesign.loadFont();
  Ionicons.loadFont();
  import SearchScreen from '../Availa/src/Customer/screens/SearchScreen/index';
  import ProfileScreen from '../Availa/src/Customer/screens/ProfileScreen/index';
  
  import {
    LoginScreen,
    CustomerRegistrationScreen,
    ProviderRegistrationScreen,
  } from './src/screens';
  import 'firebase/auth';
  import {decode, encode} from 'base-64';
  if (!global.btoa) {
    global.btoa = encode;
  }
  if (!global.atob) {
    global.atob = decode;
  }
  const ProviderStack = createNativeStackNavigator();
  const ProviderStackScreen = () =&gt; {
    return (
      &lt;ProviderStack.Navigator&gt;
        &lt;Stack.Navigator&gt;
          &lt;Stack.Screen
            name={'Home'}
            component={ProviderHomeTabNavigator}
            options={{
              headerShown: false,
            }}
          /&gt;
        &lt;/Stack.Navigator&gt;
      &lt;/ProviderStack.Navigator&gt;
    );
  };
  const ProviderTab = createBottomTabNavigator();
  const ProviderHomeTabNavigator = () =&gt; {
    return (
      &lt;Tab.Navigator
        tabBarOptions={{
          activeTintColor: '#007FFF',
        }}&gt;
        &lt;Tab.Screen
          name={'Provider'}
          component={ProviderHomeScreen}
          options={{
            tabBarIcon: ({color}) =&gt; (
              &lt;Fontisto name=&quot;home&quot; size={25} color={color} /&gt;
            ),
          }}
        /&gt;
        &lt;Tab.Screen
          name={'My List'}
          component={ProviderHomeScreen}
          options={{
            tabBarIcon: ({color}) =&gt; (
              &lt;FontAwesome name=&quot;heart-o&quot; size={25} color={color} /&gt;
            ),
          }}
        /&gt;
        &lt;Tab.Screen
          name={'Appointments'}
          component={ProviderHomeScreen}
          options={{
            tabBarIcon: ({color}) =&gt; (
              &lt;AntDesign name=&quot;calendar&quot; size={25} color={color} /&gt;
            ),
          }}
        /&gt;
        &lt;Tab.Screen
          name={'Messages'}
          component={ProviderHomeScreen}
          options={{
            tabBarIcon: ({color}) =&gt; (
              &lt;Feather name=&quot;message-square&quot; size={25} color={color} /&gt;
            ),
          }}
        /&gt;
        &lt;Tab.Screen
          name={'Profile'}
          component={ProfileScreen}
          options={{
            tabBarIcon: ({color}) =&gt; (
              &lt;Ionicons name=&quot;person-circle-outline&quot; size={25} color={color} /&gt;
            ),
          }}
        /&gt;
      &lt;/Tab.Navigator&gt;
    );
  };
  
  const CustomerStack = createNativeStackNavigator();
  const CustomerStackScreen = () =&gt; {
    return (
      &lt;CustomerStack.Navigator&gt;
        &lt;Stack.Navigator&gt;
          &lt;Stack.Screen
            name={'Home'}
            component={CustomerHomeTabNavigator}
            options={{
              headerShown: false,
            }}
          /&gt;
        &lt;/Stack.Navigator&gt;
      &lt;/CustomerStack.Navigator&gt;
    );
  };
  const Tab = createBottomTabNavigator();
  const CustomerHomeTabNavigator = () =&gt; {
    return (
      &lt;Tab.Navigator
        tabBarOptions={{
          activeTintColor: '#1cd478',
        }}&gt;
        &lt;Tab.Screen
          name={'Home'}
          component={CustomerHomeScreen}
          options={{
            tabBarIcon: ({color}) =&gt; (
              &lt;Fontisto name=&quot;home&quot; size={25} color={color} /&gt;
            ),
          }}
        /&gt;
        &lt;Tab.Screen
          name={'My List'}
          component={CustomerHomeScreen}
          options={{
            tabBarIcon: ({color}) =&gt; (
              &lt;FontAwesome name=&quot;heart-o&quot; size={25} color={color} /&gt;
            ),
          }}
        /&gt;
        &lt;Tab.Screen
          name={'Appointments'}
          component={CustomerHomeScreen}
          options={{
            tabBarIcon: ({color}) =&gt; (
              &lt;AntDesign name=&quot;calendar&quot; size={25} color={color} /&gt;
            ),
          }}
        /&gt;
        &lt;Tab.Screen
          name={'Messages'}
          component={CustomerHomeScreen}
          options={{
            tabBarIcon: ({color}) =&gt; (
              &lt;Feather name=&quot;message-square&quot; size={25} color={color} /&gt;
            ),
          }}
        /&gt;
        &lt;Tab.Screen
          name={'Profile'}
          component={ProfileScreen}
          options={{
            tabBarIcon: ({color}) =&gt; (
              &lt;Ionicons name=&quot;person-circle-outline&quot; size={25} color={color} /&gt;
            ),
          }}
        /&gt;
      &lt;/Tab.Navigator&gt;
    );
  };
  
  const chooseScreen = user =&gt; {
    if (user?.role === 'provider') {
      ProviderStackScreen();
    }
    CustomerStackScreen();
  };
  
  const Stack = createStackNavigator();
  
  export default function App() {
    const [isLoggedIn, setIsLoggedIn] = useState(false);
    const [loading, setLoading] = useState(true);
    const firestore = firebase.firestore;
    const auth = firebase.auth;
    const user = firebase.auth().currentUser;
  
    // //to check if Firebase has been initialized
    if (!firebase.apps.length) {
      firebase.initializeApp(firebaseConfig);
    } else {
      firebase.app();
    }
  
    firebase.auth().onAuthStateChanged(user =&gt; {
      if (user != null) {
        setIsLoggedIn(true);
      } else {
        setIsLoggedIn(false);
      }
    });
  
    var role;
  
    if (user != null) {
      role = user.role;
      console.log(role);
    }
  
    if (isLoggedIn) {
      if (user.role === 'provider') {
        return (
          &lt;NavigationContainer&gt;
            &lt;ProviderStack.Navigator&gt;
              &lt;Stack.Navigator&gt;
                &lt;Stack.Screen
                  name={'Provider Home'}
                  component={ProviderHomeTabNavigator}
                  options={{
                    headerShown: false,
                  }}
                /&gt;
              &lt;/Stack.Navigator&gt;
            &lt;/ProviderStack.Navigator&gt;
          &lt;/NavigationContainer&gt;
        );
      } else {
        return (
          &lt;NavigationContainer&gt;
            &lt;CustomerStack.Navigator&gt;
              &lt;Stack.Screen
                name={'Customer Home'}
                component={CustomerHomeTabNavigator}
                options={{
                  headerShown: false,
                }}
              /&gt;
              &lt;Stack.Screen
                name={'Search'}
                component={SearchScreen}
                options={{
                  title: 'Search Availa Providers',
                }}
              /&gt;
            &lt;/CustomerStack.Navigator&gt;
          &lt;/NavigationContainer&gt;
        );
      }
    }
    return (
      &lt;NavigationContainer&gt;
        &lt;Stack.Navigator&gt;
          &lt;Stack.Screen name=&quot;Login&quot; component={LoginScreen} /&gt;
          &lt;Stack.Screen
            name=&quot;Customer Sign-up&quot;
            component={CustomerRegistrationScreen}
          /&gt;
          &lt;Stack.Screen
            name=&quot;Provider Sign-up&quot;
            component={ProviderRegistrationScreen}
          /&gt;
        &lt;/Stack.Navigator&gt;
      &lt;/NavigationContainer&gt;
    );
  </code></pre>
  <p>Also, this is what my LoginScreen.js looks like:</p>
  <pre><code>import React, {useState} from 'react';
  import {Image, Text, TextInput, TouchableOpacity, View} from 'react-native';
  import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
  import styles from './styles';
  import {firebase} from '../../firebase/config';
  
  export default function LoginScreen({navigation}) {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
  
    const onLoginPress = () =&gt; {
      firebase
        .auth()
        .signInWithEmailAndPassword(email, password)
        .then(response =&gt; {
          const uid = response.user.uid;
          const usersRef = firebase.firestore().collection('users');
          usersRef
            .doc(uid)
            .get()
            .then(firestoreDocument =&gt; {
              if (!firestoreDocument.exists) {
                alert('User does not exist');
                return;
              }
              const user = firestoreDocument.data();
              if (user.role === 'provider') {
                navigation.navigate('Provider Home', {user});
              } else {
                navigation.navigate('Customer Home', {user});
              }
            })
            .catch(error =&gt; {
              alert(error);
            });
        })
        .catch(error =&gt; {
          alert(error);
        });
    };
  
    return (
      &lt;View style={styles.container}&gt;
        &lt;KeyboardAwareScrollView
          style={{flex: 1, width: '100%'}}
          keyboardShouldPersistTaps=&quot;always&quot;&gt;
          &lt;Image
            style={styles.logo}
            source={require('../../../assets/availalogo.png')}
          /&gt;
          &lt;TextInput
            style={styles.input}
            placeholder=&quot;Email&quot;
            placeholderTextColor=&quot;#aaaaaa&quot;
            onChangeText={text =&gt; setEmail(text)}
            value={email}
            underlineColorAndroid=&quot;transparent&quot;
            autoCapitalize=&quot;none&quot;
          /&gt;
          &lt;TextInput
            style={styles.input}
            placeholderTextColor=&quot;#aaaaaa&quot;
            secureTextEntry
            placeholder=&quot;Password&quot;
            onChangeText={text =&gt; setPassword(text)}
            value={password}
            underlineColorAndroid=&quot;transparent&quot;
            autoCapitalize=&quot;none&quot;
          /&gt;
          &lt;TouchableOpacity style={styles.button} onPress={() =&gt; onLoginPress()}&gt;
            &lt;Text style={styles.buttonTitle}&gt;Log in&lt;/Text&gt;
          &lt;/TouchableOpacity&gt;
  
          &lt;Text style={styles.footerText}&gt;Don't have an account?&lt;/Text&gt;
          &lt;TouchableOpacity
            style={{
              backgroundColor: '#ED2939', //#118C4F?
              marginLeft: 30,
              marginRight: 30,
              marginTop: 20,
              height: 48,
              borderRadius: 5,
              alignItems: 'center',
              justifyContent: 'center',
            }}
            onPress={() =&gt; navigation.navigate('Provider Sign-up')}&gt;
            &lt;Text style={{color: 'white', fontSize: 16, fontWeight: 'bold'}}&gt;
              Sign Up as Availa Provider
            &lt;/Text&gt;
          &lt;/TouchableOpacity&gt;
          &lt;TouchableOpacity
            style={{
              backgroundColor: '#007FFF',
              marginLeft: 30,
              marginRight: 30,
              marginTop: 20,
              height: 48,
              borderRadius: 5,
              alignItems: 'center',
              justifyContent: 'center',
            }}
            onPress={() =&gt; navigation.navigate('Customer Sign-up')}&gt;
            &lt;Text style={{color: 'white', fontSize: 16, fontWeight: 'bold'}}&gt;
              Sign Up as Customer
            &lt;/Text&gt;
          &lt;/TouchableOpacity&gt;
        &lt;/KeyboardAwareScrollView&gt;
      &lt;/View&gt;
    );
  }
  </code></pre>