[3.0.0 beta 2] Expo stack navigation warning issue when using withUnistyles (low priority)

[samducker]

Description

So in my tabs layout I am using the component from expo (see docs).

I utilise withUnistyles to get my theme inside of a stack screen. This produces the warning below.

 (NOBRIDGE) WARN  Layout children must be of type Screen, all other children are ignored. To use custom children, create a custom <Layout />. Update Layout Route at: "app/(auth)/_layout" [Component Stack]

My implementation

import typography from '@/constants/typography';
import { handlePaywallClose } from '@/features/paywall/services';
import { useModalScreenOptions } from '@/hooks/use-modal-screen-options';
import { Ionicons } from '@expo/vector-icons';
import { Stack } from 'expo-router';
import { useTranslation } from 'react-i18next';
import { TouchableOpacity } from 'react-native';
import { withUnistyles } from 'react-native-unistyles';

const ThemedIonicons = withUnistyles(Ionicons, theme => ({
  color: theme.colors.text['900'],
}));

const ThemedStack = withUnistyles(Stack.Screen, theme => ({
  options: {
    headerStyle: {
      backgroundColor: theme.colors.surface['000'],
    },
    headerTitleStyle: {
      ...typography.labels.labelLarge,
      color: theme.colors.text['900'],
    },
  },
}));

export default function AuthLayout() {
  const modalScreenOptions = useModalScreenOptions();
  const { t } = useTranslation();

  return (
    <Stack>
      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
      <Stack.Screen
        name={'log-meal'}
        options={{ headerShown: false, animation: 'slide_from_bottom' }}
      />
      <Stack.Screen
        name="settings/index"
        options={{
          ...modalScreenOptions,
          headerTitle: 'Settings',
        }}
      />
      <Stack.Screen
        name="meal/[id]"
        options={{
          headerShown: false,
          animation: 'slide_from_bottom',
          presentation: 'modal',
        }}
      />
      <Stack.Screen name="calendar" options={{ ...modalScreenOptions, headerTitle: 'Calendar' }} />
      <Stack.Screen name="onboarding" options={{ headerShown: false }} />
      <ThemedStack
        name="paywall/tabs"
        options={{
          headerShown: true,
          headerTitle: t('paywall.headerTitle'),
          headerBackVisible: false,
          headerRight: props => {
            return (
              <TouchableOpacity {...props} onPress={handlePaywallClose}>
                <ThemedIonicons name="close" size={24} />
              </TouchableOpacity>
            );
          },
        }}
      />
      <Stack.Screen
        name="(aux)/privacy-policy"
        options={{
          ...modalScreenOptions,
          headerTitle: t('welcome.screens.privacy-policy.title'),
        }}
      />
      <Stack.Screen
        name="(aux)/terms-of-service"
        options={{
          ...modalScreenOptions,
          headerTitle: t('welcome.screens.terms-of-use.title'),
        }}
      />
      <Stack.Screen
        name="job/[id]"
        options={{
          title: '',
          ...modalScreenOptions,
        }}
      />
    </Stack>
  );
}

If this is merely creating a warning and causing no other issues this is obviously low priority, and I'm not sure whether it should be fixed on the expo side or the unistyles side.

At the moment I am having some other errors which I believe are unrelated, however I will update this ticket if I find the link.

Steps to Reproduce

1. Start a new expo project on the latest version
2. Create a layout with stack navigation expo component utilising your theme and withUnistyles
3. See console warnings when navigating

Snack or Repository Link (Optional)

No response

Unistyles Version

3.0.0 beta 2

React Native Version

0.76.5

Platforms

Android, iOS

Expo

Yes

[jpudysz]

Hmm, we're not wrapping it in anything:

react-native-unistyles/src/core/withUnistyles/withUnistyles.native.tsx

Line 94 in 7a5fc85

return <NativeComponent {...finalProps as TProps} ref={ref} />

Maybe the check is done by comparing children's names? 🤔
Not sure if I can do anything about it 😭

[samducker]

That makes sense, I'm just working on migrating from createUnistylesComponent -> withUnistyles component.

If I don't find an obvious solution to this issue, I'll make a ticket in expo repository.

[jpudysz]

Ok I've checked internals, and I know why is that happening. We will patch it in the next release.