Skip to content

Release 3.0.0-rc.5

Latest
Latest
Compare
Choose a tag to compare
@jpudysz jpudysz released this 10 Jun 09:56
· 27 commits to main since this release
v3.0.0-rc.5
926dde4

3.0.0-rc.5 (2025-06-10)

🥇 GOLDEN RC 🥇

Stable release comming later this month!

Hello, Unistylers!
This is the biggest release candidate since the first version, as it includes a ton of DX improvements and bug fixes.

Breaking changes

  1. We now require the root option for the Babel plugin. This was confusing for many developers, and it was hard to tell if a style was managed by Unistyles or not. With this new required option, you need to provide the root of your application, e.g., src or app. All StyleSheets and components within this folder will be managed by Unistyles! Read more.
// babel.config.js

return {
  plugins: [
    ['react-native-unistyles/plugin', {
      root: 'src'
    }]
  ]
}
  1. React Native 0.78 and React 19 are now the minimum required versions. We always strive to maintain backward compatibility with the oldest possible versions of React Native. However, with the latest changes that improved the ShadowTree algorithms, we were able to remove a lot of code that was impacting performance and compatibility with other libraries like react-native-reanimated. The stable version of Unistyles 3.0 will not be released before React Native 0.80, which means that from day one, we will support all versions currently supported by React Native.
  2. Shadow Tree algorithm, which is the core of Unistyles, was replaced during the nightly phase between RC.4 and RC.5. You should see noticeable improvements, especially with lists, but we want to make this explicit in the changelog so everyone is aware of this impactful change. This is an internal update and does not introduce any visible changes for developers.
  3. react-native-gesture-handler paths are no longer processed automatically by the Unistyles Babel plugin. After careful consideration and a bug report from Storybook, we decided to remove this option from the plugin. We believe that handlers are not the best place to style your views, and most use cases simply add { flex: 1 } to make them expandable containers. Initially, we wanted to support RNGH Pressable to be automatically managed by Unistyles ShadowTree updates, but after further investigation, we confirmed that this is a native view, so the only way to upgrade it is by wrapping it in withUnistyles.

New features

  1. New hook for Reanimated: useAnimatedVariantColor, which helps you reuse StyleSheet variants and animate color transitions. The Unistyles wrapper uses interpolateColor from Reanimated under the hood. You can animate color transitions however you want, and as always, your view will never re-render!
import { StyleSheet } from 'react-native-unistyles'
import Animated, { useAnimatedStyle, withTiming } from 'react-native-reanimated'
import { useAnimatedVariantColor } from 'react-native-unistyles/reanimated'

// JSX
const color = useAnimatedVariantColor(styles.styleWithVariants, 'backgroundColor')
const animatedStyle = useAnimatedStyle(() => {
  return {
    backgroundColor: withTiming(color.value, {
      duration: 500
    })
  }
})

// styles
const styles = StyleSheet.create(theme => ({
  styleWithVariants: {
     height: 100,
     width: 100,
     variants: {
        variant: {
           red: {
               backgroundColor: theme.colors.red
           },
           blue: {
               backgroundColor: theme.colors.blue
            }
         }
      }
  }
})

Read more about new API here.

  1. ScopedTheme now supports inverted colors. This change was inspired by feedback on App.js and addresses some missing functionalities found in other styling libraries. Starting from RC.5 you can use the inverseAdaptive prop to invert the theme for all children when your app is in adaptiveMode. In other words, if your theme is light, all children will be rendered with dark colors, and vice versa.
<ScopedTheme invertedAdaptive>
    <View style={styles.container}>
        <Text style={styles.text}>
            Text is light when color scheme is dark and dark when color scheme is light
        </Text>
    </View>
</ScopedTheme>

Read more about invertedAdaptive here.

  1. Support for Repack!

Thanks to @whydidoo implementation you can now use Unistyles with re.pack 🦀
Read more about it in PR

  1. Last but not least support for React Native 0.80 and Nitro 0.26+ has been added. We’re ready to spend the next 2-3 weeks monitoring any issues you report before promoting Unistyles 3.0 to stable. During this time, we will focus on demos, examples, documentation, and restructuring our repository to help with maintenance.

Thank you all for your support on X, Discord, and in person during App.js Conf in Krakow. Happy styling! 🦄

Features

  • feat: replace direct value assignments with set/get methods in variant color animations (bdeb5581)
  • feat: make animateCallback optional and update color variant animation handling (62ce079e)
  • feat: web animated variants (30761e26)
  • feat: remove react-native-gesture-handler from auto-processed paths (cca51b5b)
  • feat: add crash prevention for horizontal FlatList on Android with improved error messages (e810bff6)
  • feat: add simplified useAnimatedVariantColor hook for color interpolation (bed05fc9)
  • feat: bump nitro to 0.26.2 (eb3d81d8)
  • feat: add useAnimatedVariants hook for smooth theme transitions with Reanimated (66fd7bed)
  • feat: add box-shadow string parsing support for style objects (f79beee2)
  • feat: split scoped themes to separate components (c0b2d5df)
  • feat: add scoped theme components with inverted adaptive theme support (1777a0b0)
  • feat: add isLandscape and isPortrait orientation helpers to runtime (4d68832d)
  • feat: improve box shadow parsing with color validation and renamed spread property (d9f87c8b)
  • feat: add boxShadow string parser for native and web platforms (5c2ad875)
  • feat: add shadow tree flush mechanism for scoped theme updates (55a6de89)
  • feat: require react 19 for better ref cleanups (75b527ac)
  • feat: make root option required in Babel plugin configuration (e6939cae)
  • feat: build new versions (f409be56)
  • feat: added the Repack plugin to enable using Babel Unistyles in projects with Repack (1e4b05a2)
  • feat: add missing props (6fbdb6c2)
  • feat: spead up shadowtree lookup (cfadacfd)
  • feat: get rid of commit hooks, upgrade demos (5c861dea)
  • feat: update versions (a77ee610)

Bug Fixes

  • fix: improve ScopedTheme component error handling and update version table in docs (0ac9e5ca)
  • fix: simplify home screen and add tabs navigation structure (8ff01e37)
  • fix: reorder imports according to style guide in useUpdateVariantColor (d02ffac0)
  • fix: remove state cleanup during live reload in UnistylesRegistry (869a78ab)
  • fix: emit themename change when adaptive theme has changed (5e0b833a)
  • fix: capture unistyle ID instead of entire object in JSI lambda closure (c262599e)
  • fix: wrap color animation in runOnUI for better performance on JS thread (1f8437b8)
  • fix: web prevent modifying component name as it has no effect, yet crashes in StrictMode (fbeb376b)
  • fix: handle ScrollView ref cleanup and remove forwardRef usage (c8a71d87)
  • fix: handle undefined color and blurRadius values in box shadow parsing (dda02a9f)
  • fix: update import paths by removing /src prefix in plugin files (067dda23)
  • fix: remove duplicate parseBoxShadowString method declaration and fix parameter name typo (06e9eb7d)
  • fix: return first registered theme as default instead of empty object in mocks (2d2ca533)
  • fix: fix check for generated unistyles (0616da10)
  • fix: updateTheme update cssvars (ad8e333c)
  • fix: improve hairline width calculation to handle zero width edge case (68054aec)
  • fix: improve root path validation in babel plugin to prevent node_modules processing (7a9e0722)
  • fix: htmlelement not defined on server (a6ca6649)
  • fix: media query with multiple different breakpoints (113f2ed2)
  • fix: update loader and module rules to correctly handle TypeScript files and improve callback (de3f33d3)
  • fix(docs): missing value object from SharedValue (92f20f72)
  • fix: rename packagejson export (c7a23e2f)

Chores

  • chore: dont rerender web animated variant on breakpoint change (bcc721ad)
  • chore: release 3.0.0-nightly-20250609 (2c6c9caa)
  • chore: revert example to default (64a914b3)
  • chore: release 3.0.0-nightly-20250607 (fbbc2c21)
  • chore: release 3.0.0-nightly-20250606 (add35e6f)
  • chore: add hack for Reac 19 ScrollView (4639f05f)
  • chore: bump nitro-modules to 0.26.0 and update related dependencies (e73e6489)
  • chore: revert local paths (97a52ed8)
  • chore: upgrade React Native to 0.80.0-rc.4 and update dependencies (957a1289)
  • chore: release 3.0.0-nightly-20250604 (3e85c99d)
  • chore: release 3.0.0-nightly-20250603 (81f5e895)
  • chore: release 3.0.0-nightly-20250529 (1098e731)
  • chore: release 3.0.0-nightly-20250527 (8711c810)
  • chore: release 3.0.0-nightly-20250526 (c79aebc2)
  • chore: merge main (e92099b3)
  • chore: release 3.0.0-nightly-20250520 (6d20e24a)

Documentation

  • docs: update nighly version (0addeadb)
  • docs: add guide for animating variant colors with Reanimated (57bc177f)
  • docs: add Updated badge to scoped theme documentation link (aace1854)
  • docs: add documentation for inverted adaptive theme in ScopedTheme component (81a4964e)
  • docs: update nighly version (f90516fd)
  • docs: update nighly version (d1a29b65)
  • docs: update nighly version (1d13efcb)
  • docs: update nighly version (b6c438f0)
  • docs: update nighly version (eead17d6)
  • docs: update nighly version (8ecbda49)
  • docs: update nighly version (485f3647)
  • docs: update sponsors (7932c49f)
  • docs: fix spelling in references folder (e34a1a93)
  • docs: fix other spelling mistakes (1c207f48)
  • docs: update nighly version (b8cef5c4)
  • docs: update reanimated merging styles (8b7ee924)
  • docs: fix import in docs (a8543e56)

Refactors

  • refactor: replace contains with find for map operations in C++ code (98e3360c)
  • refactor: update ruleExcludePaths type to use Array instead of ReturnType (523c0404)
  • refactor: simplify entry points and remove unused loader file in repack-plugin (1de1176f)
  • refactor: update biome and package configurations to include repack-plugin and adjust dependencies (4188b7ad)

Other

  • style: fixed lint ci (30a5259e)
  • style: remove trailing semicolon in esbuild configuration (cb6d859b)
  • style: standardize string quotes (88ca7813)

Contributors

whydidoo
Assets 2
Loading