Skip to content

[fix] WebView 레이아웃 최적화를 위한 Safe Area Insets 주입 기능 구현 #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
SeongHoonC merged 2 commits into from
Jan 27, 2026
Merged

[fix] WebView 레이아웃 최적화를 위한 Safe Area Insets 주입 기능 구현 #11

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5a345f7
feat: WebView 안전 영역(Safe Area) 대응을 위한 CSS 변수 주입 로직 추가 (기기별 레이아웃 불일치 해결)
oesnuj Jan 25, 2026
54bc538
Merge branch 'main' into fix/webview-layout-safe-area
oesnuj Jan 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 27 additions & 15 deletions ui/club-detail/club-detail-screen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
import { MoaImage } from '@/components/moa-image';
import { MoaText } from '@/components/moa-text';
import { PermissionDialog } from '@/components/permission-dialog';
import { USER_EVENT } from '@/constants/eventname';
import { useMixpanelContext } from '@/contexts';
import { useSubscribedClubsContext } from '@/contexts/subscribed-clubs-context';
import { useMixpanelTrack, useWebViewMessageHandler } from '@/hooks';
import { Ionicons } from '@expo/vector-icons';
import Constants from 'expo-constants';
import { useLocalSearchParams, useRouter } from 'expo-router';
import { StatusBar } from 'expo-status-bar';
import { useMemo, useState } from 'react';
import { MoaImage } from "@/components/moa-image";
import { MoaText } from "@/components/moa-text";
import { PermissionDialog } from "@/components/permission-dialog";
import { USER_EVENT } from "@/constants/eventname";
import { useMixpanelContext } from "@/contexts";
import { useSubscribedClubsContext } from "@/contexts/subscribed-clubs-context";
import { useMixpanelTrack, useWebViewMessageHandler } from "@/hooks";
import { Ionicons } from "@expo/vector-icons";
import Constants from "expo-constants";
import { useLocalSearchParams, useRouter } from "expo-router";
import { StatusBar } from "expo-status-bar";
import { useMemo, useState } from "react";
import { ActivityIndicator, Platform, Share, TouchableOpacity } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { WebView } from 'react-native-webview';
import styled from 'styled-components/native';
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import { WebView } from "react-native-webview";
import styled from "styled-components/native";

export default function ClubWebViewScreen() {
const router = useRouter();
Expand All @@ -24,6 +24,7 @@ export default function ClubWebViewScreen() {
const { isSubscribed, toggleSubscribe } = useSubscribedClubsContext();
const { sessionId } = useMixpanelContext();
const trackEvent = useMixpanelTrack();
const insets = useSafeAreaInsets();

const webviewUrl = process.env.EXPO_PUBLIC_WEBVIEW_URL;

Expand Down Expand Up @@ -142,6 +143,14 @@ export default function ClubWebViewScreen() {
});
},
});

const injectJS = `
(function() {
document.documentElement.style.setProperty('--rn-safe-top', '${insets.top}px');
document.documentElement.style.setProperty('--rn-safe-bottom', '${insets.bottom}px');
})();
true;
`;
Comment on lines +147 to +153
Copy link

@coderabbitai coderabbitai bot Jan 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

fd "club-detail-screen.tsx" --type f

Repository: Moadong/moadong-react-native

Length of output: 109

🏁 Script executed:

wc -l ui/club-detail/club-detail-screen.tsx

Repository: Moadong/moadong-react-native

Length of output: 113

🏁 Script executed:

cat -n ui/club-detail/club-detail-screen.tsx | sed -n '1,160p'

Repository: Moadong/moadong-react-native

Length of output: 6110

🏁 Script executed:

cat -n ui/club-detail/club-detail-screen.tsx | sed -n '160,262p'

Repository: Moadong/moadong-react-native

Length of output: 3376

🏁 Script executed:

rg "useEffect|injectJavaScript|insets" ui/club-detail/club-detail-screen.tsx -A 3 -B 1

Repository: Moadong/moadong-react-native

Length of output: 434

🏁 Script executed:

rg "injectedJavaScript|injectJavaScript|webviewRef" --type tsx --type ts -B 2 -A 2

Repository: Moadong/moadong-react-native

Length of output: 99

🏁 Script executed:

rg "injectedJavaScript|injectJavaScript|webviewRef" -B 2 -A 2

Repository: Moadong/moadong-react-native

Length of output: 469

🏁 Script executed:

rg "onLayout|onOrientationChange|useEffect|useCallback" ui/club-detail/club-detail-screen.tsx

Repository: Moadong/moadong-react-native

Length of output: 54

🏁 Script executed:

rg "useSafeAreaInsets|useWindowDimensions|Dimensions.addEventListener" -B 2 -A 2

Repository: Moadong/moadong-react-native

Length of output: 2820

기기 회전 및 멀티윈도우 시 인셋 값이 업데이트되지 않음

injectedJavaScript는 WebView 로드 시점에 한 번만 실행되므로, 기기 회전이나 멀티윈도우 진입 시 useSafeAreaInsets()에서 반환하는 값이 변경되어도 WebView 내 CSS 변수(--rn-safe-top, --rn-safe-bottom)는 초기값으로 유지됩니다. WebView ref를 생성하고 useEffect에서 insets 변경을 감지하여 injectJavaScript() 메서드로 재주입하거나, WebView의 onLayout 핸들러를 통해 적절히 대응해야 합니다.

🤖 Prompt for AI Agents 
In `@ui/club-detail/club-detail-screen.tsx` around lines 144 - 150, The
injectedJavaScript string (injectJS) runs only at WebView load so CSS vars
--rn-safe-top/--rn-safe-bottom stay stale after rotations/multi-window; create a
WebView ref (e.g., webviewRef) and add a useEffect that watches
useSafeAreaInsets() values and calls
webviewRef.current.injectJavaScript(injectJS) whenever insets change, and/or
attach an onLayout handler on the WebView to re-inject when layout changes;
update references in club-detail-screen.tsx to use the WebView ref, the
injectJavaScript() method, and the existing injectJS constant so the CSS
variables are updated dynamically.


return (
<Container edges={['bottom']}>
Expand Down Expand Up @@ -174,6 +183,9 @@ export default function ClubWebViewScreen() {
onLoadEnd={handleLoadEnd}
onError={handleError}
onMessage={handleMessage}
injectedJavaScript={injectJS}
contentInsetAdjustmentBehavior="never"
automaticallyAdjustContentInsets={false}
startInLoadingState={false}
scalesPageToFit={true}
showsHorizontalScrollIndicator={false}
Expand Down