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?