fix: iOS safe area using CSS (#1610)

packages/mobile/src/MobileWebAppContainer.tsx

@@ -1,20 +1,13 @@
 import { MobileDevice, MobileDeviceEvent } from '@Lib/Interface'
 import { IsDev } from '@Lib/Utils'
 import { ReactNativeToWebEvent } from '@standardnotes/snjs'
-import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
-import { Platform, SafeAreaView } from 'react-native'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { Platform } from 'react-native'
 import { WebView, WebViewMessageEvent } from 'react-native-webview'
-import { ThemeContext } from 'styled-components'
-import styled from 'styled-components/native'
 import { AppStateObserverService } from './AppStateObserverService'
 
 const LoggingEnabled = IsDev
 
-const StyledSafeAreaView = styled(SafeAreaView)`
-  flex: 1;
-  ${(props) => `background-color: ${props.theme.stylekitBackgroundColor}`}
-`
-
 export const MobileWebAppContainer = () => {
   const [identifier, setIdentifier] = useState(Math.random())
 
@@ -26,7 +19,6 @@ export const MobileWebAppContainer = () => {
 }
 
 const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => void }) => {
-  const theme = useContext(ThemeContext)
   const webViewRef = useRef<WebView>(null)
   const sourceUri = (Platform.OS === 'android' ? 'file:///android_asset/' : '') + 'Web.bundle/src/index.html'
   const stateService = useMemo(() => new AppStateObserverService(), [])
@@ -180,20 +172,18 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo
 
   /* eslint-disable @typescript-eslint/no-empty-function */
   return (
-    <StyledSafeAreaView theme={theme}>
-      <WebView
-        ref={webViewRef}
-        source={{ uri: sourceUri }}
-        originWhitelist={['*']}
-        onLoad={() => {}}
-        onError={(err) => console.error('An error has occurred', err)}
-        onHttpError={() => console.error('An HTTP error occurred')}
-        onMessage={onMessage}
-        allowFileAccess={true}
-        allowUniversalAccessFromFileURLs={true}
-        injectedJavaScriptBeforeContentLoaded={injectedJS}
-      />
-    </StyledSafeAreaView>
+    <WebView
+      ref={webViewRef}
+      source={{ uri: sourceUri }}
+      originWhitelist={['*']}
+      onLoad={() => {}}
+      onError={(err) => console.error('An error has occurred', err)}
+      onHttpError={() => console.error('An HTTP error occurred')}
+      onMessage={onMessage}
+      allowFileAccess={true}
+      allowUniversalAccessFromFileURLs={true}
+      injectedJavaScriptBeforeContentLoaded={injectedJS}
+    />
   )
   /* eslint-enable @typescript-eslint/no-empty-function */
 }