dooboolab-community/dooboo-ui

Even if the app is set to dark mode in iOS, there is a problem that the dark mode theme does not apply when switching to the background.

Jay-flow opened this issue · 2 comments

Describe the bug
Even if the app is set to dark mode in iOS, there is a problem that the dark mode theme does not apply when switching to the background.

In the past, I have made full requests on this issue.
Fix the dark mode release from iOS background

I thought I solved this problem at that time, but the frequency of occurrence decreased, but this problem still occurs.
The same problem occurs randomly.
expo/expo#10815 (comment)

This problem is very difficult to solve because it doesn't always happen when you return to the app from the background.

The issue appears to be a bug occurring in iOS and is also registered as an issue in the react-native repository.
facebook/react-native#28525

It is occurring over iOS 13.
facebook/react-native#28525 (comment)
facebook/react-native#28525 (comment)

I tried the following methods as a solution, but they were not solved.

import { Appearance, ColorSchemeName } from 'react-native';
import { useEffect, useRef, useState } from 'react';

export default function useColorScheme(delay = 500): NonNullable<ColorSchemeName> {
  const [colorScheme, setColorScheme] = useState(Appearance.getColorScheme());

  let timeout = useRef<NodeJS.Timeout | null>(null).current;

  useEffect(() => {
    Appearance.addChangeListener(onColorSchemeChange);

    return () => {
      resetCurrentTimeout();
      Appearance.removeChangeListener(onColorSchemeChange);
    };
  }, []);

  function onColorSchemeChange(preferences: Appearance.AppearancePreferences) {
    resetCurrentTimeout();

    timeout = setTimeout(() => {
      setColorScheme(preferences.colorScheme);   // <-- the preferences.colorScheme is light.
    }, delay);
  }

  function resetCurrentTimeout() {
    if (timeout) {
      clearTimeout(timeout);
    }
  }

  return colorScheme as NonNullable<ColorSchemeName>;
}

or

 const initAppearanceListener = () => {
    const listener: Appearance.AppearanceListener = ({ colorScheme } /* <-- ignore */) => {
      setColorScheme(Appearance.getColorScheme());
    };
    Appearance.addChangeListener(listener);
    return () => Appearance.removeChangeListener(listener);
  };

To Reproduce
Steps to reproduce the behavior:

  1. Set the iOS device to dark mode.
  2. Turn on the app that applied the theme of doboo-ui.
  3. Switch to the background.
  4. I'm coming back to the app.

Expected behavior
The dark theme should be maintained when returning the app from the background to the foreground.


Screenshots

140264579-51a3fc65-01ab-4df6-adc4-52ac95b3cdba.mov

Smartphone (please complete the following information):

  • Device: iPhone
  • OS: iOS 14.8.1
  • Version: 0.1.48

Additional context
N/A

Looks like this is resolved~!

@hyochan can you please explain how this was solved? Thanks