feat: KeyboardLayout

[kirillzyusko]

📜 Description

💡 Motivation and Context

This PR is an exploration of what can I do in order to improve animation performance. Most of the problems stems from the fact that devs are wrapping FlatList/FlashList/LegendList with KeyboardAvoidingView + padding behavior:

<KeyboardAvoidingView behavior="padding">
  <FlatList />
</KeyboardAvoidingView>

The issue with such combination is that every frame we change the layout of inner list, which in its turn will re-run calculation of viewport -> trigger re-render -> slow down js thread so in the end we'll have junky animation.

The idea of this PR is to explore a possibility of ignoring those frequent updates so that we can deliver a better performance. The first idea is to wrap inner components with react-freeze when keyboard is animating. But from my observation in example app it doesn't give such a significant boost. I'll explore this way further and opening this PR just to track the progress.

📢 Changelog

JS

iOS

Android

🤔 How Has This Been Tested?

📸 Screenshots (if appropriate):

📝 Checklist

• CI successfully passed
• I added new mocks and corresponding unit-tests if library API was changed

[github-actions]

📊 Package size report

Current size	Target Size	Difference
229231 bytes	224166 bytes	5065 bytes 📈

[kirillzyusko]

I'm closing this PR in favour of #1314

The original idea was to pause all JS updates when keyboard animation happens and I thought to use react-freeze for that, but in reality when it freezes/unfreezes the component I had very big peaks of JS thread (it seems like it mounts/unmounts elements, so I abandoned this idea).

Instead I created ClippingScrollViewDecorator component which extends scrollable area (similar to contentInset property) and doesn't cause layout changes (which VirtualizedLists are sensitive to).

So now KeyboardAwareScrollView/KeyboardChatScrollView are powered by this component and it they have stable 120 FPS 😎

So the only issue remains with KeyboardAvoidingView, which almost always changes layout of the component. But this is how this component is supposed to work and I don't know if I can fix it or not.

What I can say is that the idea with freeze was very perspective, but in reality it doesn't work well. Maybe in future I'll get back to this idea and will find a way to pause updates when keyboard is animating.