[MEDIUM] `react-native-keyboard-controller` migration plan

[kirillzyusko]

Problem statement

In Expensify app keyboard handling is not consistent across iOS/Android platforms:

• on Android we mostly rely on default keyboard avoiding mechanism adjustResize (it works great, but lacks of synchronous animations - which means the screen will be instantly resized, and there will be no animation at all. For chat-like apps this is quite important to have for good UX)
• since Android handles it automatically - it's very hard to add any customization to keyboard handling (for example to preserve elements position which are obscured by keyboard)
• on iOS we are using JS code mixture to handle keyboard avoidance (KeyboardAvoidingView, subscriptions to keyboard events)
  since iOS keyboard handling is done in JS code, on Android we use native keyboard avoidance provided by OS and we are writing cross-platform code -> we have a lot of Platform dependent code (like enabling KeyboardAvoidingView only on iOS), which eventually leads to UI inconsistency
• react-native offers a limited API for keyboard handling (especially on Android, where we can detect only Did events)
• react-native API is far behind from modern ways of keyboard handling

With react-native-keyboard-controller:

• we are getting cross-platform behavior (done in feat: edge-to-edge mode on Android #52392):
  • edge-to-edge mode -> identical work with insets on both platforms
  • disabled default keyboard handling - all keyboard handling is delegated to developer providing basics primitives
• consistent API for working with the keyboard (all events are available on both platforms, including Will events which were not available prior to RN API)
• interactive keyboard support - an ability to dismiss keyboard via gesture (default RN implementation only works on iOS and has severe limitations, such as multiline TextInput can not grow)

Migration plan

I see next potential way for improving keyboard handling (aka migration plan):

• implement inline auto suggestions (Inline auto suggestion #42630)

• start to use it on a chat screen on iOS only (fix: messages content overlap when bottom sheet is shown #54764)

• start to use this library on chat screen on Android (this library also will give a smooth transition on chat screen when keyboard appears/disappears, so UI will look better & more pleasant for end user) (feat: remove KeyboardAvoidingView compat layer #54101)

• search screen:

  • right now "footer" (invite a friend, get 250$) has an instant transition and doesn't follow keyboard movement - with this library transition will be smooth (KeyboardStickyFooter component) (feat: remove KeyboardAvoidingView compat layer #54101)
  See it in action

  
  • on Android when keyboard appears -> at the bottom of the screen we have a different color (under keyboard) - that's how default keyboard avoidance works in Android - when we'll have a frame-level control we can fix it as well and we'll not see any blinks there (feat: remove KeyboardAvoidingView compat layer #54101)
  See it in action

  

• on Chat screen we can add "interactive keyboard dismissal" (when keyboard can be closed via gesture) - Improve the composer swipe down closing logic #54270

• @roryabraham wanted to replace useKeyboardContext with this new library

• In Profile->Address screen: auto scroll is waiting for keyboardDidShow event and we have kind of two-fold animation -> potentially can be fixed by KeyboardAwareScrollView with fully synchronized animations

Additional resources

• Slack discussion: https://expensify.slack.com/archives/C01GTK53T8Q/p1707467001447909
• GH issue of library review: [New Lib] react-native-keyboard-controller #35270

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01360efa253e7a2c60
• Upwork Job ID: 1762155306344951808
• Last Price Increase: 2024-04-23

[melvin-bot]

Triggered auto assignment to @JmillsExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[roryabraham]

this is kind of halfway between a new feature and a bug, but I'm going to treat it as a bug for the sake of accounting (no CAP SW project it fits with)

[roryabraham]

Marking this as Internal even though it will be almost 100% external. Doing so because I don't want to create an external Upwork job, but I do want a C+ to help review all the PR(s) for this. I think it will be a series of PRs, so I think we should compensate for the review of each.

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to Contributor Plus for review of internal employee PR - @cubuspl42 (Internal)