App: [$250] `react-native-keyboard-controller` migration plan

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:
  • 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):

• start to use it on a chat screen on iOS only (https://github.com/Expensify/App/pull/16356)

• 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)

• 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)
  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
  See it in action

  

• on Chat screen we can add “interactive keyboard dismissal” (when keyboard can be closed via gesture)

• @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: https://github.com/Expensify/App/issues/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