2022-04-22

My React Native app is lagging in the light mode, but is superfast in the dark

I am creating a React Native app with light and dark modes. The colors of all components in the app are controlled with my custom hook:

export const useColors = (): UseColorsResult => {
  const theme = useColorScheme();
  const isDarkTheme = theme === 'dark';

  const colors = useCallback(
    (entity: ColorTypes) => {
      const entityColors = entityToColorsMapper[entity];
      const colorKey = entityColors[isDarkTheme ? 1 : 0] || entityColors[0];

      return colorsObject[colorKey];
    },
    [isDarkTheme],
  );

  return { colors, isDarkTheme };
};

entityToColorsMapper object values looks like

{
  text: ['black', 'white'],
  subtext: ['codGray', 'concrete'],
}

and colorsObject looks like

{
  white: '#FFFFFF',
  black: '#000000',
  concrete: '#F2F2F2',
  codGray: '#252525',
}

Then inside the component I usually do something like this:

const AutoColoredText: FC<TextProps> = (props) => {
  const { colors } = useColors();
  const textStyle = {color: colors('text')}

  return <Text style={textStyle} {...props}></Text>
}

The thing is that when I launch my application (release version with all optimizations) on my Samsung Galaxy S10 (Android 12) phone in the system light mode, it is very laggy and low fps (on scrolling, screens changing, etc.)

The main thing is that nothing similar happens when it is launched in the dark mode!

One more interesting thing is:

  • if I launch the app in the dark mode and then change it to the light while using the app, it remains fast
  • if I launch the app in the light mode and then change it to the dark while using the app, it remains laggy

I completely do not understand and can't even guess what is happening and why.

P.S. Everything works fine on another phone with not 12 Android.

UPD: I've set isDarkTheme = true in the hook as constant value and then launched the app in the system light mode and IT WAS LAGGY!, after that I launched it in the system dark mode and IT WAS FAST, so the problem is absolutely not in my render perfomance or any other React-related staff



No comments:

Post a Comment