Fix webview safe area and optimize for mobile #22
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Add SafeAreaView to native app for proper safe area handling on iOS/Android - Inject mobile optimization JavaScript into WebView (viewport settings, touch optimization) - Add bottom padding to WebView content to prevent overlap with navigation bar - Update SimpleNavBar to respect safe area insets dynamically - Add mobile-optimized viewport meta tags to web layout - Add mobile-specific CSS optimizations (tap highlight, touch action, overscroll) - Prevent unwanted text selection on mobile devices This fixes the issue where the WebView content was not respecting safe areas and the bottom navigation bar was overlapping with content.
…Name components - Create React Native Logo component using react-native-svg - Create React Native LogoName component with gradient support - Replace temporary circular placeholder with actual brand logos - Update LoginScreen to use Logo and LogoName SVG components - Maintain "오직 내 만을 위한 장 건강 케어" description text The login screen now displays the official GutHub logo and brand name instead of the temporary text-based placeholder.
- Create web-based BottomNavBar component with fixed positioning - Add tab icons to web public folder (BottomNav/) - Integrate BottomNavBar into home page Layout with 100px bottom padding - Remove native SimpleNavBar and its import from native app - Clean up injected JavaScript (remove paddingBottom as web handles it) - Update SafeAreaView edges to include both top and bottom This change centralizes navigation in the web layer, making it more efficient and easier to maintain. The native app now only renders a WebView, while the web handles all navigation and UI.
- Add BackHandler to intercept Android back button press - Implement WebView navigation stack control with canGoBack check - Add "Press back again to exit" toast message with 2-second timeout - Exit app only after double back press when at navigation root - Track WebView navigation state with onNavigationStateChange This provides a native-like back navigation experience where: 1. Back button navigates within WebView history 2. At root, first press shows exit warning toast 3. Second press within 2 seconds exits the app
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
#️⃣연관된 이슈
ex) #이슈번호, #이슈번호
📝작업 내용
이번 PR에서 작업한 내용을 간략히 설명해주세요(이미지 첨부 가능)
[ ]
[ ]
[ ]
스크린샷 (선택)
💬리뷰 요구사항(선택)
리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요
ex) 메서드 XXX의 이름을 더 잘 짓고 싶은데 혹시 좋은 명칭이 있을까요?