add theme to SafeAreaView and preventAutoHide SplashScreen (#592)

src/App.native.tsx

@@ -5,7 +5,6 @@ import {withSentry} from 'lib/sentry'
 import {Linking} from 'react-native'
 import {RootSiblingParent} from 'react-native-root-siblings'
 import * as SplashScreen from 'expo-splash-screen'
-import {SafeAreaProvider} from 'react-native-safe-area-context'
 import {GestureHandlerRootView} from 'react-native-gesture-handler'
 import {observer} from 'mobx-react-lite'
 import {ThemeProvider} from 'lib/ThemeContext'
@@ -18,6 +17,8 @@ import * as analytics from 'lib/analytics'
 import * as Toast from './view/com/util/Toast'
 import {handleLink} from './Navigation'
 
+SplashScreen.preventAutoHideAsync()
+
 const App = observer(() => {
   const [rootStore, setRootStore] = useState<RootStoreModel | undefined>(
     undefined,
@@ -55,9 +56,7 @@ const App = observer(() => {
         <analytics.Provider>
           <RootStoreProvider value={rootStore}>
             <GestureHandlerRootView style={s.h100pct}>
-              <SafeAreaProvider>
-                <Shell />
-              </SafeAreaProvider>
+              <Shell />
             </GestureHandlerRootView>
           </RootStoreProvider>
         </analytics.Provider>

src/view/shell/index.tsx

@@ -17,6 +17,7 @@ import * as backHandler from 'lib/routes/back-handler'
 import {RoutesContainer, TabsNavigator} from '../../Navigation'
 import {isStateAtTabRoot} from 'lib/routes/helpers'
 import {isAndroid} from 'platform/detection'
+import {SafeAreaProvider} from 'react-native-safe-area-context'
 
 const ShellInner = observer(() => {
   const store = useStores()
@@ -78,12 +79,14 @@ export const Shell: React.FC = observer(() => {
   const pal = usePalette('default')
   const theme = useTheme()
   return (
-    <View testID="mobileShellView" style={[styles.outerContainer, pal.view]}>
-      <StatusBar style={theme.colorScheme === 'dark' ? 'light' : 'dark'} />
-      <RoutesContainer>
-        <ShellInner />
-      </RoutesContainer>
-    </View>
+    <SafeAreaProvider style={pal.view}>
+      <View testID="mobileShellView" style={[styles.outerContainer, pal.view]}>
+        <StatusBar style={theme.colorScheme === 'dark' ? 'light' : 'dark'} />
+        <RoutesContainer>
+          <ShellInner />
+        </RoutesContainer>
+      </View>
+    </SafeAreaProvider>
   )
 })