feat(mobile): add FullScreenWKWebView for iOS WebView layout

- Create custom WKWebView subclass to override safe area insets - Enables full-screen WebView rendering without default padding Signed-off-by: Innei <[email protected]>
RSSNext · Feb 7, 2025 · 380da14 · 380da14
1 parent 3e6885b
commit 380da14
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 6 deletions.
diff --git a/apps/mobile/native/ios/SharedWebView/FullScreenWKWebview.swift b/apps/mobile/native/ios/SharedWebView/FullScreenWKWebview.swift
@@ -0,0 +1,13 @@
+//
+//  FullScreenWKWebview.swift
+//  FollowNative
+//
+//  Created by Innei on 2025/2/7.
+//
+
+import WebKit
+class FullScreenWKWebView: WKWebView {
+    override var safeAreaInsets: UIEdgeInsets {
+        return UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
+    }
+}
diff --git a/apps/mobile/native/ios/SharedWebView/SharedWebView.swift b/apps/mobile/native/ios/SharedWebView/SharedWebView.swift
@@ -46,12 +46,13 @@ class WebViewView: ExpoView {
             width: bounds.width,
             height: WebViewManager.state.contentHeight
         )
-
-        SharedWebViewModule.sharedWebView!.frame = rect
+      guard let webView = SharedWebViewModule.sharedWebView else {return }
+      webView.frame = rect
+      webView.scrollView.frame = rect
+
 
         frame = rect
         rctView.frame = rect
-
         onContentHeightChange(["height": Float(rect.height)])
 
     }

diff --git a/apps/mobile/native/ios/SharedWebView/WebViewManager.swift b/apps/mobile/native/ios/SharedWebView/WebViewManager.swift
@@ -166,9 +166,10 @@ enum WebViewManager {
         )
         configuration.userContentController.addUserScript(customSchemeScript)
 
-        let webView = WKWebView(frame: .zero, configuration: configuration)
+      let webView = WKWebView(frame: .zero, configuration: configuration)
         webView.scrollView.isScrollEnabled = false
         webView.scrollView.bounces = false
+      webView.scrollView.contentInsetAdjustmentBehavior = .never
 
         webView.isOpaque = false
         webView.backgroundColor = UIColor.clear

diff --git a/apps/mobile/src/components/native/webview/EntryContentWebView.tsx b/apps/mobile/src/components/native/webview/EntryContentWebView.tsx
@@ -36,7 +36,7 @@ export function EntryContentWebView(props: EntryContentWebViewProps) {
   return (
     <>
       <View
-        style={{ height: contentHeight }}
+        style={{ height: contentHeight, transform: [{ translateY: 0 }] }}
         onLayout={() => {
           SharedWebViewModule.evaluateJavaScript(
             `setEntry(JSON.parse(${JSON.stringify(JSON.stringify(entry))}))`,
@@ -50,6 +50,8 @@ export function EntryContentWebView(props: EntryContentWebViewProps) {
           url={htmlUrl}
         />
       </View>
+
+      <View className="bg-red h-24" />
       {__DEV__ && (
         <Portal>
           <View className="absolute left-4 flex-row gap-4 bottom-safe-offset-2">

diff --git a/apps/mobile/src/screens/(stack)/entries/[entryId]/index.tsx b/apps/mobile/src/screens/(stack)/entries/[entryId]/index.tsx
@@ -71,6 +71,7 @@ export default function EntryDetailPage() {
   const item = useEntry(entryId as string)
 
   const insets = useSafeAreaInsets()
+
   return (
     <BottomTabBarHeightContext.Provider value={insets.bottom}>
       <SafeNavigationScrollView

diff --git a/apps/mobile/web-app/html-renderer/src/HTML.tsx b/apps/mobile/web-app/html-renderer/src/HTML.tsx
@@ -54,7 +54,7 @@ export const HTML = <A extends keyof JSX.IntrinsicElements = "div">(props: HTMLP
     [children, remarkOptions],
   )
 
-  if (!markdownElement) return null
+  if (!markdownElement) return <div className="h-px" />
   return (
     <MarkdownRenderContainerRefContext.Provider value={refElement}>
       <MemoedDangerousHTMLStyle>{katexStyle}</MemoedDangerousHTMLStyle>