Giters

jpudysz / react-native-unistyles

Level up your React Native StyleSheet

Home Page:https://unistyl.es

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[android]: adaptive themes not updates on start

teivienn opened this issue · comments

commented

Description

I configured unistyles with dark and light theme, but when I change dark mode on my device or android emulator, theme is not changes. Theme only changes if app is opened and then I change dark mode but if I close app and opened then by default will be initialTheme.

Example:

// unistyles.ts

const light = {
  colors: {
    primary: '#673AB7',
    secondary: '#f7f9fc',
    background: '#ffffff',
    text: '#1E1E1E',
  },
} as const;

const dark = {
  colors: {
    primary: '#673AB7',
    secondary: '#1E1E1E',
    background: 'rgb(1, 1, 1)',
    text: '#fcfcfc',
  },
} as const;

type Theme = {
  light: typeof light;
  dark: typeof dark;
};

UnistylesRegistry.addThemes({ light, dark }).addConfig({
  adaptiveThemes: true,
  initialTheme: 'light',
});
//index.js

import './lib/unistyles';
import { AppRegistry } from 'react-native';
import { App } from './src/app';

AppRegistry.registerComponent(appName, () => App);

I use UnistylesRuntime with useColorScheme how as temporary solution for fix this behavior now.

// App.tsx

  const scheme = useColorScheme();

  useEffect(() => {
    UnistylesRuntime.setTheme(scheme === 'dark' ? 'dark' : 'light');
  }, [scheme]);

Steps to reproduce

  1. setup unistyles with adaptive themes
  2. close application (need use cold start)
  3. turn on dark mode on your device
  4. open app (you will see that dark theme is not applied)

Snack or a link to a repository (optional)

No response

Unistyles version

2.0.0

React Native version

0.73.2

Platforms

Android

Engine

Hermes

Architecture

Paper (old)

commented

Do you have such key in the AndroidManifest?

https://reactnativeunistyles.vercel.app/reference/faq/#why-does-my-app-restart-on-theme-change-or-font-size-change-android

Without this key app won't respond to events about light/dark mode.

commented

Do you have such key in the AndroidManifest?

https://reactnativeunistyles.vercel.app/reference/faq/#why-does-my-app-restart-on-theme-change-or-font-size-change-android

Without this key app won't respond to events about light/dark mode.

Yes this key is existed in the AndroidManifest, application is respond to events about light/dark mode.

commented

For fix, it also can use this behavior

import { UnistylesRegistry } from 'react-native-unistyles';
import { Appearance } from 'react-native';

const light = {
  colors: {
    primary: '#673AB7',
    secondary: '#f7f9fc',
    background: '#ffffff',
    text: '#1E1E1E',
  },
} as const;

const dark = {
  colors: {
    primary: '#673AB7',
    secondary: '#1E1E1E',
    background: 'rgb(1, 1, 1)',
    text: '#fcfcfc',
  },
} as const;

type Theme = {
  light: typeof light;
  dark: typeof dark;
};

UnistylesRegistry.addThemes({ light, dark }).addConfig({
  adaptiveThemes: true,
  initialTheme: Appearance.getColorScheme() === 'dark' ? 'dark' : 'light',
});
commented

Why do you set initial theme if you want to use adaptive theme?

You are overriding library automation to set it for you. Just remove it and Unistyles will pick proper theme ☺️

commented

Ohh sorry, I just thought it was a required option😅

It's really working right