-
|
I have a root stack. Under the root stack, I have a Material Top Tab Navigator. The Material Top Tab Navigator has 4 screens. These 4 screens perform different operations using the same parameters. For example, fetching data or rendering other component variants. When navigating from the root stack to the Material Top Tab, is it possible to pass a parameter that will be valid across all 4 screens at once? For example: const OptionsTab = createMaterialTopTabNavigator({
screens: {
ScreenA:..., // requires the value passed from the home screen
ScreenB:..., // requires the value passed from the home screen
ScreenC:..., // requires the value passed from the home screen
ScreenD:..., // requires the value passed from the home screen
}
});
const HomeScreen = () =>{
const navigation = useNavigation()
const goToOptionsTab = () => {
navigation.navigate("OptionsTab", {value: 123})
}
return (
...
)
}
const rootStack = createNativeStackNavigator({
screens: {
Home: HomeScreen,
OptionsTab: OptionsTab,
},
});I'm wondering if I can solve this process with React Navigation without creating a context. If I use context, I don't think I can preserve these values based on the navigation history. Am I wrong? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 3 replies
-
What do you mean by this? The current recommended way is to use context: const OptionsRouteContext = React.createContext<TypeOfParams | undefined>(undefined)
const rootStack = createNativeStackNavigator({
screens: {
Home: HomeScreen,
OptionsTab: {
screen: OptionsTab,
layout: ({ route, children }) => {
return (
<OptionsRouteContext.Provider value={route.params}>
{children}
</OptionsRouteContext.Provider>
);
}
}
},
});And then use the context in child components. In React Navigation 8, you'll be able to do |
Beta Was this translation helpful? Give feedback.
-
I think I got the structure wrong. Now everything looks good but I didn't understand part of it. Is it possible to specify the type parameters of createMaterialTopTabNavigator? Or should I just ignore the type errors? |
Beta Was this translation helpful? Give feedback.
-
|
The type of params can't be inferred in |
Beta Was this translation helpful? Give feedback.
-
|
Tysm! |
Beta Was this translation helpful? Give feedback.
What do you mean by this?
The current recommended way is to use context:
And then use the context in child components.
In React Navigation 8, you'll be able to do
useRoute(…