// app/(tabs)/__layout.tsx

import { Tabs } from "expo-router";
import React from "react";
import { Platform, Pressable, View, Text } from "react-native";

import { HapticTab } from "@/components/HapticTab";
import { IconSymbol } from "@/components/ui/IconSymbol";
import TabBarBackground from "@/components/ui/TabBarBackground";
import { Colors } from "@/constants/Colors";
import { useColorScheme } from "@/hooks/useColorScheme";

export default function TabLayout() {
  const colorScheme = useColorScheme();

  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: Colors[colorScheme ?? "light"].Primary,
        headerShown: false,
        tabBarButton: HapticTab,
        tabBarBackground: TabBarBackground,
        tabBarStyle: Platform.select({
          ios: {
            position: "absolute",
          },
          default: {},
        }),
      }}
    >
      <Tabs.Screen
        name="index"
        options={{
          title: "Home",
          tabBarIcon: ({ color }) => (
            <IconSymbol size={28} name="house.fill" color={color} />
          ),
        }}
      />
      <Pressable>
        <View>
          <Text>clickme</Text>
        </View>
      </Pressable>
      <Tabs.Screen
        name="journal"
        options={{
          title: "Journal",
          tabBarIcon: ({ color }) => (
            <IconSymbol size={28} name="paperplane.fill" color={color} />
          ),
        }}
      />
      <Tabs.Screen
        name="forums"
        options={{
          title: "Forums",
          tabBarIcon: ({ color }) => (
            <IconSymbol size={28} name="forum.fill" color={color} />
          ),
        }}
      />
    </Tabs>
  );
}

at the center of tabs i want to make a button and onclicking that button, a modal should open. i know thats not the way to do as it gives error

Layout children must be of type Screen, all other children are ignored. To use custom children, create a custom <Layout />. Update Layout Route at: "app/(tabs)/_layout" [Component Stack]

so how can i achieve my desired output

i tried creating a dummy navigation but this gives warning and doesn't renders the icon made using dummy tabs.screen.

// app/(tabs)/__layout.tsx

import { Tabs } from "expo-router";
import React from "react";
import { Platform, Pressable, View, Text } from "react-native";

import { HapticTab } from "@/components/HapticTab";
import { IconSymbol } from "@/components/ui/IconSymbol";
import TabBarBackground from "@/components/ui/TabBarBackground";
import { Colors } from "@/constants/Colors";
import { useColorScheme } from "@/hooks/useColorScheme";

export default function TabLayout() {
  const colorScheme = useColorScheme();

  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: Colors[colorScheme ?? "light"].Primary,
        headerShown: false,
        tabBarButton: HapticTab,
        tabBarBackground: TabBarBackground,
        tabBarStyle: Platform.select({
          ios: {
            position: "absolute",
          },
          default: {},
        }),
      }}
    >
      <Tabs.Screen
        name="index"
        options={{
          title: "Home",
          tabBarIcon: ({ color }) => (
            <IconSymbol size={28} name="house.fill" color={color} />
          ),
        }}
      />
      <Pressable>
        <View>
          <Text>clickme</Text>
        </View>
      </Pressable>
      <Tabs.Screen
        name="journal"
        options={{
          title: "Journal",
          tabBarIcon: ({ color }) => (
            <IconSymbol size={28} name="paperplane.fill" color={color} />
          ),
        }}
      />
      <Tabs.Screen
        name="forums"
        options={{
          title: "Forums",
          tabBarIcon: ({ color }) => (
            <IconSymbol size={28} name="forum.fill" color={color} />
          ),
        }}
      />
    </Tabs>
  );
}

at the center of tabs i want to make a button and onclicking that button, a modal should open. i know thats not the way to do as it gives error

Layout children must be of type Screen, all other children are ignored. To use custom children, create a custom <Layout />. Update Layout Route at: "app/(tabs)/_layout" [Component Stack]

so how can i achieve my desired output

i tried creating a dummy navigation but this gives warning and doesn't renders the icon made using dummy tabs.screen.

• reactjs
• react-native
• expo
• react-navigation
• native

1 Answer 1

The best approach (in my opinion) will be to create a custom tab bar component. You can pass this component as the tabBar prop.

_layout.tsx

...
return (
  <Tabs
    tabBar={props => <CustomTabBar {...props} />}
    screenOptions={{
      ...
    }}
  >
    ...
  </Tabs>
)
...

CustomTabBar.tsx

const CustomTabBar = ({ state, descriptors, navigation }) => {
  return (
    <View>
      ...
    </View>
  )
}

You can map the routes using state.route, and navigate to a tab using navigation.navigate