fix(mobile): adjust status bar color to match current theme (#1624)

* feat: sync page theme color metadata with active theme bg

* fix: lint

* refactor: extract to method

* feat: recieve theme scheme change on mobile

* fix: handle issue where status bar color changes when keyboard appears on iOS

* fix: disable bouncing on web view

packages/mobile/src/Lib/Interface.ts

@@ -11,7 +11,7 @@ import {
   removeFromArray,
   TransferPayload,
 } from '@standardnotes/snjs'
-import { Alert, Linking, Platform } from 'react-native'
+import { Alert, Linking, Platform, StatusBar } from 'react-native'
 import FingerprintScanner from 'react-native-fingerprint-scanner'
 import FlagSecure from 'react-native-flag-secure-android'
 import { hide, show } from 'react-native-privacy-snapshot'
@@ -65,6 +65,7 @@ const showLoadFailForItemIds = (failedItemIds: string[]) => {
 export class MobileDevice implements MobileDeviceInterface {
   environment: Environment.Mobile = Environment.Mobile
   private eventObservers: MobileDeviceEventHandler[] = []
+  public isDarkMode = false
 
   constructor(private stateObserverService?: AppStateObserverService) {}
 
@@ -432,6 +433,16 @@ export class MobileDevice implements MobileDeviceInterface {
     }
   }
 
+  handleThemeSchemeChange(isDark: boolean): void {
+    this.isDarkMode = isDark
+
+    this.reloadStatusBarStyle()
+  }
+
+  reloadStatusBarStyle(animated = true) {
+    StatusBar.setBarStyle(this.isDarkMode ? 'light-content' : 'dark-content', animated)
+  }
+
   private notifyEvent(event: MobileDeviceEvent): void {
     for (const handler of this.eventObservers) {
       handler(event)

packages/mobile/src/MobileWebAppContainer.tsx

@@ -2,7 +2,7 @@ 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 { Platform } from 'react-native'
+import { Keyboard, Platform } from 'react-native'
 import { WebView, WebViewMessageEvent } from 'react-native-webview'
 import { AppStateObserverService } from './AppStateObserverService'
 
@@ -29,8 +29,18 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo
       webViewRef.current?.postMessage(JSON.stringify({ reactNativeEvent: event, messageType: 'event' }))
     })
 
+    const keyboardShowListener = Keyboard.addListener('keyboardWillShow', () => {
+      device.reloadStatusBarStyle(false)
+    })
+
+    const keyboardHideListener = Keyboard.addListener('keyboardDidHide', () => {
+      device.reloadStatusBarStyle(false)
+    })
+
     return () => {
       removeListener()
+      keyboardShowListener.remove()
+      keyboardHideListener.remove()
     }
   }, [webViewRef, stateService])
 
@@ -183,6 +193,7 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo
       allowFileAccess={true}
       allowUniversalAccessFromFileURLs={true}
       injectedJavaScriptBeforeContentLoaded={injectedJS}
+      bounces={false}
     />
   )
   /* eslint-enable @typescript-eslint/no-empty-function */