useAnimatedKeyboard native iOS crash on keyboardDidHide

[MichaelDanielTom]

Description

When using the useAnimatedKeyboard hook, there are occasional crashes when the keyboard is shown/hidden on iOS. Here is the stack objc stack and location of the error within the screenshot.

Steps to reproduce

I have been having a hard time reproducing it deterministically, however anecdotally it seems to occur after the device/simulator has been on for at least a few minutes. It can happen when the keyboard is closing or opening.

Snack or a link to a repository

n/a

Reanimated version

2.10.0

React Native version

0.66.0

Platforms

iOS

JavaScript runtime

No response

Workflow

No response

Architecture

No response

Build type

No response

Device

No response

Device model

No response

Acknowledgements

Yes

[github-actions[bot]]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[MingaudasVagonis]

This seems to happen quite frequently when navigating to a screen with autoFocus on one of the inputs enabled. Happens 1 out 5 times or so. Hermes enabled.

Quite easy to reproduce with this simple component

import React, { FC, memo } from 'react';
import Animated, {
  useAnimatedKeyboard,
  useAnimatedStyle,
} from 'react-native-reanimated';

type KeyboardFillerProps = {
  offset?: number;
};

export const KeyboardFiller: FC<KeyboardFillerProps> = memo(({ offset }) => {
  const { height } = useAnimatedKeyboard();

  const placeholderStyle = useAnimatedStyle(
    () => ({
      height: height.value - (offset || 0),
    }),
    [offset],
  );

  return <Animated.View style={placeholderStyle} />;
});

KeyboardFiller.displayName = 'KeyboardFiller';

[gtokman]

I'm also seeing an intermittent crash.

@MingaudasVagonis I don't think that autoFocus is the reason. I'm not using that prop.

[ChildishForces]

I had a similar bug on Android, and solved it by doing the following:

const animatedStyle = useAnimatedStyle(() => ({
  transform: [{ translateY: -(keyboard?.height?.value ?? 0) })],
});

It appears it is possible for the value to not be a number under certain conditions. I don't know this for a fact, but doing this solved my issue based off my hunch.

Edit: Based on reviewing the screenshot, this appears to crash on native side before it even becomes an issue on JS runtime though so disregard, but I'll leave this up in case this helps any Android users.