📜 Description

Added new behavior="translate-with-padding" for KeyboardAvoidingView.

💡 Motivation and Context

The new mode ideally fits for chat-like applications and has very good performance.

The implementation was mostly inspired by WindowInsetsAnimation sample app. However when I tried to replace translateY to 0 and apply paddingBottom which is equal to previous translateY I had flashes on Android (mostly because of nature of Android - transform properties (e.g., translateY) only trigger a repaint (no reflow) and are applied immediately. Changes to layout properties like padding force the Android rendering system to recalculate layout (reflow), which can take an extra frame to resolve). So instead of switching those properties I decided to keep translateY and add paddingTop (in the end of animation to resize the container).

Since we change paddingTop only in the beginning or in the end of animation the transition is unbelievable smooth, because we trigger layout re-calculation only once (so in terms of complexity new approach is O(1) vs O(n)).

Closes #719 (comment) software-mansion/react-native-reanimated#6854 #650 (comment)

🔢 Things to do

• write e2e tests for chat FlatList example screen (to cover new functionality with e2e tests);
• update documentation page with detailed explanation of modes and when to use each of them.

📢 Changelog

JS

• added new "translate-with-padding" behavior for KeyboardAvoidingView
• added useTranslateAnimation hook;
• integrate useTranslateAnimation with "translate-with-padding";
• update example app to more performant implementation;

Docs

• mention new behavior;

🤔 How Has This Been Tested?

Tested both paper and fabric on:

• iPhone 15 Pro (iOS 17.5);
• Medium phone (API 35).

📸 Screenshots (if appropriate):

Paper

Fabric

📝 Checklist

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