Apparence turns light (for an instant) to when back and forth on iOS with SDK39

Hi guys,

For some reason the useColorScheme on iOS returns “light” (for a moment) when the application goes to background and returns to foreground, I suppose that this is something that the SDK39 introduces because I had no problem with the previous version.

It could be that it is related to a facebook issue:

https://github.com/facebook/react-native/issues/28525

here I leave an video of the problem:

Alternatively I tried with the native useColorTheme and had the same unwanted effect.

[outaTiME]

great @jasonaibrahim, i made few tweak usign lodash and better memoization to reduce size, at this moment the only way i know to “workaround” this issue is throttled the Appearance updates 😞

useColorScheme(delay = 250) {
  const [colorScheme, setColorScheme] = React.useState(
    Appearance.getColorScheme()
  );
  const onColorSchemeChange = React.useCallback(
    _.throttle(
      ({ colorScheme }) => {
        setColorScheme(colorScheme);
      },
      delay,
      {
        leading: false,
      }
    ),
    []
  );
  React.useEffect(() => {
    Appearance.addChangeListener(onColorSchemeChange);
    return () => {
      onColorSchemeChange.cancel();
      Appearance.removeChangeListener(onColorSchemeChange);
    };
  }, []);
  return colorScheme;
}

BTW, 250ms on throttle invocations works for me

[jasonaibrahim]

if anyone needs a workaround while this is sorted out, here it is as a hook that can be used in lieu of the rn useColorScheme hook. it throttles the color scheme change events so that the more recent one is used as the colorScheme value, since the first event seems to be incorrect but subsequent values are correct

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);
    }, delay);
  }

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

  return colorScheme as NonNullable<ColorSchemeName>;
}