Warning in Expo Router - Layout children must be of type Screen, all other children are ignored

Question

When I was trying to make folder structure type routes and handling authentication in the main _layout.tsx file and then navigating to different folder route on the basis if the user is authenticated or not. code...

I am using clerk provider

The warning - Layout children must be of type Screen, all other children are ignored. To use custom children, create a custom . Update Layout Route at: "app/_layout"

Is there any way to solve this warning?

      <Stack>
        <SignedIn>
          <Stack.Screen
            name="(signin)"
            options={{
              headerShadowVisible: false,
              headerTitle: "",
              header: () => <View style={{ height: 50 }}></View>,
            }}
          />
        </SignedIn>
        <SignedOut>
          <Stack.Screen
            name="(signout)"
            options={{
              headerShadowVisible: false,
              headerTitle: "",
              header: () => <View style={{ height: 50 }}></View>,
            }}
          />
        </SignedOut>
      </Stack>

This is the code that I used

Answer 1

The Stack component expects Screen children components only, e.g. Stack.Screen.

Move your providers outside of the Stack component:

      <SignedIn>
        <SignedOut>
          <Stack>
            <Stack.Screen
                name="(signin)"
                options={{
                  headerShadowVisible: false,
                  headerTitle: "",
                  header: () => <View style={{height: 50}}></View>,
                }}
            />
            <Stack.Screen
                name="(signout)"
                options={{
                  headerShadowVisible: false,
                  headerTitle: "",
                  header: () => <View style={{height: 50}}></View>,
                }}
            />
          </Stack>
        </SignedOut>
      </SignedIn>