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)

Question

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 opened this issue 7 months ago · comments

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

Run npx create-expo-app my-app and choose Navigation (Typescript) for expo-router version
Follow the setup guide at unistyles setup page
Add code to test light-dark mode (sample given in unistyles doc)
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)

Jacek Pudysz · Answer 1 · Thu Dec 14 2023 19:10:31 GMT+0800 (China Standard Time)

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

Jacek Pudysz · Answer 2 · Sat Dec 16 2023 02:14:06 GMT+0800 (China Standard Time)

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.

Ammar Faris · Answer 3 · Sat Dec 16 2023 04:26:21 GMT+0800 (China Standard Time)

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!

Jacek Pudysz · Answer 4 · Sat Dec 16 2023 04:36:08 GMT+0800 (China Standard Time)

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

annidai · Answer 5 · Sat Apr 27 2024 00:00:19 GMT+0800 (China Standard Time)

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?

Jacek Pudysz · Answer 6 · Sat Apr 27 2024 01:19:51 GMT+0800 (China Standard Time)

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 · Answer 7 · Tue Apr 30 2024 08:10:33 GMT+0800 (China Standard Time)

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!

Jacek Pudysz · Answer 8 · Tue Apr 30 2024 13:27:23 GMT+0800 (China Standard Time)

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