React Compiler prevents theme updates in components with style prop when using themes

[Ucekay]

Description

When using React Compiler, theme updates don't work in components that:

1. Use themes
2. Accept a style prop

Example of affected component:

import { View, type ViewProps } from 'react-native';

import {
	StyleSheet,
} from 'react-native-unistyles';

export const UnistyledView =(props: ViewProps) => {
	const { style, ...otherProps } = props;
	return <View style={[style, styles.container]} {...otherProps} />;
};

const styles = StyleSheet.create((theme) => ({
	container: {
		backgroundColor: theme.colors.background,
	},
}));

Details:

• Theme updates stop working when React Compiler is enabled, in components structured like the example above
• Issue occurs regardless of whether style prop is provided
• Using unistyles themes directly in style prop also doesn't update

Attempted Solution:
I tried wrapping the component with createUnistylesComponent. This fixed the theme updating, but introduced re-rendering on theme changes, which defeats the no-rerender benefit of Unistyles 3.0.

Test cases:
Works: Without React Compiler
Works: Without style prop definition (Please check ThemedView in reproduction)
Doesn't work: With React Compiler + style prop definition (Please check UnistyledView in reproduction)
Works but re-renders: With React Compiler + style prop definition + createUnistylesComponent

Although such component patterns might not be necessary when fully adopting Unistyles, developers migrating from React Native's StyleSheet might encounter this issue.

Steps to Reproduce

1. Create a component that uses theming:

const Component = (props: ViewProps) => (
    const { style, ...otherProps } = props;
    <View style={[styles.container, style]} {...otherProps} />
);

const styles = StyleSheet.create((theme) => ({
    container: {
        backgroundColor: theme.colors.background,
    },
}));

2. Set up React Compiler
3. Run the app
4. Change system color scheme

Snack or Repository Link (Optional)

https://github.com/Ucekay/unistyles-react-compiler-repro

Unistyles Version

3.0.0-beta.1

React Native Version

0.76.3

Platforms

iOS

Expo

Yes

[jpudysz]

Thanks for the detailed repro! I will try to find the root cause! 😇

[jpudysz]

We have kind of idea why is that happening. It requires rewrite of one part of Unistyles pipeline.

Since React Compiler is in beta, we will move it to later beta release.

[Ucekay]

Thank you for looking into this! Totally understand about waiting for a later beta given React Compiler's current status. Really appreciate the quick response! 🙏