Fix mobile navigation header overlap with safe area padding (#3892) - #3952
Conversation
…amic island Adds safe area top insets to screen headers across all mobile screens to prevent title overlap with iOS notch/Dynamic Island area. Closes riteshbonthalakoti#3892
|
Someone is attempting to deploy a commit to the ritesh Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughChangesThe mobile user screens now calculate top safe-area insets with Mobile safe-area headers
Estimated code review effort: 2 (Simple) | ~10 minutes Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@MobileApp/src/screens/user/CreateTicketScreen.js`:
- Around line 76-78: Use a single top safe-area strategy in
CreateTicketScreen.js (lines 76-78), KnowledgeBaseScreen.js (lines 76-79),
NotificationsScreen.js (lines 128-129), ProfileScreen.js (lines 211-217),
TicketDetailScreen.js (lines 130-132), TicketTrackingScreen.js (lines 104-105),
TicketsListScreen.js (lines 118-121), and DashboardScreen.js (lines 123-132):
either retain SafeAreaView top handling and remove or adjust the corresponding
manual insets.top header padding, or disable top handling and retain manual
padding. Apply the same consistent approach across all affected screens.
In `@MobileApp/src/screens/user/DashboardScreen.js`:
- Line 132: Define the insets value before the header render in DashboardScreen
by importing and calling useSafeAreaInsets(), or reuse an already available
inset source. Ensure the existing paddingTop calculation using insets.top
remains valid and no longer references an undefined variable.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: cd1a7130-69cc-4a90-9788-97ce80723ae5
📒 Files selected for processing (8)
MobileApp/src/screens/user/CreateTicketScreen.jsMobileApp/src/screens/user/DashboardScreen.jsMobileApp/src/screens/user/KnowledgeBaseScreen.jsMobileApp/src/screens/user/NotificationsScreen.jsMobileApp/src/screens/user/ProfileScreen.jsMobileApp/src/screens/user/TicketDetailScreen.jsMobileApp/src/screens/user/TicketTrackingScreen.jsMobileApp/src/screens/user/TicketsListScreen.js
| <SafeAreaView style={styles.container} edges={['top']}> | ||
| <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={{ flex: 1 }}> | ||
| <View style={styles.header}> | ||
| <View style={[styles.header, { paddingTop: insets.top + 10 }]}> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | 🏗️ Heavy lift
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "React Native SafeAreaView docs from package metadata, if present:"
if [ -d MobileApp/node_modules/react-native-screens ]; then
rg -n "SafeAreaView|edges" MobileApp/node_modules/react-native-screens -g '*md' -g '*js' | head -n 80 || true
fi
echo
echo "Locate SafeAreaView definitions/usages:"
rg -n "SafeAreaView|useWindowDimensions|useSafeArea|insets|edges=\[" MobileApp/src/screens/user -n
echo
echo "Read relevant snippets:"
for f in \
MobileApp/src/screens/user/CreateTicketScreen.js \
MobileApp/src/screens/user/KnowledgeBaseScreen.js \
MobileApp/src/screens/user/NotificationsScreen.js \
MobileApp/src/screens/user/ProfileScreen.js \
MobileApp/src/screens/user/TicketDetailScreen.js \
MobileApp/src/screens/user/TicketTrackingScreen.js \
MobileApp/src/screens/user/TicketsListScreen.js \
MobileApp/src/screens/user/DashboardScreen.js
do
echo "--- $f"
wc -l "$f"
ast-grep outline "$f" | sed -n '1,120p'
doneRepository: riteshbonthalakoti/HELPDESK.AI
Length of output: 6862
🌐 Web query:
react-native-safe-area-context SafeAreaView edges default top bottom documentation
💡 Result:
In the react-native-safe-area-context library, the SafeAreaView component's edges prop defines which edges of the view should have safe area insets applied [1]. The default value for the edges prop is ["top", "right", "bottom", "left"], meaning it applies insets to all four sides of the component by default [2][1][3]. You can customize this prop to exclude specific edges by passing an array containing only the edges you wish to include, such as edges={['right', 'bottom', 'left']} to exclude the top edge [1]. Additionally, the edges prop supports an object configuration for finer control, allowing you to specify an EdgeMode ('off', 'additive', or 'maximum') for each edge individually [1].
Citations:
- 1: https://appandflow.github.io/react-native-safe-area-context/api/safe-area-view/
- 2: https://docs.expo.dev/versions/latest/sdk/safe-area-context/
- 3: https://docs.expo.dev/versions/v53.0.0/sdk/safe-area-context/
Use one top safe-area strategy per affected screen.
SafeAreaView already applies top insets, so combining it with inset.top header padding adds a second padding layer. Either keep SafeAreaView edges={['top']} and remove/header-adjust the manual top padding, or disable SafeAreaView top handling and keep manual padding.
📍 Affects 8 files
MobileApp/src/screens/user/CreateTicketScreen.js#L76-L78(this comment)MobileApp/src/screens/user/KnowledgeBaseScreen.js#L76-L79MobileApp/src/screens/user/NotificationsScreen.js#L128-L129MobileApp/src/screens/user/ProfileScreen.js#L211-L217MobileApp/src/screens/user/TicketDetailScreen.js#L130-L132MobileApp/src/screens/user/TicketTrackingScreen.js#L104-L105MobileApp/src/screens/user/TicketsListScreen.js#L118-L121MobileApp/src/screens/user/DashboardScreen.js#L123-L132
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@MobileApp/src/screens/user/CreateTicketScreen.js` around lines 76 - 78, Use a
single top safe-area strategy in CreateTicketScreen.js (lines 76-78),
KnowledgeBaseScreen.js (lines 76-79), NotificationsScreen.js (lines 128-129),
ProfileScreen.js (lines 211-217), TicketDetailScreen.js (lines 130-132),
TicketTrackingScreen.js (lines 104-105), TicketsListScreen.js (lines 118-121),
and DashboardScreen.js (lines 123-132): either retain SafeAreaView top handling
and remove or adjust the corresponding manual insets.top header padding, or
disable top handling and retain manual padding. Apply the same consistent
approach across all affected screens.
| > | ||
| {/* Header */} | ||
| <View style={styles.header}> | ||
| <View style={[styles.header, { paddingTop: insets.top + 16 }]}> |
There was a problem hiding this comment.
🩺 Stability & Availability | 🔴 Critical | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== locate file =="
fd -a 'DashboardScreen.js' . || true
echo "== file outline/contents around relevant lines =="
FILE=$(fd 'DashboardScreen.js' . | head -n1 || true)
if [ -n "${FILE:-}" ]; then
wc -l "$FILE"
sed -n '1,180p' "$FILE" | cat -n
fi
echo "== safe area imports/usages nearby =="
rg -n "useSafeAreaInsets|SafeAreaProvider|SafeAreaView|insets" MobileApp/src/screens/user/DashboardScreen.js 2>/dev/null || trueRepository: riteshbonthalakoti/HELPDESK.AI
Length of output: 7750
Define insets before using it.
MobileApp/src/screens/user/DashboardScreen.js imports SafeAreaView but does not import or bind useSafeAreaInsets(), while the header style reads insets.top + 16. This non-loading render path will throw ReferenceError: insets is not defined; add the hook import/binding or use an available inset value.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@MobileApp/src/screens/user/DashboardScreen.js` at line 132, Define the insets
value before the header render in DashboardScreen by importing and calling
useSafeAreaInsets(), or reuse an already available inset source. Ensure the
existing paddingTop calculation using insets.top remains valid and no longer
references an undefined variable.
1 participant
Changes
eact-native-safe-area-context\
Screens Modified
Closes #3892
Summary by CodeRabbit