Quick glitch/transition showing light mode temporarily (when I am already in dark mode) - when refreshing or first loading the page in react native web (via expo)

[ammarfaris]

Description

Quick glitch/transition showing light mode temporarily (when I am already in dark mode) - when refreshing or first loading the page in react native web (via expo) ; toggling dark-light mode via the actual dark-light mode toggle works fine

glitch.mov

Steps to reproduce

1. Run npx create-expo-app my-app and choose Navigation (Typescript) for expo-router version
2. Follow the setup guide at unistyles setup page
3. Add code to test light-dark mode (sample given in unistyles doc)
4. Run yarn web and try to refresh the web page

Snack or a link to a repository (optional)

No response

Unistyles version

2.0.0

React Native version

0.72.6

Platforms

React Native Web

Engine

Hermes

Architecture

Paper (old)

[jpudysz]

Should be easy to fix, thank you for the report 🙇‍♂️

[jpudysz]

Hello,

I was unable to reproduce your issue.

I have created a repository with the correct setup: https://github.com/jpudysz/react-native-unistyles-expo-router.

You just need to avoid mixing Expo's theming with Unistyles. In this repository, everything is converted to Unistyles and works as intended.

[ammarfaris]

Hello,

I was unable to reproduce your issue.

I have created a repository with the correct setup: https://github.com/jpudysz/react-native-unistyles-expo-router.

You just need to avoid mixing Expo's theming with Unistyles. In this repository, everything is converted to Unistyles and works as intended.

Thanks @jpudysz for creating the repository, appreciate it very much!

My apology - I missed one information, I was also testing Expo SDK 50 Beta + Expo Router v3 Beta at that time and I just realized that I have upgraded my project to Expo SDK 50 Beta by running commands below - from "Using the Beta" section in this announcement page:

yarn add expo@next

npx expo install --fix

So when I run that in your repo, the flickering / glitch came back ; Maybe once SDK50 is out of Beta, we can revisit this. Thanks for your help and effort!

[jpudysz]

No worries! I'm glad that I could narrow the issue to V3

[annidai]

Hi @jpudysz , I’m also experiencing the same issue with Expo SDK 50 and Expo-router v3. Now that SDK 50 is officially released, would it be more appropriate to open a new issue or should we consider reopening this one?

[jpudysz]

Hey, can you create a repro with v3? I don't think it's Unistyles issue as it provides colors before the render, maybe something specific for the Expo Router.

[annidai]

Hey, can you create a repro with v3? I don't think it's Unistyles issue as it provides colors before the render, maybe something specific for the Expo Router.

Hey @jpudysz, after taking a closer look, it seems that setting the system UI background and applying a background color to the root stack resolves the issue. Thank you for the help!

[jpudysz]

You resolved the mystery of Expo Router v3! Thank you for your reply! ❤️