chore: enable edge to edge on android - #7157
Conversation
GitHub Actions
Error
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughThe PR enables Android edge-to-edge display by setting Android Edge-to-Edge Configuration
Safe-Area Inset Layout Updates
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Suggested reviewers
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (14)
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 |
GitHub Actions
Error
GitHub Actions
Error
GitHub Actions
Error
GitHub Actions
Error
GitHub Actions
Error
GitHub Actions
Error
GitHub Actions
Error
GitHub Actions
Error
GitHub Actions
Error
GitHub Actions
Error
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
GitHub Actions
Error
GitHub Actions
Error
GitHub Actions
Error
GitHub Actions
Error
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
app/containers/ActionSheet/useActionSheetDetents.ts (1)
48-87:⚠️ Potential issue | 🟠 MajorAdd
fontScaleto the useMemo dependency array.
CANCEL_HEIGHTdepends onfontScalefromuseWindowDimensions(), but the memo doesn't includefontScalein its dependencies. When the user changes text size (accessibility setting),fontScaleupdates but the memo won't recompute, leaving detent calculations stale.Fix
- }, [contentHeight, hasCancel, headerHeight, itemHeight, optionsLength, snaps, windowHeight]); + }, [contentHeight, fontScale, hasCancel, headerHeight, itemHeight, optionsLength, snaps, windowHeight]);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/containers/ActionSheet/useActionSheetDetents.ts` around lines 48 - 87, The memo currently computes CANCEL_HEIGHT from fontScale (via useWindowDimensions()) but does not include fontScale in the useMemo dependency array, so detents won't update when fontScale changes; update the dependency array for the useMemo that returns { detents, maxHeight, scrollEnabled } to include fontScale (alongside contentHeight, hasCancel, headerHeight, itemHeight, optionsLength, snaps, windowHeight) so that CANCEL_HEIGHT and all derived calculations (maxSnap, measuredHeight, etc.) are recomputed when fontScale changes.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Outside diff comments:
In `@app/containers/ActionSheet/useActionSheetDetents.ts`:
- Around line 48-87: The memo currently computes CANCEL_HEIGHT from fontScale
(via useWindowDimensions()) but does not include fontScale in the useMemo
dependency array, so detents won't update when fontScale changes; update the
dependency array for the useMemo that returns { detents, maxHeight,
scrollEnabled } to include fontScale (alongside contentHeight, hasCancel,
headerHeight, itemHeight, optionsLength, snaps, windowHeight) so that
CANCEL_HEIGHT and all derived calculations (maxSnap, measuredHeight, etc.) are
recomputed when fontScale changes.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 924d26f6-ed5c-4379-aa92-9aaff1894492
📒 Files selected for processing (8)
android/gradle.propertiesapp/containers/ActionSheet/ActionSheet.tsxapp/containers/ActionSheet/BottomSheetContent.tsxapp/containers/ActionSheet/useActionSheetDetents.test.tsxapp/containers/ActionSheet/useActionSheetDetents.tsapp/containers/MessageComposer/hooks/useEmojiKeyboard.tsxapp/views/DirectoryView/index.tsxapp/views/JitsiMeetView/index.tsx
📜 Review details
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: ESLint and Test / run-eslint-and-test
- GitHub Check: format
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{js,ts,jsx,tsx}: Use descriptive names for functions, variables, and classes that clearly convey their purpose
Write comments that explain the 'why' behind code decisions, not the 'what'
Keep functions small and focused on a single responsibility
Use const by default, let when reassignment is needed, and avoid var
Prefer async/await over .then() chains for handling asynchronous operations
Use explicit error handling with try/catch blocks for async operations
Avoid deeply nested code; refactor complex logic into helper functions
Files:
app/views/JitsiMeetView/index.tsxapp/views/DirectoryView/index.tsxapp/containers/ActionSheet/BottomSheetContent.tsxapp/containers/MessageComposer/hooks/useEmojiKeyboard.tsxapp/containers/ActionSheet/useActionSheetDetents.tsapp/containers/ActionSheet/ActionSheet.tsxapp/containers/ActionSheet/useActionSheetDetents.test.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx}: Use TypeScript for type safety; add explicit type annotations to function parameters and return types
Prefer interfaces over type aliases for defining object shapes in TypeScript
Use enums for sets of related constants rather than magic strings or numbers
**/*.{ts,tsx}: Use TypeScript with strict mode enabled and baseUrl set to app/ for module imports
Support iOS 13.4+ and Android 6.0+ as minimum target platforms
Files:
app/views/JitsiMeetView/index.tsxapp/views/DirectoryView/index.tsxapp/containers/ActionSheet/BottomSheetContent.tsxapp/containers/MessageComposer/hooks/useEmojiKeyboard.tsxapp/containers/ActionSheet/useActionSheetDetents.tsapp/containers/ActionSheet/ActionSheet.tsxapp/containers/ActionSheet/useActionSheetDetents.test.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,js,jsx}: Use tabs for indentation with single quotes, 130 character line width, no trailing commas, and avoid arrow function parentheses when possible
Use ESLint with@rocket.chat/eslint-configbase including React, React Native, TypeScript, and Jest plugins
Files:
app/views/JitsiMeetView/index.tsxapp/views/DirectoryView/index.tsxapp/containers/ActionSheet/BottomSheetContent.tsxapp/containers/MessageComposer/hooks/useEmojiKeyboard.tsxapp/containers/ActionSheet/useActionSheetDetents.tsapp/containers/ActionSheet/ActionSheet.tsxapp/containers/ActionSheet/useActionSheetDetents.test.tsx
app/views/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Create view components (screens) in app/views/ directory
Files:
app/views/JitsiMeetView/index.tsxapp/views/DirectoryView/index.tsx
app/containers/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Create reusable UI components in app/containers/ directory
Files:
app/containers/ActionSheet/BottomSheetContent.tsxapp/containers/MessageComposer/hooks/useEmojiKeyboard.tsxapp/containers/ActionSheet/useActionSheetDetents.tsapp/containers/ActionSheet/ActionSheet.tsxapp/containers/ActionSheet/useActionSheetDetents.test.tsx
🧠 Learnings (9)
📓 Common learnings
Learnt from: Rohit3523
Repo: RocketChat/Rocket.Chat.ReactNative PR: 6930
File: package.json:101-101
Timestamp: 2026-02-05T13:55:06.688Z
Learning: The RocketChat/Rocket.Chat.ReactNative repository uses a fork of react-native-image-crop-picker (RocketChat/react-native-image-crop-picker) with custom Android edge-to-edge fixes, not the upstream ivpusic/react-native-image-crop-picker package. Dependencies should reference commit pins from the RocketChat fork.
📚 Learning: 2026-04-22T22:57:58.545Z
Learnt from: CR
Repo: RocketChat/Rocket.Chat.ReactNative PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-04-22T22:57:58.545Z
Learning: Applies to {app/sagas/videoConf.ts,app/lib/methods/videoConf.ts} : Implement video conferencing in app/sagas/videoConf.ts and app/lib/methods/videoConf.ts using Redux actions, reducers, and sagas for server-managed Jitsi integration
Applied to files:
app/views/JitsiMeetView/index.tsx
📚 Learning: 2026-04-22T22:57:58.545Z
Learnt from: CR
Repo: RocketChat/Rocket.Chat.ReactNative PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-04-22T22:57:58.545Z
Learning: Applies to app/AppContainer.tsx : Use AppContainer.tsx as the root navigation container that switches between authentication states
Applied to files:
app/views/JitsiMeetView/index.tsx
📚 Learning: 2026-04-22T22:57:58.545Z
Learnt from: CR
Repo: RocketChat/Rocket.Chat.ReactNative PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-04-22T22:57:58.545Z
Learning: Applies to app/index.tsx : Set up Redux provider, theme, navigation, and notifications in app/index.tsx
Applied to files:
app/views/JitsiMeetView/index.tsxapp/containers/MessageComposer/hooks/useEmojiKeyboard.tsxapp/containers/ActionSheet/ActionSheet.tsx
📚 Learning: 2026-04-22T22:57:58.545Z
Learnt from: CR
Repo: RocketChat/Rocket.Chat.ReactNative PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-04-22T22:57:58.545Z
Learning: Use React 19 with React Native 0.79 and Expo 53
Applied to files:
app/views/JitsiMeetView/index.tsxapp/containers/MessageComposer/hooks/useEmojiKeyboard.tsx
📚 Learning: 2026-04-04T21:34:30.268Z
Learnt from: Rohit3523
Repo: RocketChat/Rocket.Chat.ReactNative PR: 6808
File: app/containers/MessageComposer/components/ComposerInput.tsx:337-341
Timestamp: 2026-04-04T21:34:30.268Z
Learning: In Rocket.Chat React Native, the markdown composer's autocomplete insertion (ComposerInput.tsx onAutocompleteItemSelected) does NOT need to add a space between an underscore italic delimiter `_` and a `@` or `#` mention sigil. The web platform (using the same rocket.chat/message-parser) does not add such a space either, so parity with web is the correct behavior. The previous learning about "space between `_` and mention sigil" applies only to test/story file content strings, not to the composer's runtime autocomplete behavior.
Applied to files:
app/containers/MessageComposer/hooks/useEmojiKeyboard.tsx
📚 Learning: 2026-04-22T22:57:58.545Z
Learnt from: CR
Repo: RocketChat/Rocket.Chat.ReactNative PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-04-22T22:57:58.545Z
Learning: Applies to **/*.{ts,tsx} : Support iOS 13.4+ and Android 6.0+ as minimum target platforms
Applied to files:
app/containers/MessageComposer/hooks/useEmojiKeyboard.tsxapp/containers/ActionSheet/ActionSheet.tsx
📚 Learning: 2026-04-22T22:57:58.545Z
Learnt from: CR
Repo: RocketChat/Rocket.Chat.ReactNative PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-04-22T22:57:58.545Z
Learning: Applies to app/theme.tsx : Define theming context in app/theme.tsx
Applied to files:
app/containers/MessageComposer/hooks/useEmojiKeyboard.tsx
📚 Learning: 2026-04-22T22:57:58.545Z
Learnt from: CR
Repo: RocketChat/Rocket.Chat.ReactNative PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-04-22T22:57:58.545Z
Learning: Applies to app/lib/hooks/useResponsiveLayout/**/*.{ts,tsx} : Implement responsive layouts using useResponsiveLayout hook to switch between master-detail on tablets and single stack on phones
Applied to files:
app/containers/ActionSheet/ActionSheet.tsx
🔇 Additional comments (7)
app/views/JitsiMeetView/index.tsx (1)
5-7: Import update looks good.No concerns in this changed segment; this is a clean import adjustment.
app/containers/ActionSheet/BottomSheetContent.tsx (1)
38-43: Looks good.Using the safe-area bottom inset as the only bottom padding source matches the edge-to-edge refactor and keeps spacing tied to the device inset.
app/containers/MessageComposer/hooks/useEmojiKeyboard.tsx (1)
79-98: Looks good.The new
bottom-based notch handling keeps keyboard spacing consistent across platforms and lines up with the safe-area driven refactor.app/containers/ActionSheet/useActionSheetDetents.test.tsx (1)
41-71: Looks good.The updated expectations now match the hook's no-
bottomInsetformula.app/containers/ActionSheet/ActionSheet.tsx (1)
4-9: Looks good.The new
disableContentPanningwiring and iOS-onlycontentMinHeightbehavior align with the updated detent and inset flow.Also applies to: 79-92
app/views/DirectoryView/index.tsx (1)
172-185: Looks good.Removing the explicit
enableContentPanningGestureoverride keeps this screen aligned with the new ActionSheet default behavior.android/gradle.properties (1)
48-51: Verify the host activity before enabling this flag.
edgeToEdgeEnabledonly takes effect withReactActivity; if the Android entry point uses a custom activity, this property will be ignored and the edge-to-edge change won't ship.
|
Android Build Available Rocket.Chat 4.74.0.109244 Internal App Sharing: https://play.google.com/apps/test/RQQ8k09hlnQ/ahAO29uNTUCcHcTxMTkN323INV73jUahH-g8FkBHdm9qRmxxEvJW8x3npDxzZ4nhCsDk8h6rfUSu5VMDbjE3ioEbes |
|
iOS Build Available Rocket.Chat 4.74.0.109245 |
| const numColumns = Math.trunc(parentWidth / EMOJI_BUTTON_SIZE); | ||
| const marginHorizontal = (parentWidth % EMOJI_BUTTON_SIZE) / 2; | ||
| const contentPaddingBottom = bottomSheet ? Math.max(0, MIN_BOTTOM_SHEET_BREATHING_ROOM - bottom) : undefined; | ||
| const contentPaddingBottom = bottomSheet ? MIN_BOTTOM_SHEET_BREATHING_ROOM : undefined; |
There was a problem hiding this comment.
Removed Math.max because we do a fixed value addition in MIN_BOTTOM_SHEET_BREATHING_ROOM which is always > 0
There was a problem hiding this comment.
but you also removed the MIN_BOTTOM_SHEET_BREATHING_ROOM - bottom ... is it not necessary? why?
|
Android Build Available Rocket.Chat 4.75.0.109252 Internal App Sharing: https://play.google.com/apps/test/RQQ8k09hlnQ/ahAO29uNTzPNuhTFZ3k9WXnZa3RO4EDDX3oWFs1IL6GPfu1luNS9spkLT_MrJ22FWrrcExZNJi6rLalI7MzleoHcir |
|
iOS Build Available Rocket.Chat 4.75.0.109253 |
|
Android Build Available Rocket.Chat 4.75.0.109268 Internal App Sharing: https://play.google.com/apps/test/RQQ8k09hlnQ/ahAO29uNRH84UxxGFI6WNk9zQA_z7B6mV10_08G5cSWmr2otfvAsEmsRTXkk3Syrosc9rWjQFgMUpPF3C-NcZ4UIG3 |
|
iOS Build Available Rocket.Chat 4.75.0.109274 |
| const numColumns = Math.trunc(parentWidth / EMOJI_BUTTON_SIZE); | ||
| const marginHorizontal = (parentWidth % EMOJI_BUTTON_SIZE) / 2; | ||
| const contentPaddingBottom = bottomSheet ? Math.max(0, MIN_BOTTOM_SHEET_BREATHING_ROOM - bottom) : undefined; | ||
| const contentPaddingBottom = bottomSheet ? MIN_BOTTOM_SHEET_BREATHING_ROOM : undefined; |
There was a problem hiding this comment.
but you also removed the MIN_BOTTOM_SHEET_BREATHING_ROOM - bottom ... is it not necessary? why?
|
Regarding latest comment The bottom sheet already handle safe area internally, |
|
Android Build Available Rocket.Chat 4.75.0.109279 Internal App Sharing: https://play.google.com/apps/test/RQQ8k09hlnQ/ahAO29uNQtr3NjVpWvmqQDwz7TNPMlZz2_Yf3ZKsc8guonjeKZfeo__iTid_wubsFRnmgBzbWOfUJs9nex9xW5hoVz |
|
iOS Build Available Rocket.Chat 4.75.0.109280 |
3 participants
Proposed changes
Replace
expo-navigation-barwith@zoontek/react-native-navigation-barand add safe area bottom insets across 30+ views to enable proper edge-to-edge display on Android. This prevents content from being hidden behind the system navigation bar on devices with gesture navigation.Key changes:
expo-navigation-barwith@zoontek/react-native-navigation-barfor better edge-to-edge supportpaddingBottom: bottom(viauseSafeAreaInsets/withSafeAreaInsets) to FlatLists, ScrollViews, and content containers across the apppaddingBottom: 100inNewServerViewin favor ofFormContainers built-in safe area handlingJitsiMeetViewfrom RNs built-inSafeAreaViewtoreact-native-safe-area-contextsRoomViewfooter sections to respect bottom safe areaIssue(s)
https://rocketchat.atlassian.net/browse/CORE-1967
How to test or reproduce
Screenshots
Jisti
iPhone SE Bottom sheet screenshots
Note: I tested this on both a tablet and in landscape mode, and everything is working as expected.
Summary by CodeRabbit
New Features
Bug Fixes