ExpoIntermediate

Stack Navigation — _layout.tsx ও router.push

root layout-এ Stack সেটআপ ও programmatic navigation — বাংলায়।

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

একক page যদিও stand-alone, layout (_layout.tsx) দিয়ে group-এর navigation আচরণ define করা হয়। Root layout-এ Stack:

app/_layout.tsxtsx

tsx

import { Stack } from "expo-router";

export default function RootLayout() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{ title: "টুডে" }} />
      <Stack.Screen name="task/[id]" options={{ title: "Task Detail" }} />
    </Stack>
  );
}

name — route file-এর নাম (folder সহ)
options — header title, headerShown, animation ইত্যাদি

Programmatic navigation — `router.push`:

components/TaskItem.tsxtsx

tsx

import { router } from "expo-router";

function openDetail(id) {
  router.push("/task/" + id);
}

কখন Stack

ধাপে ধাপে detail flow-এ Stack সেরা (back button, header)। Main screen-গুলো tabs-এ রাখুন — next lesson।

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