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

Question

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

Answer 1

Everything was much easier than it seemed: my splash screen image for the light mode somehow had a very high resolution (near 7000 x 3000 pixels), while the dark mode was twice lower for every side (3500 x 1500).

The splash screen image was also set as the app background in Android themes (for the smooth transition between splash and app).

When I noticed it and changed the splash screen image resolution for the light mode to the same as the night mode has, the app became fast. That's all

I am posting this answer in a way to help the people that may have the same problem as I did :(

Answer 2

So, you luckily found the answer! What may help in the future, is the flamegraph in the react dev tools extension! You can download it for Multiple supported browsers and access the flamegraph in the f12 menu! There it shows which element is taking how long to render on the page, including the loading times of its child elements :)