React Native: How to implement dark mode in React Native?

1import { useColorScheme } from 'react-native';
2
3function App() {
4  const colorScheme = useColorScheme();
5  const isDark = colorScheme === "dark";
6
7  return (
8    <View style={{
9      backgroundColor: isDark ? "#000" : "#fff",
10    }}>
11      <Text style={{
12        color: isDark ? "#fff" : "#000",
13      }}>Hello</Text>
14    </View>
15  );
16}

1const themes = {
2  light: { bg: "#fff", text: "#000" },
3  dark: { bg: "#000", text: "#fff" },
4};
5
6const ThemeContext = createContext(themes.light);
7
8function ThemeProvider({ children }) {
9  const colorScheme = useColorScheme();
10  const theme = themes[colorScheme ?? "light"];
11
12  return (
13    <ThemeContext.Provider value={theme}>
14      {children}
15    </ThemeContext.Provider>
16  );
17}

1<StatusBar
2  barStyle={isDark ? "light-content" : "dark-content"}
3/>