diff --git a/packages/mobile/src/MobileWebAppContainer.tsx b/packages/mobile/src/MobileWebAppContainer.tsx index 346aa9d13..2e01aeebf 100644 --- a/packages/mobile/src/MobileWebAppContainer.tsx +++ b/packages/mobile/src/MobileWebAppContainer.tsx @@ -43,6 +43,7 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo const _reviewService = useRef(new ReviewService(device)) const [showAndroidWebviewUpdatePrompt, setShowAndroidWebviewUpdatePrompt] = useState(false) + const [didLoadEnd, setDidLoadEnd] = useState(false) const insets = useSafeAreaInsets() @@ -136,7 +137,7 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo keyboardDidHideListener.remove() keyboardWillChangeFrame.remove() } - }, [webViewRef, stateService, device, androidBackHandlerService, colorSchemeService]) + }, [webViewRef, stateService, device, androidBackHandlerService, colorSchemeService, insets.bottom]) useEffect(() => { return notifee.onForegroundEvent(({ type, detail }) => { @@ -354,30 +355,22 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo } }, []) - const [didAppLaunch, setDidAppLaunch] = useState(false) useEffect(() => { return device.addApplicationEventReceiver((event) => { if (event === ApplicationEvent.Launched) { receivedSharedItemsHandler.current.setIsApplicationLaunched(true) - setDidAppLaunch(true) } }) }, [device]) - useEffect(() => { - if (!didAppLaunch) { - return - } - webViewRef.current?.postMessage( - JSON.stringify({ - reactNativeEvent: ReactNativeToWebEvent.UpdateSafeAreaInsets, - messageType: 'event', - messageData: insets, - }), - ) - }, [didAppLaunch, insets]) - - const [didLoadEnd, setDidLoadEnd] = useState(false) + const injectJS = ` + document.documentElement.style.setProperty('--safe-area-inset-top', '${insets.top}px'); + document.documentElement.style.setProperty('--safe-area-inset-bottom', '${insets.bottom}px'); + document.documentElement.style.setProperty('--safe-area-inset-left', '${insets.left}px'); + document.documentElement.style.setProperty('--safe-area-inset-right', '${insets.right}px'); + true; + ` + webViewRef.current?.injectJavaScript(injectJS) if (showAndroidWebviewUpdatePrompt) { return ( diff --git a/packages/snjs/lib/Client/ReactNativeToWebEvent.ts b/packages/snjs/lib/Client/ReactNativeToWebEvent.ts index 6f28ad15c..aa2c758c5 100644 --- a/packages/snjs/lib/Client/ReactNativeToWebEvent.ts +++ b/packages/snjs/lib/Client/ReactNativeToWebEvent.ts @@ -10,7 +10,6 @@ export enum ReactNativeToWebEvent { KeyboardWillHide = 'KeyboardWillHide', KeyboardDidShow = 'KeyboardDidShow', KeyboardDidHide = 'KeyboardDidHide', - UpdateSafeAreaInsets = 'UpdateSafeAreaInsets', ReceivedFile = 'ReceivedFile', ReceivedLink = 'ReceivedLink', ReceivedText = 'ReceivedText', diff --git a/packages/ui-services/src/WebApplication/WebApplicationInterface.ts b/packages/ui-services/src/WebApplication/WebApplicationInterface.ts index 0dd48f766..f2d2bac3d 100644 --- a/packages/ui-services/src/WebApplication/WebApplicationInterface.ts +++ b/packages/ui-services/src/WebApplication/WebApplicationInterface.ts @@ -21,7 +21,6 @@ export interface WebApplicationInterface extends ApplicationInterface { isFloatingKeyboard: boolean }): void handleMobileKeyboardDidHideEvent(): void - handleUpdateSafeAreaInsets(insets: { top: number; bottom: number; left: number; right: number }): void handleReceivedFileEvent(file: { name: string; mimeType: string; data: string }): void handleReceivedTextEvent(item: { text: string; title?: string }): Promise handleReceivedLinkEvent(item: { link: string; title: string }): Promise diff --git a/packages/web/src/javascripts/Application/WebApplication.ts b/packages/web/src/javascripts/Application/WebApplication.ts index 6a52ec3f1..46c91062b 100644 --- a/packages/web/src/javascripts/Application/WebApplication.ts +++ b/packages/web/src/javascripts/Application/WebApplication.ts @@ -361,12 +361,6 @@ export class WebApplication extends SNApplication implements WebApplicationInter setCustomViewportHeight(100, 'vh', true) } - handleUpdateSafeAreaInsets(insets: { top: number; bottom: number; left: number; right: number }) { - for (const [key, value] of Object.entries(insets)) { - document.documentElement.style.setProperty(`--safe-area-inset-${key}`, `${value}px`) - } - } - handleOpenFilePreviewEvent({ id }: { id: string }): void { const file = this.items.findItem(id) if (!file) { diff --git a/packages/web/src/javascripts/NativeMobileWeb/MobileWebReceiver.ts b/packages/web/src/javascripts/NativeMobileWeb/MobileWebReceiver.ts index 890d15bc8..959d9ed8b 100644 --- a/packages/web/src/javascripts/NativeMobileWeb/MobileWebReceiver.ts +++ b/packages/web/src/javascripts/NativeMobileWeb/MobileWebReceiver.ts @@ -81,11 +81,6 @@ export class MobileWebReceiver { case ReactNativeToWebEvent.KeyboardDidHide: void this.application.handleMobileKeyboardDidHideEvent() break - case ReactNativeToWebEvent.UpdateSafeAreaInsets: - void this.application.handleUpdateSafeAreaInsets( - messageData as { top: number; left: number; bottom: number; right: number }, - ) - break case ReactNativeToWebEvent.ReceivedFile: void this.application.handleReceivedFileEvent( messageData as {