ScopedTheme with custom wrapper, theme update inconsistent

[Anton-KF]

ScopedTheme partial updates with StyleSheet.create

Environment

• React Native: 0.81.5
• Expo: ~54.0.20
• Unistyles: 3.0.17
• React: 19.1.0
• Babel plugin: react-native-unistyles/plugin with root: 'src' and debug: true

Issue

When changing ScopedTheme name prop dynamically, only some StyleSheet.create styles update. Babel plugin detects all styles correctly, but nested components don't update. This test was done in Storybook. Same result in the app itself.

Test Component

// theme-test.tsx
export const ThemeTest = ({ theme = 'core1', context = 'default' }: ThemeTestProps) => (
  <ThemeWrapper theme={theme} context={context}>
    <ScrollView style={styles.container}>
      <View style={styles.content}>
        <Text style={styles.subtitle}>
          Theme: {theme} | Context: {context}
        </Text>
        <View style={styles.sampleBox} />
      </View>
    </ScrollView>
  </ThemeWrapper>
);

// theme-test.styles.ts
export const styles = StyleSheet.create(theme => ({
  container: {
    backgroundColor: theme.colors['bg/container/high'],
  },
  content: {
    backgroundColor: theme.colors['fg/accent'],
  },
  subtitle: {
    color: theme.colors.accentGreen100,
  },
  sampleBox: {
    backgroundColor: theme.colors['bg/container/accent'],
  },
}));

// theme-wrapper.tsx
export const ThemeWrapper = ({ children, theme, context }: ThemeWrapperProps) => {
  const resolvedTheme = resolveTheme(theme, context); // 'core1default', 'fireballsdefault', etc.
  return <ScopedTheme name={resolvedTheme}>{children}</ScopedTheme>;
};

Babel Plugin Debug Output

| src/components/temp/theme-test/theme-test.styles.ts: styles.container: [Theme]
| src/components/temp/theme-test/theme-test.styles.ts: styles.content: [Theme]
| src/components/temp/theme-test/theme-test.styles.ts: styles.subtitle: [Theme]
| src/components/temp/theme-test/theme-test.styles.ts: styles.sampleBox: [Theme]

✅ All styles detected correctly by Babel plugin

Observed Behavior

When changing theme via Storybook Controls (changes ThemeWrapper props):

• ✅ styles.container updates correctly
• ✅ styles.content updates correctly
• ✅ styles.subtitle updates correctly
• ❌ styles.sampleBox does NOT update (stays same color, should change between themes)

Steps Taken

1. ✅ Cleared Metro cache (npm start -- --reset-cache)
2. ✅ Enabled Babel plugin debug mode - confirmed all styles detected
3. ✅ Added text children to sampleBox - no change
4. ✅ Disabled MMKV persistence in Storybook - no change
5. ✅ Verified color tokens are different between themes

Question

Why do some StyleSheet.create styles update when ScopedTheme name changes, but others don't? The Babel plugin detects all theme dependencies correctly. Is this:

1. A known limitation of ScopedTheme with nested components?
2. Related to React 19 / React Compiler issue React Compiler prevents theme updates in components with style prop when using themes #368?
3. An issue with how ScopedTheme propagates to deeply nested components?

Expected: All components with [Theme] dependency should update when ScopedTheme name changes.
Actual: Only some components update, inconsistently.

UPDATED:

Tested in actual app - not Storybook-specific
Disabled React Compiler - not Issue #368

[jpudysz]

Please create a fresh reproduction

• It will confirm that it's not because of your app setup
• iI can debug it quickly

[Anton-KF]

Ok will do when I have time, tnx for the attention!