[RNKC-080] - telegram keyboard transition (#92)

## 📜 Description

Added example of custom keyboard animation that actively used in
Telegram app.

## 💡 Motivation and Context

I always was impressed of keyboard animation smoothness on my Android 9
device. So I dig into Android implementation and ported it to
react-native 😄

## 📢 Changelog

### JS
- added toggler for switching keyboard interpolator (platform, telegram)

## 🤔 How Has This Been Tested?

Tested manually on:
- Pixel 2 (emulator, API 28);
- Pixel 3 (emulator, API 32);
- Xiaomi Redmi note 5 Pro (real device, API 28);
- iPhone 11 Pro (simulator, iOS 15.5).

## 📸 Screenshots (if appropriate):


https://user-images.githubusercontent.com/22820318/195857524-d7a966b9-6b24-43cc-8f82-59d3589dcc12.mov

## 📝 Checklist

- [x] CI successfully passed

FabricExample/src/navigation/ExamplesStack/index.tsx

@@ -10,7 +10,7 @@ import AwareScrollView from '../../screens/Examples/AwareScrollView';
 import StatusBar from '../../screens/Examples/StatusBar';
 import NonUIProps from '../../screens/Examples/NonUIProps';
 
-type ExamplesStackParamList = {
+export type ExamplesStackParamList = {
   [ScreenNames.ANIMATED_EXAMPLE]: undefined;
   [ScreenNames.REANIMATED_CHAT]: undefined;
   [ScreenNames.EVENTS]: undefined;

FabricExample/src/screens/Examples/ReanimatedChat/hooks.ts

@@ -0,0 +1,39 @@
+import { Platform } from 'react-native';
+import { useKeyboardHandler } from 'react-native-keyboard-controller';
+import { Easing, useSharedValue, withTiming } from 'react-native-reanimated';
+
+export const useTelegramTransitions = () => {
+  const height = useSharedValue(0);
+
+  useKeyboardHandler(
+    {
+      onStart: (e) => {
+        'worklet';
+
+        if (Platform.OS === 'android') {
+          // on Android Telegram is not using androidx.core values and uses custom interpolation
+          // duration is taken from here: https://github.com/DrKLO/Telegram/blob/e9a35cea54c06277c69d41b8e25d94b5d7ede065/TMessagesProj/src/main/java/org/telegram/ui/ActionBar/AdjustPanLayoutHelper.java#L39
+          // and bezier is taken from: https://github.com/DrKLO/Telegram/blob/e9a35cea54c06277c69d41b8e25d94b5d7ede065/TMessagesProj/src/main/java/androidx/recyclerview/widget/ChatListItemAnimator.java#L40
+          height.value = withTiming(-e.height, {
+            duration: 250,
+            easing: Easing.bezier(
+              0.19919472913616398,
+              0.010644531250000006,
+              0.27920937042459737,
+              0.91025390625
+            ),
+          });
+        } else {
+          // on iOS Telegram simply moves TextInput synchronously with the content
+          // to achieve such behavior we are instantly change `height.value` to keyboard
+          // final frame - iOS will schedule layout animation and it will move the content
+          // altogether with the keyboard
+          height.value = -e.height;
+        }
+      },
+    },
+    []
+  );
+
+  return { height };
+};

FabricExample/src/screens/Examples/ReanimatedChat/index.tsx

@@ -1,15 +1,44 @@
-import React from 'react';
-import { TextInput, View } from 'react-native';
+import React, { useEffect, useState } from 'react';
+import { Text, TextInput, View } from 'react-native';
 import { useReanimatedKeyboardAnimation } from 'react-native-keyboard-controller';
-import Reanimated, { useAnimatedStyle } from 'react-native-reanimated';
+import Reanimated, {
+  useAnimatedStyle,
+  useDerivedValue,
+} from 'react-native-reanimated';
+
 import Message from '../../../components/Message';
 import { history } from '../../../components/Message/data';
+import { useTelegramTransitions } from './hooks';
 import styles from './styles';
 
+import type { StackScreenProps } from '@react-navigation/stack';
+import type { ExamplesStackParamList } from '../../../navigation/ExamplesStack';
+
 const AnimatedTextInput = Reanimated.createAnimatedComponent(TextInput);
 
-function ReanimatedChat() {
-  const { height } = useReanimatedKeyboardAnimation();
+type Props = StackScreenProps<ExamplesStackParamList>;
+
+function ReanimatedChat({ navigation }: Props) {
+  const [isTGTransition, setTGTransition] = useState(false);
+  useEffect(() => {
+    navigation.setOptions({
+      headerRight: () => (
+        <Text
+          style={styles.header}
+          onPress={() => setTGTransition((value) => !value)}
+        >
+          {`Switch to ${isTGTransition ? 'Platform' : 'Telegram'}`}
+        </Text>
+      ),
+    });
+  }, [isTGTransition]);
+
+  const { height: telegram } = useTelegramTransitions();
+  const { height: platform } = useReanimatedKeyboardAnimation();
+  const height = useDerivedValue(
+    () => (isTGTransition ? telegram.value : platform.value),
+    [isTGTransition]
+  );
 
   const scrollViewStyle = useAnimatedStyle(
     () => ({

FabricExample/src/screens/Examples/ReanimatedChat/styles.ts

@@ -5,6 +5,9 @@ export default StyleSheet.create({
     justifyContent: 'flex-end',
     flex: 1,
   },
+  header: {
+    marginRight: 12,
+  },
   inverted: {
     transform: [
       {

example/src/navigation/ExamplesStack/index.tsx

@@ -11,7 +11,7 @@ import StatusBar from '../../screens/Examples/StatusBar';
 import LottieAnimation from '../../screens/Examples/Lottie';
 import NonUIProps from '../../screens/Examples/NonUIProps';
 
-type ExamplesStackParamList = {
+export type ExamplesStackParamList = {
   [ScreenNames.ANIMATED_EXAMPLE]: undefined;
   [ScreenNames.REANIMATED_CHAT]: undefined;
   [ScreenNames.EVENTS]: undefined;

example/src/screens/Examples/ReanimatedChat/hooks.ts

@@ -0,0 +1,39 @@
+import { Platform } from 'react-native';
+import { useKeyboardHandler } from 'react-native-keyboard-controller';
+import { Easing, useSharedValue, withTiming } from 'react-native-reanimated';
+
+export const useTelegramTransitions = () => {
+  const height = useSharedValue(0);
+
+  useKeyboardHandler(
+    {
+      onStart: (e) => {
+        'worklet';
+
+        if (Platform.OS === 'android') {
+          // on Android Telegram is not using androidx.core values and uses custom interpolation
+          // duration is taken from here: https://github.com/DrKLO/Telegram/blob/e9a35cea54c06277c69d41b8e25d94b5d7ede065/TMessagesProj/src/main/java/org/telegram/ui/ActionBar/AdjustPanLayoutHelper.java#L39
+          // and bezier is taken from: https://github.com/DrKLO/Telegram/blob/e9a35cea54c06277c69d41b8e25d94b5d7ede065/TMessagesProj/src/main/java/androidx/recyclerview/widget/ChatListItemAnimator.java#L40
+          height.value = withTiming(-e.height, {
+            duration: 250,
+            easing: Easing.bezier(
+              0.19919472913616398,
+              0.010644531250000006,
+              0.27920937042459737,
+              0.91025390625
+            ),
+          });
+        } else {
+          // on iOS Telegram simply moves TextInput synchronously with the content
+          // to achieve such behavior we are instantly change `height.value` to keyboard
+          // final frame - iOS will schedule layout animation and it will move the content
+          // altogether with the keyboard
+          height.value = -e.height;
+        }
+      },
+    },
+    []
+  );
+
+  return { height };
+};

example/src/screens/Examples/ReanimatedChat/index.tsx

@@ -1,15 +1,44 @@
-import React from 'react';
-import { TextInput, View } from 'react-native';
+import React, { useEffect, useState } from 'react';
+import { Text, TextInput, View } from 'react-native';
 import { useReanimatedKeyboardAnimation } from 'react-native-keyboard-controller';
-import Reanimated, { useAnimatedStyle } from 'react-native-reanimated';
+import Reanimated, {
+  useAnimatedStyle,
+  useDerivedValue,
+} from 'react-native-reanimated';
+
 import Message from '../../../components/Message';
 import { history } from '../../../components/Message/data';
+import { useTelegramTransitions } from './hooks';
 import styles from './styles';
 
+import type { StackScreenProps } from '@react-navigation/stack';
+import type { ExamplesStackParamList } from '../../../navigation/ExamplesStack';
+
 const AnimatedTextInput = Reanimated.createAnimatedComponent(TextInput);
 
-function ReanimatedChat() {
-  const { height } = useReanimatedKeyboardAnimation();
+type Props = StackScreenProps<ExamplesStackParamList>;
+
+function ReanimatedChat({ navigation }: Props) {
+  const [isTGTransition, setTGTransition] = useState(false);
+  useEffect(() => {
+    navigation.setOptions({
+      headerRight: () => (
+        <Text
+          style={styles.header}
+          onPress={() => setTGTransition((value) => !value)}
+        >
+          {`Switch to ${isTGTransition ? 'Platform' : 'Telegram'}`}
+        </Text>
+      ),
+    });
+  }, [isTGTransition]);
+
+  const { height: telegram } = useTelegramTransitions();
+  const { height: platform } = useReanimatedKeyboardAnimation();
+  const height = useDerivedValue(
+    () => (isTGTransition ? telegram.value : platform.value),
+    [isTGTransition]
+  );
 
   const scrollViewStyle = useAnimatedStyle(
     () => ({

example/src/screens/Examples/ReanimatedChat/styles.ts

@@ -5,6 +5,9 @@ export default StyleSheet.create({
     justifyContent: 'flex-end',
     flex: 1,
   },
+  header: {
+    marginRight: 12,
+  },
   inverted: {
     transform: [
       {