[$250] iOS - Profile - Display Name - Keyboard blinks when focus is changed

[lanitochka17]

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.66-3 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 Issue reported by: Applause - Internal Team

Action Performed:

1. Open the mobile app on iOS
2. Navigate to settings > profile > display name
3. Tap into First Name so that the keyboard pulls up
4. Tap into Last Name (keyboard should stay up)
5. Tap between FN and LN a few times

Expected Result:

Keyboard shouldn’t blink when focus is changed

Actual Result:

Keyboard blinks when focus is changed

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/a7f3cb06-cf9b-48a8-878e-44fe6b0b0195

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021861288508956384711
• Upwork Job ID: 1861288508956384711
• Last Price Increase: 2024-11-26

Issue Owner

Current Issue Owner: @DylanDylann

[melvin-bot[bot]]

Triggered auto assignment to @jliexpensify (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.

[jliexpensify]

ios <> Android swap

[Shahidullah-Muffakir]

Edited by proposal-police: This proposal was edited at 2024-11-25 22:15:00 UTC.

Proposal

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

In the iOS app, users experience keyboard blinking and re-rendering when switching focus between display name input fields (first and last name)

What is the root cause of that problem?

This is an iOS-specific rendering issue where: https://github.com/facebook/react-native/issues/39411 https://github.com/flutter/flutter/issues/134723

• Native keyboard events trigger unnecessary re-renders
• The AutoFill Bar causes keyboard UI instability
• Likely a low-level interaction between React Native and iOS keyboard rendering mechanisms

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

We have few options as workarounds, root cause is deeply embedded in iOS. I think the simplest and direct solution would be to use autoCorrect= {false} prop for the first and last names in the DisplayNamePage https://github.com/Expensify/App/blob/e4ac07a17c0939a7c35c231beac171bde0f99f01/src/pages/settings/Profile/DisplayNamePage.tsx#L92-L116

Trade-offs to consider:

1. Disables text suggestions and autocorrect for first and last name fields
2. Acceptable in this context, as display names typically require precise spelling

3. we can use Platform.OS === 'ios'if we want to conditionally apply this only for iOS

What alternative solutions did you explore? (Optional)

Another approach involves modifying the React Native KeyboardAvoidingView implementation. we are using KeyboardAvoidingView in ScreenWrapper https://github.com/Expensify/App/blob/b4876bce7487bcedc58467d91a7ea0e61757e437/src/components/ScreenWrapper.tsx#L278 we will add a custom prop ignoreIOSKeyboardWillChangeEvents for iOS to selectively prevent problematic keyboard re-render events. https://github.com/facebook/react-native/issues/39411#issuecomment-1726601414

https://github.com/user-attachments/assets/e87ebcfe-51c9-4e46-ae23-320abf716131

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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