How to achieve this navigation layout in React native ? Two different navigators on the same screen

Viewed 8

I have to implement a prototype and I'm stuck on how to implement the navigation. Here is an image of the expected result:

what I want

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>
  )
}

Result: result

0 Answers
Related