diff --git a/packages/mobile/src/MobileWebAppContainer.tsx b/packages/mobile/src/MobileWebAppContainer.tsx index 4c5b54957..0d903b834 100644 --- a/packages/mobile/src/MobileWebAppContainer.tsx +++ b/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, Keyboard, Platform, Text, View } from 'react-native' +import { Button, Dimensions, Keyboard, Platform, Text, View } from 'react-native' import VersionInfo from 'react-native-version-info' import { WebView, WebViewMessageEvent } from 'react-native-webview' import { OnShouldStartLoadWithRequest } from 'react-native-webview/lib/WebViewTypes' @@ -84,7 +84,11 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo JSON.stringify({ reactNativeEvent: ReactNativeToWebEvent.KeyboardFrameWillChange, messageType: 'event', - messageData: { height: e.endCoordinates.height, contentHeight: e.endCoordinates.screenY }, + messageData: { + height: e.endCoordinates.height, + contentHeight: e.endCoordinates.screenY, + isFloatingKeyboard: e.endCoordinates.width !== Dimensions.get('window').width, + }, }), ) }) diff --git a/packages/ui-services/src/WebApplication/WebApplicationInterface.ts b/packages/ui-services/src/WebApplication/WebApplicationInterface.ts index 3a8af4132..c874de4ec 100644 --- a/packages/ui-services/src/WebApplication/WebApplicationInterface.ts +++ b/packages/ui-services/src/WebApplication/WebApplicationInterface.ts @@ -14,7 +14,11 @@ export interface WebApplicationInterface extends ApplicationInterface { handleMobileLosingFocusEvent(): Promise handleMobileResumingFromBackgroundEvent(): Promise handleMobileColorSchemeChangeEvent(): void - handleMobileKeyboardWillChangeFrameEvent(frame: { height: number; contentHeight: number }): void + handleMobileKeyboardWillChangeFrameEvent(frame: { + height: number + contentHeight: number + isFloatingKeyboard: boolean + }): void handleMobileKeyboardDidChangeFrameEvent(frame: { height: number; contentHeight: number }): void handleReceivedFileEvent(file: { name: string; mimeType: string; data: string }): void handleReceivedTextEvent(item: { text: string; title?: string }): Promise diff --git a/packages/web/src/javascripts/Application/WebApplication.ts b/packages/web/src/javascripts/Application/WebApplication.ts index 34bdbaf9c..7932c48e2 100644 --- a/packages/web/src/javascripts/Application/WebApplication.ts +++ b/packages/web/src/javascripts/Application/WebApplication.ts @@ -373,10 +373,17 @@ export class WebApplication extends SNApplication implements WebApplicationInter void this.getThemeService().handleMobileColorSchemeChangeEvent() } - handleMobileKeyboardWillChangeFrameEvent(frame: { height: number; contentHeight: number }): void { + handleMobileKeyboardWillChangeFrameEvent(frame: { + height: number + contentHeight: number + isFloatingKeyboard: boolean + }): void { if (frame.contentHeight > 0) { setCustomViewportHeight(frame.contentHeight, 'px', true) } + if (frame.isFloatingKeyboard) { + setCustomViewportHeight(100, 'vh', true) + } this.notifyWebEvent(WebAppEvent.MobileKeyboardWillChangeFrame, frame) } diff --git a/packages/web/src/javascripts/NativeMobileWeb/MobileWebReceiver.ts b/packages/web/src/javascripts/NativeMobileWeb/MobileWebReceiver.ts index 428740b3e..9b5d8a42c 100644 --- a/packages/web/src/javascripts/NativeMobileWeb/MobileWebReceiver.ts +++ b/packages/web/src/javascripts/NativeMobileWeb/MobileWebReceiver.ts @@ -75,7 +75,7 @@ export class MobileWebReceiver { break case ReactNativeToWebEvent.KeyboardFrameWillChange: void this.application.handleMobileKeyboardWillChangeFrameEvent( - messageData as { height: number; contentHeight: number }, + messageData as { height: number; contentHeight: number; isFloatingKeyboard: boolean }, ) break case ReactNativeToWebEvent.KeyboardFrameDidChange: