Fix keyboard height in useAnimatedKeyboard on language change on iOS

[graszka22]

Summary

Fixes a bug when changing keyboard language on iOS:

Bug:
https://user-images.githubusercontent.com/6280457/212095624-4df7e0b0-d3e6-4bdd-8378-ad8c077e6fb2.mp4

Fixed bug:

Simulator.Screen.Recording.-.iPhone.14.Pro.-.2023-01-12.at.15.43.03.mp4

Fixes #3721

useAnimatedKeyboard reported invalid keyboard height in that case, because we invalided display link too early, in stopAnimation and we reported the height before suggestions bar appeared. In the next frame the suggestion bar appears and we can calculate correct keyboard height.

Test plan

Run AnimatedKeyboardExample, bring up the keyboard and change keyboard language. The text input should be above the keyboard in correct position.

Example for switching between numeric/regular keyboard:

import React from 'react';

import { TextInput, View, StyleSheet } from 'react-native';

import { useAnimatedKeyboard, useAnimatedStyle } from 'react-native-reanimated';

export default function App() {
  const { height } = useAnimatedKeyboard();

  useAnimatedStyle(() => {
    console.log('HEIGHT', height.value);
    return {};
  });

  return (
    <View style={styles.container}>
      <TextInput style={styles.input} keyboardType="default" />
      <TextInput style={styles.input} keyboardType="number-pad" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    padding: 20,
  },
  input: {
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
    marginBottom: 20,
    backgroundColor: '#ddd',
    height: 50,
  },
});

[kbrandwijk]

As mentioned in the linked issue, this happens in all cases where the suggestion bar appears/disappears, so not only language switches, but also switching from numeric to regular keyboard, or having two TextInputs with different settings for autoSuggest.

[graszka22]

I tested and the PR also fixes the issue with switching between numeric/regular keyboard too.

[azcarraga]

@graszka22 thank you for looking into this, I've hit this as well but with when toggling emoji / text on the keyboard. I tried your fix as a patch locally, but the keyboard height is still not updating in tandem with the keyboard - it updates on the next toggle to the previous height.

I've created a snack with the repro:

https://snack.expo.dev/@aazcarraga/reanimated-keyboard-bug-repro

1. Click on the text input at the bottom of the screen, which will pull up the keyboard
2. Press the emoji button on the keyboard to toggle emoji - notice how the text input is now hidden (keyboard height not updated)
3. Press the 'ABC' button on the keyboard to toggle back - notice how the text input is now too high (keyboard height is now updated to the height it should have been for emoji)

This seems related and might be useful in validating this fix. It could be that I did not patch correctly when testing this change locally.

Thanks again for looking into this, the keyboard animation is so useful and it's hard to not depend on it everywhere now that it's available.

[graszka22]

@azcarraga Your example is working for me.

Before fix:

Simulator.Screen.Recording.-.iPhone.14.Pro.-.2023-01-17.at.14.07.34.mp4

After fix:

Simulator.Screen.Recording.-.iPhone.14.Pro.-.2023-01-17.at.14.06.38.mp4

If it's not working for you please describe how are you testing (simulator or real device, what device, versions of RN, Paper/Fabric architecture, make sure you patched and rebuilt correctly etc.)

[azcarraga]

@graszka22 thank you so much for the quick reply and videos - that's great news (it works) and narrows down what I'm seeing to my patching. Let me dig in to my patching and report back here.

But based on your videos, clearly your fix works which is what matters - thank you!

[azcarraga]

@graszka22 I can confirm it's working locally for me as well! I used yarn patch and then yarn install + delete pods + pod install and it all works perfect.

Thanks for your help and for this fix.