Expensify
[$250] iOS - Categories - Offline indicator overlaps with home bar in Default spend categories page
If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!
Version Number: 9.0.54-1 Reproducible in staging?: Y Reproducible in production?: Y If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Y If this was caught during regression testing, add the test name, ID and link from TestRail: N/A Email or phone of affected tester (no customers): [email protected] Issue reported by: Applause - Internal Team
Action Performed:
- Launch ND app
- Go to workspace settings > Categories
- Go offline
- Tap Settings
- Tap Airlines
- Scroll down to dismiss the keyboard
Expected Result:
Offline indicator will not overlap with home bar after dismissing the keyboard
Actual Result:
Offline indicator overlaps with home bar briefly after dismissing the keyboard
Workaround:
Unknown
Platforms:
Which of our officially supported platforms is this issue occurring on?
- [ ] Android: Standalone
- [ ] Android: HybridApp
- [ ] Android: mWeb Chrome
- [x] iOS: Standalone
- [x] iOS: HybridApp
- [ ] iOS: mWeb Safari
- [ ] MacOS: Chrome / Safari
- [ ] MacOS: Desktop
Screenshots/Videos
Add any screenshot/video evidence
https://github.com/user-attachments/assets/af943413-04fd-4b42-accb-f28ada6f0ded
Upwork Automation - Do Not Edit
- Upwork Job URL: https://www.upwork.com/jobs/~021850900545784411884
- Upwork Job ID: 1850900545784411884
- Last Price Increase: 2024-10-28
- Automatic offers:
- dukenv0307 | Reviewer | 104697028
Issue Owner
Current Issue Owner: @dukenv0307
Triggered auto assignment to @isabelastisser (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.
![melvin-bot[bot] avatar](https://avatars.githubusercontent.com/in/179547?v=4 "Published by a pub.dev verified publisher"){kind=small}
Proposal
Please re-state the problem that we are trying to solve in this issue.
Offline indicator overlaps with the iOS home bar briefly after closing keyboard.
What is the root cause of that problem?
The category selector page uses a Modal and inside the modal, we have a padding bottom added to avoid the home bar overlapping. But, if a keyboard is shown, we won't apply the padding-bottom. https://github.com/Expensify/App/blob/5103b4bd53ae74dcb301b8450f7046e82dc311d3/src/components/Modal/BaseModal.tsx#L196
It was added to fix this issue where there is an extra space at the bottom when the keyboard is shown, so they apply the padding-bottom only if the keyboard is closed. So, in this issue, when the keyboard opens, the padding-bottom isn't applied and when we close the keyboard, the offline indicator will overlap with the home bar for a while until the keyboard state changes to "closed".
What changes do you think we should make in order to solve the problem?
Applying the padding-bottom conditionally based on the keyboard state is only needed when the keyboard-avoiding view is enabled. If it's disabled, then the modal content won't be pushed above the keyboard, so we won't see the padding-bottom either. So, the first solution is to always apply the padding-bottom if the keyboard avoiding view is disabled.
shouldAddBottomSafeAreaPadding: (!avoidKeyboard || !keyboardStateContextValue?.isKeyboardShown) && shouldAddBottomSafeAreaPadding,
avoidKeyboard is disabled by default.
https://github.com/Expensify/App/blob/5103b4bd53ae74dcb301b8450f7046e82dc311d3/src/components/Modal/BaseModal.tsx#L47
And because we don't need to avoid keyboard for the category selector modal, we can just disable it from the ScreenWrapper too. https://github.com/Expensify/App/blob/5103b4bd53ae74dcb301b8450f7046e82dc311d3/src/pages/workspace/distanceRates/CategorySelector/CategorySelectorModal.tsx#L33-L48
shouldEnableKeyboardAvoidingView={false}
What alternative solutions did you explore? (Optional)
Wrap the children with SafeAreaView and remove the manual safe area padding calculation.
https://github.com/Expensify/App/blob/5103b4bd53ae74dcb301b8450f7046e82dc311d3/src/components/Modal/BaseModal.tsx#L188-L203
https://github.com/Expensify/App/blob/5103b4bd53ae74dcb301b8450f7046e82dc311d3/src/components/Modal/BaseModal.tsx#L272-L277
<SafeAreaView style={styles.flex1}>
Job added to Upwork: https://www.upwork.com/jobs/~021850900545784411884
Triggered auto assignment to Contributor-plus team member for initial proposal review - @dukenv0307 (External)
Triggered auto assignment to @johnmlee101, see https://stackoverflow.com/c/expensify/questions/7972 for more details.
📣 @dukenv0307 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!
Reviewing label has been removed, please complete the "BugZero Checklist".
The solution for this issue has been :rocket: deployed to production :rocket: in version 9.0.58-2 and is now subject to a 7-day regression period :calendar:. Here is the list of pull requests that resolve this issue:
- https://github.com/Expensify/App/pull/51922
If no regressions arise, payment will be issued on 2024-11-14. :confetti_ball:
For reference, here are some details about the assignees on this issue:
- @bernhardoj requires payment through NewDot Manual Requests
- @dukenv0307 requires payment automatic offer (Reviewer)
@dukenv0307 @isabelastisser The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]
Payment summary:
@bernhardoj requires payment through NewDot Manual Requests $250 C+ @dukenv0307 requires payment automatic offer (Reviewer) Paid in Upwork.
All set!
