Reputation: 1
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
Upvotes: 0
Views: 25