I'm using Typescript and since this question is more theoretical, I will only post the necessary code.I have a material top tab navigation looking like this:
TabNavigator.tsx
const Tab = createMaterialTopTabNavigator<GameTabParamList>();const GameTabs: FC = () => { return (<Tab.Navigator initialRouteName={Screens.HOME_SCREEN} tabBarPosition="bottom" screenOptions={{ lazy: true, tabBarStyle: {display: 'none'}, swipeEnabled: false, // This should be equal to props that are found in the multiple screens }} backBehavior='none'><Tab.Screen name={Screens.AVAILABLE_PRIZES_SCREEN} component={AvailablePrizesScreen} /><Tab.Screen name={Screens.HOME_SCREEN} component={HomeScreen} /><Tab.Screen name={Screens.WON_PRIZES_SCREEN} component={WonPrizesScreen} /></Tab.Navigator> );};
HomeScreen.txs
const HomeScreen: FC = () => { const { isInitialized, isLoading, adShowing, playGame, localCount, isAnimationPlaying, winAnimationRef, handleWinAnimationFinished, isFlashAnimationPlaying, navToSettingsScreen, displayPrizeId, displayPrizeTitle, displayPrizeDesc, displayPrizeTier, displayPrizeType, isShowingPrize, handleHidePrize, handleFlashAnimationFinished, navigation, } = useHomeScreen();...}
The goal is to make the swipeEnabled equal to the HomeScreen's isloading
and isInitialized
variables. So it should look like this:
TabNavigator.tsx
screenOptions={{ lazy: true, tabBarStyle: {display: 'none'}, swipeEnabled: !isLoading || !isInitialized, // <-- how do I get this here? }}
The problem is, how do I get the isLoading and isInitialized variables from the HomeScreen
component to the GameTabs
component?