Child count may be incorrect after adding drawer navigator

[saimarshadsaim31]

Context

Hey everyone, I'm facing a weird problem. I had following two major requirements in my app:

1. User should be able to reset the onboarding flow from within the app.
2. App should have a drawer navigator along with the tab navigator.

I solved the first step, by simply using the useIsFirstTime hook by manually setting the value to true like this:

<Item
  text="settings.resetFlow"
  icon={<Share color={iconColor} />}
  onPress={() => {
    setIsFirstTime(true);
  }}
/>

When I did this every-thing was working fine and the user was taken back to onboarding screen everytime the option was pressed. But when I did this I was using the tab navigator which comes with the template.

For the second step, I installed the drawer navigator and wrapped the tabs navigator within it like this:
app/_layout.tsx:

export default function RootLayout() {
  return (
    <Providers>
      <Stack>
        <Stack.Screen name="(drawer)" options={{ headerShown: false }} />
        <Stack.Screen name="onboarding" options={{ headerShown: false }} />
        <Stack.Screen name="login" options={{ headerShown: false }} />
      </Stack>
    </Providers>
  );
}

and then placed the (app) folder with the (drawer) folder with a layout file like this:
app/(drawer)/_layout.tsx:

/* eslint-disable react/no-unstable-nested-components */
import { Redirect, SplashScreen } from 'expo-router';
import { Drawer } from 'expo-router/drawer';
import React, { useCallback, useEffect } from 'react';

import { useAuth, useIsFirstTime } from '@/lib';

export default function DrawerLayout() {
  const status = useAuth.use.status();
  const [isFirstTime] = useIsFirstTime();
  const hideSplash = useCallback(async () => {
    await SplashScreen.hideAsync();
  }, []);
  useEffect(() => {
    if (status !== 'idle') {
      setTimeout(() => {
        hideSplash();
      }, 1000);
    }
  }, [hideSplash, status]);

  if (isFirstTime) {
    return <Redirect href="/onboarding" />;
  }
  if (status === 'signOut') {
    return <Redirect href="/login" />;
  }
  return (
    <Drawer>
      <Drawer.Screen
        name="(app)"
        options={{
          headerTitle: 'Feed',
          headerTitleAlign: 'center',
          headerShown: true,
        }}
      />
    </Drawer>
  );
}

The Problem

The Drawer and the tabs are working properly but now when I reset the onboarding flow I get this error:

Also an important thing to not is that it works without any issue on expo go, but development build and APK crashes...

Is there something I am doing wrong how can I solve this any help would be appreciated. TIA

[yjose]

To make sure i can help can you provide a overview of your app folder tree -L 3

[saimarshadsaim31]

Hey @yjose thanks for the reply. After doing some research I found out that it was the issue with react-native-screens according to this https://github.com/software-mansion/react-native-screens/issues/2491. I had @4.0.0 in my project upgraded to @4.2.0, which fixed the problem.