[CP Staging] Fix: Android edge-to-edge related inset/padding issues by chrispader · Pull Request #53223 · Expensify/App

chrispader · 2024-11-27T17:26:10Z

Explanation of Change

Fixes issues related to the recent merge of #52392. This PR adds missing styles for respecting the safe area (on Android). Where necessary, extra padding/margin styles were added. This PR also includes some minor code improvements and re-structuring in styles/StyleUtils.

Fixed Issues

$ #53161
$ #53205
$ #53190
$ #53215

PROPOSAL:

Tests

Verify that no errors appear in the JS console

New chat/room screens

Press FAB
Go to "Start chat"
Add multiple people to a group
Confirm the "Next" button is placed correctly
Switch the tab to "Room"
Make sure the "Create room" button is aligned correctly

Submit/track expense (IOU)

Press FAB
Go to "Submit expense"
Enter an amount
Choose an recipient
Make sure the "Submit x $" button is aligned correctly

Video attachments

Go to a report with a video attachment and open it
Make sure the video players timeline is editable

Sidebar

Make sure you have enough chats/reports in the sidebar to fill the whole scroll view
Check whether there is unnecessary extra padding when scrolling to the end

Offline tests

QA Steps

// TODO: These must be filled out, or the issue title must include "[No QA]."

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

MacOS: Desktop

…components/hooks

github-actions · 2024-11-27T17:36:55Z

🚧 @mountiny has triggered a test build. You can view the workflow run here.

c3024 · 2024-11-27T18:33:40Z

There is no bottom margin on confirm button for group chat on Desktop Chrome with this branch.

chrispader · 2024-11-27T18:41:26Z

There is no bottom margin on confirm button for group chat on Desktop Chrome with this branch.

@c3024 please try again, i didn't yet push all commits sorry

melvin-bot · 2024-11-27T18:41:34Z

@mollfpr Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

melvin-bot · 2024-11-27T18:43:07Z

Hey! I see that you made changes to our Form component. Make sure to update the docs in FORMS.md accordingly. Cheers!

github-actions · 2024-11-27T18:44:59Z

🚧 @mountiny has triggered a test build. You can view the workflow run here.

github-actions · 2024-11-27T19:09:28Z

🧪🧪 Use the links below to test this adhoc build on Android, iOS, Desktop, and Web. Happy testing! 🧪🧪

Android 🤖	iOS 🍎
https://ad-hoc-expensify-cash.s3.amazonaws.com/android/53223/index.html	❌ FAILED ❌
	The QR code can't be generated, because the iOS build failed
Desktop 💻	Web 🕸️
https://ad-hoc-expensify-cash.s3.amazonaws.com/desktop/53223/NewExpensify.dmg	https://53223.pr-testing.expensify.com

👀 View the workflow run that generated this build 👀

allroundexperts · 2024-11-28T09:21:37Z

@chrispader Lint failures.

chrispader · 2024-11-28T09:22:08Z

@chrispader Lint failures.

just fixed

allroundexperts · 2024-11-28T09:26:00Z

This is still the same. Do you have physical buttons in your android?

chrispader · 2024-11-28T09:57:59Z

Cannot reproduce :/

kirillzyusko · 2024-11-28T10:22:43Z

Cannot reproduce :/

Not reproducible on Pixel 7 Pro (Android 15)

Let me try Xiaomi Redmi Note 5 Pro (Android 9)

mountiny

The remaining issues feel like a minor user interface programs on android since we are not creating new android release for a production I think it's okay to move this fix to staging and then focus on the general fix for these safe area issues

Users are not blocked from taking the actions hence I don't think it should block the deploy

kirillzyusko · 2024-11-28T10:51:29Z

Can not reproduce on my physical devcies:

Pixel 7 Pro	Xiaomi Redmi Note 5 Pro

mountiny · 2024-11-28T11:03:01Z

@allroundexperts basically approved with just one pending comment so I will go ahead with this merge. Chris and Kiryl cannot reproduce

melvin-bot · 2024-11-28T11:03:10Z

@mountiny looks like this was merged without a test passing. Please add a note explaining why this was done and remove the Emergency label if this is not an emergency.

mountiny · 2024-11-28T11:03:23Z

ESLint failing because of the useOnyx migration which we wont do in this CP PR

[CP Staging] Fix: Android edge-to-edge related inset/padding issues (cherry picked from commit 6430cd7) (CP triggered by mountiny)

OSBotify · 2024-11-28T11:12:20Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

github-actions · 2024-11-28T11:46:50Z

🚀 Cherry-picked to staging by https://github.com/mountiny in version: 9.0.67-8 🚀

platform	result
🤖 android 🤖	false ❌
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅
🤖🔄 android HybridApp 🤖🔄	success ✅
🍎🔄 iOS HybridApp 🍎🔄	success ✅

@Expensify/applauseleads please QA this PR and check it off on the deploy checklist if it passes.

github-actions · 2024-11-28T14:23:42Z

🚀 Deployed to production by https://github.com/mountiny in version: 9.0.67-9 🚀

platform	result
🤖 android 🤖	skipped 🚫
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅
🤖🔄 android HybridApp 🤖🔄	failure ❌
🍎🔄 iOS HybridApp 🍎🔄	failure ❌

fedirjh · 2024-12-11T15:00:52Z

src/pages/NewChatPage.tsx

                <Button
                    onPress={() => toggleOption(item)}
-                    style={[styles.pl2]}
+                    style={[styles.pl2, insets.bottom ? styles.mb5 : undefined]}


This change has introduced a regression in #53261 , there is no need to add the extra margin.

rojiphil · 2025-05-13T17:41:38Z

src/pages/iou/request/step/IOURequestStepDistance.tsx

                        pressOnEnter
                        large
-                        style={[styles.w100, styles.mb4, styles.ph4, styles.flexShrink0]}
+                        style={[styles.w100, styles.mb5, styles.ph4, styles.flexShrink0]}


While handling missing styles, we missed noticing the size mismatch for Next button with the Manual tab. We fixed this in #60386

chrispader added 5 commits November 27, 2024 17:23

fix: adjust ios and android safe area insets padding style

dbcaad9

fix: extract Android specific safe area logic and simplify safe area …

b011c91

…components/hooks

fix: bottom inset spacing on IOURequestStepConfirmation screen

edcdfbe

fix: make IOU submit button spacing consistent

9aa9b50

fix: MoneyRequestConfirmationList bottom padding

d9ae806

mountiny assigned chrispader Nov 27, 2024

mountiny self-requested a review November 27, 2024 17:29

mountiny changed the title ~~Fix: Android edge-to-edge related inset/padding issues~~ [CP Staging] Fix: Android edge-to-edge related inset/padding issues Nov 27, 2024

mountiny added the Ready To Build label Nov 27, 2024

This comment has been minimized.

Sign in to view

chrispader added 2 commits November 27, 2024 19:36

fix: useSafeAreaInsets hook

d5f53d1

fix: bottom insets/padding in "New chat"

c52550f

chrispader marked this pull request as ready for review November 27, 2024 18:41

chrispader requested review from a team as code owners November 27, 2024 18:41

melvin-bot bot requested review from mollfpr and removed request for a team November 27, 2024 18:41

chrispader changed the title ~~[CP Staging] Fix: Android edge-to-edge related inset/padding issues~~ [CP Staging] [WIP] Fix: Android edge-to-edge related inset/padding issues Nov 27, 2024

chrispader added 2 commits November 27, 2024 19:46

fix: padding broken in other forms

a543d86

Merge branch 'main' into @chrispader/fix-53161

fef2955

chrispader changed the title ~~[CP Staging] [WIP] Fix: Android edge-to-edge related inset/padding issues~~ [CP Staging] Fix: Android edge-to-edge related inset/padding issues Nov 27, 2024

fix: linting

8a6d727

fix: adjust android insets percentage

62297e2

fix: remove unused code

e44e493

mountiny approved these changes Nov 28, 2024

View reviewed changes

mountiny merged commit 6430cd7 into Expensify:main Nov 28, 2024

melvin-bot bot added the Emergency label Nov 28, 2024

mountiny removed the Emergency label Nov 28, 2024

OSBotify pushed a commit that referenced this pull request Nov 28, 2024

Merge pull request #53223 from margelo/@chrispader/fix-53161

0dbb67e

[CP Staging] Fix: Android edge-to-edge related inset/padding issues (cherry picked from commit 6430cd7) (CP triggered by mountiny)

github-actions bot added the CP Staging marks PRs that have been CP'd to staging label Nov 28, 2024

mountiny mentioned this pull request Nov 28, 2024

[WIP/Prototyping] refactor: ScreenWrapper re-write for better insets/padding handling #53229

Merged

50 tasks

github-actions bot mentioned this pull request Nov 28, 2024

Deploy Checklist: New Expensify 2024-11-26 #53142

Closed

75 tasks

neonbhai mentioned this pull request Nov 28, 2024

[HOLD for payment 2024-12-11] [$250] Android & iOS - Start chat - Add to group button is top-aligned instead of centered #53261

Closed

8 tasks

fedirjh reviewed Dec 11, 2024

View reviewed changes

WoLewicki mentioned this pull request Jan 10, 2025

[CP Staging] fix: remove using StatusBar height #55082

Merged

50 tasks

jayeshmangwani mentioned this pull request Jan 13, 2025

[HOLD for payment 2024-10-01] [$250] [Android] When App is opened from notification the top safe area is missing #48190

Closed

6 tasks

rojiphil reviewed May 13, 2025

View reviewed changes

Conversation

chrispader commented Nov 27, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Explanation of Change

Fixed Issues

Tests

New chat/room screens

Submit/track expense (IOU)

Video attachments

Sidebar

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

github-actions bot commented Nov 27, 2024

Uh oh!

This comment has been minimized.

c3024 commented Nov 27, 2024

Uh oh!

chrispader commented Nov 27, 2024

Uh oh!

melvin-bot bot commented Nov 27, 2024

Uh oh!

melvin-bot bot commented Nov 27, 2024

Uh oh!

github-actions bot commented Nov 27, 2024

Uh oh!

github-actions bot commented Nov 27, 2024

Uh oh!

allroundexperts commented Nov 28, 2024

Uh oh!

chrispader commented Nov 28, 2024

Uh oh!

allroundexperts commented Nov 28, 2024

Uh oh!

chrispader commented Nov 28, 2024

Uh oh!

kirillzyusko commented Nov 28, 2024

Uh oh!

mountiny left a comment

Choose a reason for hiding this comment

Uh oh!

kirillzyusko commented Nov 28, 2024

Uh oh!

mountiny commented Nov 28, 2024

Uh oh!

melvin-bot bot commented Nov 28, 2024

Uh oh!

mountiny commented Nov 28, 2024

Uh oh!

OSBotify commented Nov 28, 2024

Uh oh!

github-actions bot commented Nov 28, 2024

Uh oh!

github-actions bot commented Nov 28, 2024

Uh oh!

fedirjh Dec 11, 2024

Choose a reason for hiding this comment

Uh oh!

rojiphil May 13, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

chrispader commented Nov 27, 2024 •

edited

Loading