@a1motion/components-native

Install

yarn add @a1motion/components-native react-native-appearance react-native-safe-area-context @react-native-community/datetimepicker

Setup

Wrap your code in a ThemeProvider, AppearanceProvider and SafeAreaContext

<SafeAreaProvider initialMetrics={initialWindowMetrics}>
  <AppearanceProvider>
    <ThemeProvider>
      <Root />
    </ThemeProvider>
  </AppearanceProvider>
</SafeAreaProvider>

Then use the hook useColorScheme to set the theme for your NavigationContainer

const Root = () => {
  const theme = useColorScheme();
  return (
    <NavigationContainer theme={theme === "dark" ? DarkTheme : DefaultTheme}>
      <StatusBar barStyle={theme === "dark" ? "light-content" : "dark-content"} />
      <App />
    </NavigationContainer>
  );
}