fix: iOS webview window size and padding (#1605)

packages/mobile/src/AppStack.tsx

@@ -18,7 +18,7 @@ import { ICON_MENU } from '@Style/Icons'
 import { ThemeService } from '@Style/ThemeService'
 import { getDefaultDrawerWidth } from '@Style/Utils'
 import React, { useCallback, useContext, useEffect, useRef, useState } from 'react'
-import { Dimensions, Keyboard, ScaledSize, StatusBar } from 'react-native'
+import { Dimensions, Keyboard, ScaledSize } from 'react-native'
 import DrawerLayout, { DrawerState } from 'react-native-gesture-handler/DrawerLayout'
 import { HeaderButtons, Item } from 'react-navigation-header-buttons'
 import { ThemeContext } from 'styled-components'
@@ -150,7 +150,6 @@ export const AppStackComponent = (props: ModalStackNavigationProp<'AppStack'>) =
       onDrawerStateChanged={handleDrawerStateChange}
       renderNavigationView={() => !isLocked && <MainSideMenu drawerRef={drawerRef.current} />}
     >
-      <StatusBar translucent={!shouldOpenWebApp} />
       <DrawerLayout
         ref={noteDrawerRef}
         drawerWidth={getDefaultDrawerWidth(dimensions)}

packages/mobile/src/MobileWebAppContainer.tsx

@@ -1,11 +1,19 @@
 import { MobileDevice, MobileDeviceEvent } from '@Lib/Interface'
+import { IsDev } from '@Lib/Utils'
 import { ReactNativeToWebEvent } from '@standardnotes/snjs'
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
-import { Platform } from 'react-native'
+import { Platform, SafeAreaView } 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 = false
+const LoggingEnabled = IsDev
+
+const StyledSafeAreaView = styled(SafeAreaView)`
+  flex: 1;
+  ${(props) => `background-color: ${props.theme.stylekitBackgroundColor}`}
+`
 
 export const MobileWebAppContainer = () => {
   const [identifier, setIdentifier] = useState(Math.random())
@@ -18,6 +26,7 @@ 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(), [])
@@ -171,19 +180,20 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo
 
   /* eslint-disable @typescript-eslint/no-empty-function */
   return (
-    <WebView
+    <StyledSafeAreaView theme={theme}>
-      ref={webViewRef}
+      <WebView
-      source={{ uri: sourceUri }}
+        ref={webViewRef}
-      originWhitelist={['*']}
+        source={{ uri: sourceUri }}
-      contentInset={{ top: 30, bottom: 10 }}
+        originWhitelist={['*']}
-      onLoad={() => {}}
+        onLoad={() => {}}
-      onError={(err) => console.error('An error has occurred', err)}
+        onError={(err) => console.error('An error has occurred', err)}
-      onHttpError={() => console.error('An HTTP error occurred')}
+        onHttpError={() => console.error('An HTTP error occurred')}
-      onMessage={onMessage}
+        onMessage={onMessage}
-      allowFileAccess={true}
+        allowFileAccess={true}
-      allowUniversalAccessFromFileURLs={true}
+        allowUniversalAccessFromFileURLs={true}
-      injectedJavaScriptBeforeContentLoaded={injectedJS}
+        injectedJavaScriptBeforeContentLoaded={injectedJS}
-    />
+      />
+    </StyledSafeAreaView>
   )
   /* eslint-enable @typescript-eslint/no-empty-function */
 }