fix(mobile): increase font sizes and other mobile-centric improvements (#1907)

packages/mobile/src/MobileWebAppContainer.tsx

@@ -58,12 +58,34 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo
       device.reloadStatusBarStyle(false)
     })
 
+    const keyboardWillChangeFrame = Keyboard.addListener('keyboardWillChangeFrame', (e) => {
+      webViewRef.current?.postMessage(
+        JSON.stringify({
+          reactNativeEvent: ReactNativeToWebEvent.KeyboardFrameWillChange,
+          messageType: 'event',
+          messageData: { height: e.endCoordinates.height, contentHeight: e.endCoordinates.screenY },
+        }),
+      )
+    })
+
+    const keyboardDidChangeFrame = Keyboard.addListener('keyboardDidChangeFrame', (e) => {
+      webViewRef.current?.postMessage(
+        JSON.stringify({
+          reactNativeEvent: ReactNativeToWebEvent.KeyboardFrameDidChange,
+          messageType: 'event',
+          messageData: { height: e.endCoordinates.height, contentHeight: e.endCoordinates.screenY },
+        }),
+      )
+    })
+
     return () => {
       removeStateServiceListener()
       removeBackHandlerServiceListener()
       removeColorSchemeServiceListener()
       keyboardShowListener.remove()
       keyboardHideListener.remove()
+      keyboardWillChangeFrame.remove()
+      keyboardDidChangeFrame.remove()
     }
   }, [webViewRef, stateService, device, androidBackHandlerService, colorSchemeService])
 
@@ -198,7 +220,7 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo
 
   const onFunctionMessage = async (functionName: string, messageId: string, args: any) => {
     const returnValue = await (device as any)[functionName](...args)
-    if (LoggingEnabled) {
+    if (LoggingEnabled && functionName !== 'consoleLog') {
       console.log(`Native device function ${functionName} called`)
     }
     webViewRef.current?.postMessage(JSON.stringify({ messageId, returnValue, messageType: 'reply' }))
@@ -253,6 +275,12 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo
       injectedJavaScriptBeforeContentLoaded={injectedJS}
       bounces={false}
       keyboardDisplayRequiresUserAction={false}
+      scalesPageToFit={true}
+      /**
+       * This disables the global window scroll but keeps scroll within div elements like lists and textareas.
+       * This is needed to prevent the keyboard from pushing the webview up and down when it appears and disappears.
+       */
+      scrollEnabled={false}
     />
   )
 }