fix: Fixed issue with keyboard on Android covering content (#2899)

packages/mobile/src/MobileWebAppContainer.tsx

@@ -2,7 +2,7 @@
 
 import { ApplicationEvent, ReactNativeToWebEvent } from '@standardnotes/snjs'
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { Button, Dimensions, Keyboard, Platform, Text, View } from 'react-native'
+import { Button, Dimensions, Keyboard, KeyboardEvent, Platform, Text, View } from 'react-native'
 import VersionInfo from 'react-native-version-info'
 import { WebView, WebViewMessageEvent } from 'react-native-webview'
 import { OnShouldStartLoadWithRequest, WebViewNativeConfig } from 'react-native-webview/lib/WebViewTypes'
@@ -58,7 +58,7 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo
       webViewRef.current?.postMessage(JSON.stringify({ reactNativeEvent: event, messageType: 'event' }))
     })
 
-    const keyboardShowListener = Keyboard.addListener('keyboardWillShow', () => {
+    const keyboardWillShowListener = Keyboard.addListener('keyboardWillShow', () => {
       device.reloadStatusBarStyle(false)
       webViewRef.current?.postMessage(
         JSON.stringify({
@@ -78,43 +78,54 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo
       )
     })
 
-    const keyboardHideListener = Keyboard.addListener('keyboardDidHide', () => {
+    const fireKeyboardSizeChangeEvent = (e: KeyboardEvent) => {
-      device.reloadStatusBarStyle(false)
-    })
-
-    const keyboardWillChangeFrame = Keyboard.addListener('keyboardWillChangeFrame', (e) => {
       webViewRef.current?.postMessage(
         JSON.stringify({
-          reactNativeEvent: ReactNativeToWebEvent.KeyboardFrameWillChange,
+          reactNativeEvent: ReactNativeToWebEvent.KeyboardSizeChanged,
           messageType: 'event',
           messageData: {
             height: e.endCoordinates.height,
             contentHeight: e.endCoordinates.screenY,
-            isFloatingKeyboard: e.endCoordinates.width !== Dimensions.get('window').width,
+            isFloatingKeyboard: Math.floor(e.endCoordinates.width) !== Math.floor(Dimensions.get('window').width),
           },
         }),
       )
+    }
+
+    const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', (e) => {
+      // iOS handles this using the `willChangeFrame` event instead
+      if (Platform.OS === 'android') {
+        fireKeyboardSizeChangeEvent(e)
+      }
+      device.reloadStatusBarStyle(false)
     })
 
-    const keyboardDidChangeFrame = Keyboard.addListener('keyboardDidChangeFrame', (e) => {
+    const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {
-      webViewRef.current?.postMessage(
+      // iOS handles this using the `willChangeFrame` event instead
-        JSON.stringify({
+      if (Platform.OS === 'android') {
-          reactNativeEvent: ReactNativeToWebEvent.KeyboardFrameDidChange,
+        webViewRef.current?.postMessage(
-          messageType: 'event',
+          JSON.stringify({
-          messageData: { height: e.endCoordinates.height, contentHeight: e.endCoordinates.screenY },
+            reactNativeEvent: ReactNativeToWebEvent.KeyboardDidHide,
-        }),
+            messageType: 'event',
-      )
+          }),
+        )
+      }
+      device.reloadStatusBarStyle(false)
+    })
+
+    const keyboardWillChangeFrame = Keyboard.addListener('keyboardWillChangeFrame', (e) => {
+      fireKeyboardSizeChangeEvent(e)
     })
 
     return () => {
       removeStateServiceListener()
       removeBackHandlerServiceListener()
       removeColorSchemeServiceListener()
-      keyboardShowListener.remove()
+      keyboardWillShowListener.remove()
-      keyboardHideListener.remove()
-      keyboardWillChangeFrame.remove()
-      keyboardDidChangeFrame.remove()
       keyboardWillHideListener.remove()
+      keyboardDidShowListener.remove()
+      keyboardDidHideListener.remove()
+      keyboardWillChangeFrame.remove()
     }
   }, [webViewRef, stateService, device, androidBackHandlerService, colorSchemeService])
 

packages/services/src/Domain/Event/WebAppEvent.ts

@@ -6,6 +6,5 @@ export enum WebAppEvent {
   PanelResized = 'PanelResized',
   WindowDidFocus = 'WindowDidFocus',
   WindowDidBlur = 'WindowDidBlur',
-  MobileKeyboardDidChangeFrame = 'MobileKeyboardDidChangeFrame',
   MobileKeyboardWillChangeFrame = 'MobileKeyboardWillChangeFrame',
 }

packages/snjs/lib/Client/ReactNativeToWebEvent.ts

@@ -5,10 +5,10 @@ export enum ReactNativeToWebEvent {
   LosingFocus = 'LosingFocus',
   AndroidBackButtonPressed = 'AndroidBackButtonPressed',
   ColorSchemeChanged = 'ColorSchemeChanged',
-  KeyboardFrameWillChange = 'KeyboardFrameWillChange',
+  KeyboardSizeChanged = 'KeyboardSizeChanged',
-  KeyboardFrameDidChange = 'KeyboardFrameDidChange',
   KeyboardWillShow = 'KeyboardWillShow',
   KeyboardWillHide = 'KeyboardWillHide',
+  KeyboardDidHide = 'KeyboardDidHide',
   ReceivedFile = 'ReceivedFile',
   ReceivedLink = 'ReceivedLink',
   ReceivedText = 'ReceivedText',

packages/ui-services/src/WebApplication/WebApplicationInterface.ts

@@ -20,7 +20,7 @@ export interface WebApplicationInterface extends ApplicationInterface {
     contentHeight: number
     isFloatingKeyboard: boolean
   }): void
-  handleMobileKeyboardDidChangeFrameEvent(frame: { height: number; contentHeight: number }): void
+  handleMobileKeyboardDidHideEvent(): void
   handleReceivedFileEvent(file: { name: string; mimeType: string; data: string }): void
   handleReceivedTextEvent(item: { text: string; title?: string }): Promise<void>
   handleReceivedLinkEvent(item: { link: string; title: string }): Promise<void>

packages/web/src/javascripts/Application/WebApplication.ts

@@ -357,8 +357,8 @@ export class WebApplication extends SNApplication implements WebApplicationInter
     this.notifyWebEvent(WebAppEvent.MobileKeyboardWillChangeFrame, frame)
   }
 
-  handleMobileKeyboardDidChangeFrameEvent(frame: { height: number; contentHeight: number }): void {
+  handleMobileKeyboardDidHideEvent(): void {
-    this.notifyWebEvent(WebAppEvent.MobileKeyboardDidChangeFrame, frame)
+    setCustomViewportHeight(100, 'vh', true)
   }
 
   handleOpenFilePreviewEvent({ id }: { id: string }): void {

packages/web/src/javascripts/NativeMobileWeb/MobileWebReceiver.ts

@@ -73,15 +73,13 @@ export class MobileWebReceiver {
       case ReactNativeToWebEvent.ColorSchemeChanged:
         void this.application.handleMobileColorSchemeChangeEvent()
         break
-      case ReactNativeToWebEvent.KeyboardFrameWillChange:
+      case ReactNativeToWebEvent.KeyboardSizeChanged:
         void this.application.handleMobileKeyboardWillChangeFrameEvent(
           messageData as { height: number; contentHeight: number; isFloatingKeyboard: boolean },
         )
         break
-      case ReactNativeToWebEvent.KeyboardFrameDidChange:
+      case ReactNativeToWebEvent.KeyboardDidHide:
-        void this.application.handleMobileKeyboardDidChangeFrameEvent(
+        void this.application.handleMobileKeyboardDidHideEvent()
-          messageData as { height: number; contentHeight: number },
-        )
         break
       case ReactNativeToWebEvent.ReceivedFile:
         void this.application.handleReceivedFileEvent(