useUnistyles theme not updating when delaying layout render in expo

[archer3cl]

On a fresh Expo + Unistyles setup, I’m running into an issue when conditionally delaying the rendering of a layout (for example, waiting for an API call before rendering).

If I early-return from the layout component: if (!isReady) return null; any useUnistyles usage inside any layout stops reacting to theme updates. Updating the theme no longer causes styles derived from useUnistyles to re-compute.

Notably:

• StyleSheet.create styles do not exhibit this behavior.
• If I remove the early return and always render the layout, useUnistyles stays in sync and updates correctly when the theme changes.

Is this expected behavior (e.g. a lifecycle/subscription constraint of useUnistyles), or am I misusing the hook when conditionally rendering the layout?

import { SplashScreen, Stack } from 'expo-router';
import { useEffect, useState } from 'react';
import { useUnistyles } from 'react-native-unistyles';

SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
  const [isReady, setIsReady] = useState(false);

  const { theme } = useUnistyles();

  useEffect(() => {
    if (!isReady) {
      setTimeout(() => {
        setIsReady(true);
      }, 1500);
    }
    if (isReady) SplashScreen.hide();
  }, [isReady]);

  if (!isReady) return null;

  return (
    <Stack>
      <Stack.Screen
        name="index"
        options={{
          headerTitle: 'Home',
          headerStyle: { backgroundColor: theme.colors.base100 },
        }}
      />
    </Stack>
  );
}

[jpudysz]

That's super weird, because useUnistyles is a hook with listener and this is just a regular React flow.

Can you create an issue with repro so I can debug?

[archer3cl]

Got the repo ready and updated the discussion with a demo video with the issue.
https://github.com/archer3cl/unistyles-issue

[jpudysz]

Hey, I'm back from vacation. Can you create a github issue with this repro? 🙏🏼