[$500] Android - Chat - Spacing below emoji picker when opening emoji picker while keyboard is up

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.0.25-3
Reproducible in staging?: Y
Reproducible in production?: N
Email or phone of affected tester (no customers): applausetester+kh05081@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Launch New Expensify app.
2. Go to DM.
3. Dismiss the keyboard if keyboard is up.
4. Tap emoji picker.
5. Note that emoji picker is at the bottom of the screen (no spacing below the emoji picker).
6. Focus on the composer to bring up the keyboard.
7. Tap emoji picker while keyboard is up.

Expected Result:

There will be no spacing below the emoji picker.

Actual Result:

There is spacing below the emoji picker when opening emoji picker while keyboard is up.

Workaround:

Unknown

Platforms:

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6584231_1724771172692.1000031620-2024-08-27_15_03_10.713.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01f2e4be2af4f4a7d5
• Upwork Job ID: 1828513910835097845
• Last Price Increase: 2024-10-16
• Automatic offers:
• situchan | Reviewer | 104482969
• QichenZhu | Contributor | 104482971

[melvin-bot]

Triggered auto assignment to @johncschuster (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]

Triggered auto assignment to @stitesExpensify (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

📣 @c0ffincolors! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[caineblood]

The above comment asking you to download a file is malware to steal your account; do not under any circumstances download or run it. The post needs to be removed. If you have attempted to run it please have your system cleaned and your account secured immediately.

[melvin-bot]

📣 @caineblood! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01f2e4be2af4f4a7d5

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @situchan (External)

[jp928]

Edited by proposal-police: This proposal was edited at 2024-09-03 10:12:54 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

Spacing below emoji picker when opening emoji picker while keyboard is up

What is the root cause of that problem?

In the code

App/src/components/Modal/BaseModal.tsx

Line 44 in 4fe86eb

statusBarTranslucent = true,

the props statusBarTranslucent is default to true. However, react native modal is buggy to calculate the height of modal with statusBarTranslucent=true see the GH issue here: facebook/react-native#35804

What changes do you think we should make in order to solve the problem?

In the EmojiPicker.tsx just add statusBarTranslucent=false

App/src/components/EmojiPicker/EmojiPicker.tsx

Line 222 in 4fe86eb

restoreFocusType={CONST.MODAL.RESTORE_FOCUS_TYPE.DELETE}

Just attached the screen record after this change:

untitled.webm

What alternative solutions did you explore? (Optional)

NA

[melvin-bot]

@johncschuster, @stitesExpensify, @situchan Eep! 4 days overdue now. Issues have feelings too...

[situchan]

@stitesExpensify wdyt #48100 (comment)?

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot]

@johncschuster, @stitesExpensify, @situchan Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[johncschuster]

@stitesExpensify bump! What are your thoughts on the question above?

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot]

@johncschuster, @stitesExpensify, @situchan Whoops! This issue is 2 days overdue. Let's get this updated quick!

[johncschuster]

@stitesExpensify bump! We've got an outstanding question here.

[stitesExpensify]

Yeah, we’d better fix this in upstream. But some issues like #23889 (comment) and #27174 (comment) can’t wait and end up with a patch. So, should we fix this in upstream, add a patch, or do both?

Apologies for the delay, let's do both. I will double the payout since it is more work

[melvin-bot]

Upwork job price has been updated to $500

[situchan]

@QichenZhu I see that your another upstream PR was merged quickly. Similarly can you please create new issue and PR in upstream?
If it takes longer, we're sure to do patch first and remove it after RN upgrade.

[QichenZhu]

I see that your another upstream PR was merged quickly. Similarly can you please create new issue and PR in upstream?

@situchan Yeah, I’d love to. But I’m working on another issue assigned to me at the moment. Could I be assigned to this one? I’ll schedule it for tomorrow or early next week.

[melvin-bot]

📣 @situchan 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

📣 @QichenZhu 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[QichenZhu]

Aiming to raise an upstream issue today.

[QichenZhu]

I raised an upstream issue facebook/react-native#47140.

The solution I suggested there is different from my proposed one here because it needs to work in Bridgeless mode as well , but since we've disabled that mode in our repo, we don't need to consider it.

App/android/app/src/main/java/com/expensify/chat/MainApplication.kt

Line 62 in e74eb8e

load(bridgelessEnabled = false)

[QichenZhu]

@situchan I expect the fix will take a while since it needs to cover many scenarios, but in our repo it’s easier because we don’t use those configurations. I suggest we go with a simple patch in our repo, and I'll keep an eye on the upstream issue in parallel. What do you think?

[situchan]

@QichenZhu sure. Feel free to raise patch PR