feat(App): review safearea

Author: bellolau

template/src/app/components/AppProvider.tsx

@@ -1,6 +1,7 @@
 import React, {FC, PropsWithChildren} from 'react';
 import {NavigationProvider} from './NavigationProvider';
 import {ThemeProvider} from './ThemeProvider';
+import {ThemedSafeAreaProvider} from './ThemedSafeAreaProvider';
 
 type Props = React.ComponentProps<typeof ThemeProvider>;
 
@@ -10,7 +11,9 @@ export const AppProvider: FC<PropsWithChildren<Props>> = ({
 }) => {
   return (
     <ThemeProvider themeVariants={themeVariants}>
-      <NavigationProvider>{children}</NavigationProvider>
+      <ThemedSafeAreaProvider>
+        <NavigationProvider>{children}</NavigationProvider>
+      </ThemedSafeAreaProvider>
     </ThemeProvider>
   );
 };

template/src/app/components/ThemeProvider.tsx

@@ -1,9 +1,11 @@
-import {DefaultTheme} from '@react-navigation/native';
 import React, {FC, PropsWithChildren, useMemo} from 'react';
-import {useColorScheme} from 'react-native';
+import {StatusBar, useColorScheme} from 'react-native';
+import {themeVariants as defaultThemeVariants} from '../themes';
 import {Theme, ThemeVariants} from '../types/theme';
 
-export const ThemeContext = React.createContext<Theme>(DefaultTheme);
+export const ThemeContext = React.createContext<Theme>(
+  defaultThemeVariants.light,
+);
 
 type Props = {
   themeVariants: ThemeVariants;
@@ -21,6 +23,9 @@ export const ThemeProvider: FC<PropsWithChildren<Props>> = ({
   );
 
   return (
-    <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
+    <>
+      <StatusBar barStyle={theme.statusBarStyle} />
+      <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
+    </>
   );
 };

template/src/app/components/ThemedSafeAreaProvider.tsx

@@ -0,0 +1,16 @@
+import React, {FC, PropsWithChildren} from 'react';
+import {SafeAreaProvider} from 'react-native-safe-area-context';
+import useAppStyles, {StylesCallback} from '../hooks/useAppStyles';
+
+const getStyles: StylesCallback = ({colors}) => ({
+  safeArea: {
+    backgroundColor: colors.background,
+  },
+});
+
+export const ThemedSafeAreaProvider: FC<PropsWithChildren> = ({children}) => {
+  const styles = useAppStyles(getStyles);
+  return (
+    <SafeAreaProvider style={styles.safeArea}>{children}</SafeAreaProvider>
+  );
+};

template/src/app/types/theme.ts

@@ -1,7 +1,9 @@
 import {Theme as NavigationTheme} from '@react-navigation/native';
-import {ColorSchemeName} from 'react-native';
+import {ColorSchemeName, StatusBarStyle} from 'react-native';
 
-export interface Theme extends NavigationTheme {}
+export interface Theme extends NavigationTheme {
+  statusBarStyle: StatusBarStyle;
+}
 
 type Colors = Pick<keyof ColorSchemeName, 'light' | 'dark'>;
 

template/src/app/views/App.tsx

@@ -5,87 +5,16 @@
  * @format
  */
 
-import type {PropsWithChildren} from 'react';
 import React from 'react';
-import {
-  SafeAreaView,
-  StatusBar,
-  StyleSheet,
-  Text,
-  useColorScheme,
-  View,
-} from 'react-native';
 
-import {Colors} from 'react-native/Libraries/NewAppScreen';
 import {RootStackNavigator} from '../../navigation/components/RootStackNavigator';
 import {AppProvider} from '../components/AppProvider';
 import {themeVariants} from '../themes';
 
-type SectionProps = PropsWithChildren<{
-  title: string;
-}>;
-
-function Section({children, title}: SectionProps): JSX.Element {
-  const isDarkMode = useColorScheme() === 'dark';
-  return (
-    <View style={styles.sectionContainer}>
-      <Text
-        style={[
-          styles.sectionTitle,
-          {
-            color: isDarkMode ? Colors.white : Colors.black,
-          },
-        ]}>
-        {title}
-      </Text>
-      <Text
-        style={[
-          styles.sectionDescription,
-          {
-            color: isDarkMode ? Colors.light : Colors.dark,
-          },
-        ]}>
-        {children}
-      </Text>
-    </View>
-  );
-}
-
 export function App(): JSX.Element {
-  const isDarkMode = useColorScheme() === 'dark';
-
-  const backgroundStyle = {
-    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
-  };
-
   return (
-    <SafeAreaView style={[{flex: 1}, backgroundStyle]}>
-      <AppProvider themeVariants={themeVariants}>
-        <StatusBar
-          barStyle={isDarkMode ? 'light-content' : 'dark-content'}
-          backgroundColor={backgroundStyle.backgroundColor}
-        />
-        <RootStackNavigator />
-      </AppProvider>
-    </SafeAreaView>
+    <AppProvider themeVariants={themeVariants}>
+      <RootStackNavigator />
+    </AppProvider>
   );
 }
-
-const styles = StyleSheet.create({
-  sectionContainer: {
-    marginTop: 32,
-    paddingHorizontal: 24,
-  },
-  sectionTitle: {
-    fontSize: 24,
-    fontWeight: '600',
-  },
-  sectionDescription: {
-    marginTop: 8,
-    fontSize: 18,
-    fontWeight: '400',
-  },
-  highlight: {
-    fontWeight: '700',
-  },
-});