[useAnimatedKeyboard][iOS] Keyboard interpolation

[piaskowyk]

Summary

The useAnimatedKeyboard() hook doesn't sync with the keyboard animation because keyboard animations use CAAnimations that are computed on the window server. This means they have their own timer and presentation layer. The info we get about the actual keyboard height is just an approximation of the real size shown by the window server.

Our hook, on the other hand, uses a DisplayLink timer, which is different from the CAAnimation timer. With this PR, we are adding a function that attempts to better estimate the keyboard position using easing and Bezier curves. While this solution might not be perfect down to the pixel because window server animations aren't entirely straightforward, it's still a big improvement compared to before.

The Bezier curves are based on the measured keyboard height from screen recordings, and then I adjusted the curves to fit them better.

Basic estimation function:

Where:

• x - time progress of animation
• a1, a2, b1, b2, d1, d3 - curve parameters

Example of curve:

Keyboard appearing: https://www.desmos.com/calculator/aw4ocksord
Keyboard hiding: https://www.desmos.com/calculator/6zay2c6jou

Related info: https://forums.developer.apple.com/forums/thread/712762

Comparison

before	after
before.mp4	after.mp4

Test plan

code

import React from 'react';
import { Text, StyleSheet, View, ScrollView, TextInput } from 'react-native';
import Animated, { useAnimatedKeyboard, useAnimatedStyle } from 'react-native-reanimated';

export default function EmptyExample() {
  const keyboard = useAnimatedKeyboard();
  const translateStyle = useAnimatedStyle(() => {
    return {
      transform: [{ translateY: -keyboard.height.value }],
    };
  });
  return (
    <View style={styles.container}>
      <ScrollView 
        style={styles.scroll}
        keyboardDismissMode='interactive'
      >
        {new Array(100).fill(null).map((_, i) => <Text key={i}>{i}</Text>)}
      </ScrollView>
      <Animated.View style={translateStyle}>
        <TextInput style={styles.input} />
      </Animated.View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    display: 'flex',
    justifyContent: 'space-between',
  },
  scroll: {
    width: '100%',
  },
  input: {
    height: 100,
    width: '100%',
    backgroundColor: 'green',
    borderWidth: 1,
  },
});

[tjzel]

All looks good to me, but I don't really know much about this part of iOS Reanimated. Please make sure that those changes work when you rapidly switch focus between TextInputs.

[piaskowyk]

I can confirm that, the focus switching between two inputs works correctly.

[tjzel]

I like equation

[RohovDmytro]

A legend was born.

And then did this pull request.

Thanks.