Firebase Authentication - How do I structure my react native app?

Question

hope you are all safe.

My app currently uses this way of navigating between screen using React Navigation 5.0:

Firstly, it does this when authentication state changes:

firebase.auth().onAuthStateChanged(user => {
            if (user) {
                this.setState({ isLoggedIn: true })
            } else {
                this.setState({ isLoggedIn: false })
            }
        })

And then, if the user is logged in then it will display the AppStack, else it will display AuthStack, which is the login and register screen.

render() {
        return (
            <NavigationContainer>
                {this.state.loading ? (<LoadingScreen />) : this.state.isLoggedIn ? (<AppStack />) : (<AuthStack />)}
            </NavigationContainer>
        )
    }
function AuthStack() {
    return (
        <Stack.Navigator>
            <Stack.Screen name="LoginReg" component={LoginScreen} options={{ headerShown: false }} />
        </Stack.Navigator>)
}

function AppStack() {
    return (
        <Tab.Navigator
            screenOptions={({ route }) => ({
                tabBarIcon: ({ focused, color, size }) => {
                    if (route.name === 'Order') {
                        return (
                            <IconWithBadge
                                name={focused ? 'ios-book' : 'ios-book'}
                                size={size}
                                color={color}
                            />
                        );
                    } else if (route.name === 'Map') {
                        return (
                            <Ionicons
                                name={focused ? 'md-globe' : 'md-globe'}
                                size={size}
                                color={color}
                            />
                        );
                    } else if (route.name === 'Profile') {
                        return (
                            <Ionicons
                                name={focused ? 'md-contact' : 'md-contact'}
                                size={size}
                                color={color}
                            />
                        )
                    } else if (route.name === 'Notifications') {
                        return (
                            <Ionicons
                                name={focused ? 'ios-notifications-outline' : 'ios-notifications-outline'}
                                size={size}
                                color={color}
                            />
                        )
                    }
                },
            })}
            tabBarOptions={{
                activeTintColor: 'orange',
                inactiveTintColor: 'gray',
            }}>
            <Tab.Screen name="Order" component={OrderScreen} />
            <Tab.Screen name="Map" component={MapScreen} />
            <Tab.Screen name="Profile" component={ProfileScreen} />
            <Tab.Screen name="Notifications" component={Notifications} />
        </Tab.Navigator>)
}

Now, when the user registers, firebase authenticates the user and logs him in automatically. So the register screen unmounts before I manage to send some data to Firestore regarding the users date of birth etc.

I checked many many articles and docs online and I still don't know what's the most efficient way of handling this case, in order that I can also run some code before the register screen unmounts.

Am I doing this correctly in general or am I completely wrong? Any help is much appreciated. Thank you in advance.

Answer 1

I think what you need to do is setState after doing async call

so you need to make an async request (can show a loading screen in the meantime) then once finished, you set the state to the new view.

Answer 2

You could just have a second property in your state, something like userDataSent , which also needs to be true in order to display the AppStack .

Then you only set userDataSent , once you know you've sent the data/received it on your server.

You can store userDataSent as true or something in AsyncStorage and retrieve it when the app loads from cold, and update your state automatically each time.

Probably the simplest way to adapt what you've got!