useAnimatedKeyboard returns wrong height

[Martinocom-Switcho]

Description

When using useAnimatedKeyboard there are times when the height returned by the hook is not right, causing the same "jump" effect as KeyboardAvoidingView. This is caused by the height changing from 0 to max almost instantly (or in few 3-5 steps). Usually it happens when pressing rapidly on components, causing keyboard to open and close frequently. This happens both during opening and during closing. It is happening only on iOS, since on Android I'm not able to reproduce this.

It is happening also in a barebone react-native project, just with Reanimated.

Screen.Recording.2024-11-18.at.17.35.30.mp4

Steps to reproduce

1. Have some inputs and a "sticky" component
2. Try to press multiple times in order to open-close the keyboard rapidly
3. --> The height will be wrong at some point

I configured a barebone app with just Reanimated and I was able to reproduce it. I'll leave the code of that App.tsx here.

App.tsx code

import React from 'react';

import {
  Button,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  Text,
  TextInput,
} from 'react-native';
import Animated, { useAnimatedKeyboard, useAnimatedProps, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';


Animated.addWhitelistedNativeProps({text: true});

const AnimatedText = Animated.createAnimatedComponent(TextInput);

function App(): React.JSX.Element {


  const { height } = useAnimatedKeyboard();
  const oldHeight = useSharedValue(0);
  const animatedProps = useAnimatedProps(() => {

    if (oldHeight.value - height.value > 100) {
      console.log('Keyboard moved too quickly!');
    }
    oldHeight.value = height.value;

    return {
      text: `${height.value}`,
      defaultValue: `${height.value}`,
    };
  }, [height]);

  const animatedStyle = useAnimatedStyle(() => {
    return {
      marginBottom: height.value,
      backgroundColor: 'yellow',
      padding: 16,
    };
  });

  return (
    <SafeAreaView style={style.container}>
      <ScrollView contentInsetAdjustmentBehavior="automatic">
          <AnimatedText style={{ fontSize: 24 }} animatedProps={animatedProps} />

          <Text style={{ marginTop: 16 }}>Name</Text>
          <TextInput />
          <Text style={{ marginTop: 16 }}>Surname</Text>
          <TextInput />
          <Text style={{ marginTop: 16 }}>Secret</Text>
        </ScrollView>
        <Animated.View style={animatedStyle}>
          <Button title="Sticky Me"/>
        </Animated.View>
    </SafeAreaView>
  );
}

const style = StyleSheet.create({
  container: {
    backgroundColor: 'white',
    flex: 1,
  },
}
);

export default App;

Snack or a link to a repository

https://snack.expo.dev/mtxg_VNC73hJaIz9hoMG0?platform=ios
Code of App.tsx available also in this issue

Reanimated version

3.16.1

React Native version

0.76.1

Platforms

iOS

JavaScript runtime

None

Workflow

React Native

Architecture

Fabric (New Architecture)

Build type

Debug app & production bundle

Device

iOS simulator

Device model

No response

Acknowledgements

Yes

[mhoran]

This will happen when the keyboard animation takes longer than expected. The keyboard height is estimated during animation here based on the keyboard taking 30 frames, or 0.48 seconds at 60 FPS, to show up. If the keyboard animation takes longer than that, the estimation will return the target height.

I see this on an iPad with physical keyboard. When using a physical keyboard, there is a small auto-suggest window docked at the bottom of the screen. When bringing up the on screen keyboard, this docked keyboard hides, then bring up the on screen keyboard. That takes longer than 0.48 seconds, resulting in the same behavior.

In your case, I think that the keyboard is still finishing the closing animation when it starts opening again. That takes longer than 0.48 seconds, so you see this bug.

[mhoran]

I may have accidentally fixed this while working on something else. I cannot reproduce anymore with the above patch applied.