I have three main pages in my expo (sdk50) application and I want to nest some tabs inside the home route. I want the bottom navigation bar to show Home, Tests, and Settings. But if I nest a route inside Home folder it shows the nested files in the navigation bar. How can I hide it? I added the tabBarShowLabel: false property to try to hide it but it didn't work despite restarting the application to apply changes. Is there any other way to do it?
export default function TabsLayout() {
return (
<Tabs screenOptions={{ tabBarActiveTintColor: "#404ae3" }}>
<Tabs.Screen
name="home/index"
options={{
title: "Home",
tabBarIcon: ({ color }) => <FontAwesome name="home" size={28} color={color} />,
}}
/>
<Tabs.Screen
name="tests/index"
options={{
title: "Tests",
tabBarIcon: ({ color }) => <FontAwesome name="pencil" size={28} color={color} />,
}}
/>
<Tabs.Screen
name="settings/index"
options={{
title: "Settings",
tabBarIcon: ({ color }) => <FontAwesome name="cog" size={28} color={color} />,
}}
/>
<Tabs.Screen name="home/course/[id]" options={{ tabBarShowLabel: false }} />
</Tabs>
);
}