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;