how to change the background of status bar in react native based on device theme?

Question

How I can change the background of statusbar based on device theme in real time ?

I wrote the following code and I wanted whenever I toggle my device's dark or light mode the statusbar change as well, but I have to reload react native app from terminal to see change on statusbar background

const App = () => {
  const theme = useTheme();
  const colorScheme = Appearance.getColorScheme();
  const statusBarBackgroundColor =
    colorScheme === "dark" ? theme.colors.onSurface : theme.colors.surface;

  return (
    <StatusBar
      animated={true}
      backgroundColor={statusBarBackgroundColor}
      barStyle={colorScheme === "dark" ? "light-content" : "dark-content"}
      showHideTransition={statusBarTransition}
      hidden={hidden}
    />
  );
};

Answer 1

Try usecolorScheme hook:

import { useColorScheme } from 'react-native';

const colorScheme = useColorScheme()