react native - onAuthChanged and useContext in layout expo app - Stack Overflow

admin管理员组

文章数量:1325231

I'm new to React and Expo and I'm having difficulties to implement a feature. I would like to have my user information and date on all my pages. To do so I have thought to use a context. So I made a context provider. This context is shared in the layout, one step above the 3 screens (tabs).

import {AppContext} from "../../context/AppContext";
import {Tabs} from 'expo-router';
import {FontAwesome, MaterialIcons} from '@expo/vector-icons';


export default function TabLayout() {

    return (

        <AppContext.Provider value={{
            userConnected: false,
            userID: "",
            date: new Date(),
            isLoading: false
        }}>
            <Tabs screenOptions={{
                tabBarActiveTintColor: 'blue',
                headerShown: false,
            }}>
                <Tabs.Screen
                    name="index"
                    options={{
                        title: 'Home',
                        tabBarIcon: ({color}) => <FontAwesome size={28} name="home" color={color}/>,
                    }}
                />
                <Tabs.Screen
                    name="mealLogs"
                    options={{
                        title: 'Meal Logs',
                        tabBarIcon: ({color}) => <MaterialIcons size={28} name="flatware" color={color}/>,
                    }}
                />
                <Tabs.Screen
                    name="settings"
                    options={{
                        title: 'Settings',
                        tabBarIcon: ({color}) => <FontAwesome size={28} name="cog" color={color}/>,
                    }}
                />
            </Tabs>
        </AppContext.Provider>

    );
}

But then in one of the pages I have the functions to login (I'm using Firebase) and I don't understand how I should handle the onAuthStateChange. Should it be on every page? Which is redundant I think, should it be in the layout? Should it be elsewhere?

Globally, I'm having difficulties on how to have data shared between multiple pages. Context seemed a good way to save data and make it accessible to all components but what should I use ? I tried local parameters but I think they are not easy to use as you have to specify them on each link.

Kind regards

本文标签： react nativeonAuthChanged and useContext in layout expo appStack Overflow