jpudysz/react-native-unistyles v3.6.0 on GitHub

What's Changed

A minor release and the first step towards 4.0: an experimental zero-config Metro integration, faster plain views, Reanimated CSS transitions and iOS gradients that follow theme changes, and a memory leak fix for useVariants.

🚇 Experimental Metro integration

New react-native-unistyles/metro, a zero-config alternative to the Babel plugin. Wrap your Metro config and remove react-native-unistyles/plugin from babel.config.js; there's no root or autoProcessImports to set. Every react-native import, including those in node_modules, resolves to Unistyles components, so third-party components follow theme changes too. The bundle also contains a single copy of Unistyles. The Babel plugin stays the default, and existing setups don't change. Re.Pack, Vite, Next.js and other web bundlers keep using the Babel plugin (#1308, docs)

// metro.config.js
const { getDefaultConfig } = require('expo/metro-config')
const { withUnistylesConfig } = require('react-native-unistyles/metro')

module.exports = withUnistylesConfig(getDefaultConfig(__dirname))

⚡️ Performance

Views whose style holds no unistyle are no longer linked. Their refs and styles pass through unchanged, with both the Metro integration and the Babel plugin (#1308)

	3.5.3	3.6.0
Plain view re-render	13.0	6.4
Plain view unmount	5.0	1.3

_{Median ms for 900 views, iOS simulator, Release}

🎨 Themes and styles

Reanimated CSS transitions (transitionProperty) now animate to the new theme's colors after a theme change. Before, they kept the previous theme's colors (#1315, closes #1007)
Fixed views that didn't fully switch themes with Reanimated in the tree, such as nested Text and variant styles on Animated.Text after a breakpoint change (#1315, closes #1170, #1045 and #1142)
Views inside a Suspense fallback are now refreshed on theme change. Views frozen by react-freeze, Suspense or a hidden <Activity> that use a CSS transition show the new theme when revealed (#1315)

🧠 Memory

Fixed a memory leak in styles.useVariants() when the StyleSheet has a dynamic function. A screen calling it on every render leaked about 270 B per call, e.g. 5.6 → 13.7 MB after 100 mount cycles. The heap now stays flat (#1323)

🍏 iOS

Gradients from a StyleSheet (experimental_backgroundImage / backgroundImage strings) now follow theme changes on React Native 0.83+. Before, a theme change cleared them. On older React Native versions they keep the colors React rendered last (#1319 by @erickreutz, #1320, closes #1030)
With adaptive themes, iOS now follows Appearance.setColorScheme, like Android (#1304)

🤖 Android

Flipping horizontal on a FlatList no longer throws the "detected an unsupported FlatList with the horizontal prop" render error. Flipping it back no longer leaks a registry entry (#1305, closes #803)

🌐 Web

Reanimated's useAnimatedStyle now works on components wrapped with createUnistylesElement. Before, the animated style was silently dropped, so the view never animated (#1201 by @theonetheycallneo, closes #1199)
Breakpoint media queries no longer leave a gap at fractional viewport widths (e.g. 767.5px under browser zoom). Ranges now end at next − 0.02px (#1242 by @themikem, closes #1241, docs in #1321)

⚛️ React Compiler

Components calling styles.useVariants() now compile with React Compiler. Before, panicThreshold: "all_errors" failed the build, and with the default threshold the compiler silently skipped them (#1310, #1311, closes #1002)

🧪 Internal

An unknown class component ref now resolves to the first native view it renders instead of throwing "Could not find shadow node" (#1315)

❤️ Contributors

Thanks to everyone who sent a PR for this release:

And to those whose PRs and reports shaped the fixes:

@oblador, @believer, @ilteoood, @saif-o99, @Jonas-Bostoen, @slvvn, @bbbenja for detailed bug reports

Full Changelog: v3.5.3...v3.6.0

jpudysz/react-native-unistyles v3.6.0 Release v3.6.0 on GitHub