I have to implement a prototype and I'm stuck on how to implement the navigation. Here is an image of the expected result:
The tabs on the left have a classic tab behavior and I don't have any problem to implement them. However, the 2 icons on the left use a stack navigation, the screen comes from the right and is put on top of the actual screen (and it's available on Calendar and Feed tab).
I tried to make a custom tabBar with my tab bar item and another navigator on the right but I have the error of multiple navigators on the same screen.
I use the ignite starter for development.
Here is the navigator code:
import React from "react"
import { HomeFeedScreen } from "../../screens/home-feed/home-feed-screen"
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs"
import { HomeCalendarScreen } from "../../screens/home-calendar/home-calendar-screen"
import { color } from "../../theme"
import { Text, TextStyle, ViewStyle } from "react-native"
export type HomeTopTabNavigatorParamList = {
feed: undefined
calendar: undefined
}
const TAB_BAR: ViewStyle = {
backgroundColor: color.background,
}
const TAB_ITEM: ViewStyle = {
width: "auto",
}
const TAB_LABEL: TextStyle = {
color: color.palette.white,
fontSize: 14,
textTransform: "capitalize",
}
const TopTab = createMaterialTopTabNavigator<HomeTopTabNavigatorParamList>()
export const HomeTopTabNavigator = () => {
// const insets = useSafeAreaInsets()
// const { isGuest } = useStores()
return (
<TopTab.Navigator
style={{ backgroundColor: color.palette.orange }}
screenOptions={({ route }) => ({
tabBarShowLabel: true,
tabBarStyle: TAB_BAR,
tabBarItemStyle: TAB_ITEM,
tabBarLabel: ({ focused }) => {
return (
// <View>
<Text
style={{
...TAB_LABEL,
fontWeight: focused ? "bold" : "normal",
}}
>
{route.name}
</Text>
// </View>
)
},
})}
>
<TopTab.Screen name="feed" component={HomeFeedScreen} />
<TopTab.Screen name="calendar" component={HomeCalendarScreen} />
</TopTab.Navigator>
)
}

