UnistylesRuntime.updateTheme doesn't trigger rerender on React Native Web

[Marcin Dziewulski]

Description

Hello @jpudysz! 👋 I'm rewriting my library (Stacks) to TypeScript with Unistyles as a core dependency. It works perfectly, and it's amazing! ❤️ (I wanted to add variants support to Stacks as well, but you did it much better 😅)

But straight to the point, I think I have found a bug, UnistylesRuntime.updateTheme doesn't trigger any rerender on RNW. I have already read Unistyles source code (not deeply, honestly) and couldn't find a reason for that bug. Take a look at the screen recordings below:

Native:

CleanShot.2024-04-07.at.18.03.06.mp4

Web:

CleanShot.2024-04-07.at.18.04.11.mp4

Steps to reproduce

Initialize Unistyles:

/* eslint-disable @typescript-eslint/no-empty-interface */
import { UnistylesRegistry } from 'react-native-unistyles';

const breakpoints = {
  mobile: 0,
  tablet: 768,
  desktop: 998,
} as const;

const theme = {
  stacks: {
    spacing: 4,
    debug: false,
  },
};

type Breakpoints = typeof breakpoints;

type Themes = {
  readonly light: typeof theme;
};

declare module 'react-native-unistyles' {
  export interface UnistylesBreakpoints extends Breakpoints {}
  export interface UnistylesThemes extends Themes {}
}

UnistylesRegistry.addBreakpoints(breakpoints)
  .addThemes({
    light: theme,
  })
  .addConfig({
    adaptiveThemes: true,
  });

Add the handler to update stacks properties:

const handleDebugMode = React.useCallback(() => {
  UnistylesRuntime.updateTheme('light', theme => {
    console.log(theme);
    return {
      ...theme,
      stacks: {
        ...theme.stacks,
        debug: !theme.stacks.debug,
      },
    };
  });
}, []);

// and then
<Button title="debug" onPress={handleDebugMode} />

Snack or a link to a repository (optional)

https://github.com/grapp-dev/stacks/tree/main/example

Unistyles version

2.5.3

React Native version

0.73.6

Platforms

React Native Web

Engine

Hermes

Architecture

Fabric (new)

[Jacek Pudysz]

Thanks for the report, I will check it out!

[Jacek Pudysz]

Btw. this is invalid config:

UnistylesRegistry.addBreakpoints(breakpoints)
  .addThemes({
    light: theme,
  })
  .addConfig({
    adaptiveThemes: true // you can't use adaptiveThemes for light theme only
  });

Here is the demo for the updateTheme for web, but it uses 2 themes:

Screen.Recording.2024-04-08.at.09.44.39.mov

I can confirm that the issue is for single registered theme.

[Jacek Pudysz]

Fixed in 2.5.5