I am developing a React Native app using Expo.

In the “/src/app/(user)/index.tsx” file, I can see a header title “Home” and a headerRight component. And when I navigate to PracticeIndex, the header title is “book”.

I would like to change the header title in PracticeIndex to “Practice” and make the headerRight component (as there is no headerRight in PracticeIndex).

Below is my code. Could you please advise me on how to achieve this?

Thank you.

/src/app/(user)/_layout.tsx

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

  return (
    <Stack>
      <Stack.Screen
        name="index"
        options={{
          headerShown: true,
          headerRight: () => (
            <Link href="/modal" asChild>
              <Pressable>
                {({ pressed }) => (
                  <FontAwesome5
                    name="user-edit"
                    size={20}
                    color={Colors[colorScheme ?? "light"].text}
                    style={{ marginRight: 15, opacity: pressed ? 0.5 : 1 }}
                  />
                )}
              </Pressable>
            </Link>
          ),
        }}
      />
    </Stack>
  );
}

/src/app/(user)/index.tsx

export default function index() {
  const router = useRouter();

  const onPracticeClick = () => {
    router.push("/(user)/book/");
  };

  return (
    <View style={styles.container}>
      <Stack.Screen options={{ title: "Home" }} />
      <ImgBackground />
      <View style={{ width: "100%", height: "40%", padding: 20 }}>
        <View style={styles.cardContainer}>
            <Text style={{ fontSize: 20, fontWeight: "bold" }}>
              Hello
            </Text>
        </View>
      </View>
      <View style={{ width: "100%", height: "60%", padding: 20 }}>
        <CustomButton
          text="Practice"
          onPress={onPracticeClick}
          bgColor="#fff"
          fgColor="#111"
          bdColor="#111"
        />
      </View>
    </View>
  );
}

/src/app/(user)/book/_layout.tsx

import { Stack } from "expo-router";

export default function BookStack() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{ headerShown: false }} />
    </Stack>
  );
}

/src/app/(user)/book/index.tsx

import { View, Text } from "react-native";
import React from "react";

const PracticeIndex = () => {
  return (
    <View>
      <Text>PracticeIndex</Text>
    </View>
  );
};

export default PracticeIndex;