For my React Native applications, I choose to use WIX's React Native Navigation library. It is an abstraction upon both Android and iOS's native navigation mechanisms. Coming from a native mobile background, this is my go to choice.
When navigating from screens that have the keyboard visible, there is a noticeable lag and sometimes jumping, specifically on iOS. This seems to be an issue where prior to the transition start, the current screen was the first responder. As that screen transitioning away, it's no longer a candidate during the first responder traversal lookup thus the keyboard inherently will start to dismiss. Since the screen transition and keyboard dismissal are now happening simultaneously, they are racing for first place in the run loop of the main thread which causes these types of inconsistencies.
Instead, what I wanted to do was to observe when the keyboard has dismissed, then transition away from one screen to the next. There is no out of the box solution because the dismiss function on Keyboard within the React Native library is synchronous, thus we can't guarantee if the keyboard is entirely off-screen prior to transitioning.
With that, we had to choose an alternative. React Native provides observers that are invoked when the keyboard becomes visible or disappears. We can utilize those to dismiss the keyboard and wait until the asynchronous keyboard animation has completed.
The following uses the keyboard observers to inform registered listeners, in this case callbacks, which will resolve a nested promise.
This can be used like so:
Now you're able to incorporate the keyboard dismissal user interaction within your control flow asynchronously.
Comentários