ExpoIntermediate

Tabs Navigation — bottom bar ও (group)

Main screens-এ bottom tabs — সেটআপ ও icon — বাংলায়।

4টি অংশবাংলা ভাষায়

অ্যাপের main screen (টুডে, সব কাজ) সাধারণত bottom tabs। (tabs) group-এ সেই layout:

app/(tabs)/_layout.tsxtsx

tsx

import { Tabs } from "expo-router";
import { ListTodo, CalendarDays } from "@expo/vector-icons";

export default function TabsLayout() {
  return (
    <Tabs screenOptions={{ tabBarActiveTintColor: "#2563eb" }}>
      <Tabs.Screen
        name="index"
        options={{
          title: "টুডে",
          tabBarIcon: ({ color, size }) => (
            <ListTodo size={size} color={color} />
          ),
        }}
      />
      <Tabs.Screen
        name="all"
        options={{
          title: "সব কাজ",
          tabBarIcon: ({ color, size }) => (
            <CalendarDays size={size} color={color} />
          ),
        }}
      />
    </Tabs>
  );
}

tabBarIcon — icon component ({ color, size }) props
tabBarActiveTintColor — active tab-এর রং
headerShown — top header চাই কিনা

(group) bracket কী

(tabs) parenthesis মানে folder URL-এ ঢুকবে না, শুধু nested layout তৈরি করে — / এবং /all এই দুই URL-ই tabs-এর ভেতরে render হয়।

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।