react-nativeexpo

unable to remove the header in expo react native

I was trying to create a signup page. I Donot want to show the header in signup page. the file structure is app

  1. (admin)
  2. (auth)
  3. layout
  4. index

the layout file content is given below

import { Stack } from "expo-router";
const RootLayout = () => {
return (
<Stack>
<Stack.Screen name="index" options={{ headerShown: false }} />
<Stack.Screen name="(admin)" options={{ headerShown: false }} />
<Stack.Screen name="(auth)" options={{ headerShown: false }} />
</Stack>
);
};
export default RootLayout;

The header is not showing in (admin) and index.tsx. But it is visible in (auth) group. I was trying to remove the header from signup page. But the header shows as "(auth)/(signup)/index". How can I remove the header.

Solution

  • You can try adding the following in the JSX for the sign-up screen since it is nested within the (auth) folder:

    <Stack.Screen options={{headerShown: false}} />

    Another option could be to define a layout for the (auth) folder and hide the header over there (as you have done for the root layout).