Как создать навигацию Screen и BottomTabs в связке?

Question

[razrabotzik]

Постигаю азы react native, собственно возник вопрос при создании роутера. Как связать 2 разных типа роутинга. Изначально я сделал все вот так

const Stack = createNativeStackNavigator();

const AppNavigation = () => {
	return (
		<NavigationContainer>
			<Stack.Navigator initialRouteName={CATALOG}>
				<Stack.Group>
					<Stack.Screen key={CATALOG} name={CATALOG} component={component} />
					<Stack.Screen key={PROFILE} name={PROFILE} component={component} />
					<Stack.Screen key={CART} name={CART} component={component} />
					<Stack.Screen key={CONTACTS} name={CONTACTS} component={component} />
					<Stack.Screen key={STOCK} name={STOCK} component={component} />
				</Stack.Group>
				<Stack.Group screenOptions={{ presentation: 'modal' }}>
					<Stack.Screen key={GIFT} name={GIFT} component={component} />
				</Stack.Group>
			</Stack.Navigator>
		</NavigationContainer>
	)
}

const App = () => {
	return (
		<AppNavigation />
	);
};

Но теперь дошел до нижней навигации, которая частично копирует то что через Stack задается и не понимаю как Tab прикрутить к этому (в табах нужно отобразить 4 первых скрина). С одной стороны табы можно съимитировать через View + Pressable + Text, но насколько этот вариант верен, не столкнусь ли я потом с какими-то траблами? С другой стороны я могу на табах изначально попробовать сделать, но тогда мне нужно будет шапку слепить получается из базовых компонентов + я не понимаю как скрыть допустим не нужные скрины (STOCK и модалку GIFT)

Поделитесь как вы решаете подобные ситуации.

p.s. табы это про
const Tab = createBottomTabNavigator();

Answer 1

[Kirill Makarov]

<Stack.Group screenOptions={{ presentation: 'modal' }}>
          <Stack.Screen name={bottomtab} component={componentBottomTab} />
<Stack.Screen key={GIFT} name={GIFT} component={component} />
 </Stack.Group>

А в боттом таб создаёшь обычный боттомстак согласно документации