useAnimatedKeyboard gives wrong values when prefersCrossFadeTransitions is turned on.

[joarkosberg]

Description

useAnimatedKeyboard reports wrong values when used with prefersCrossFadeTransitions turned on with iOS. Prefer Cross-Fade Transitions is a sub option, after turning on Reduce Motion on iOS. It seems when this is turned on, the useAnimatedKeyboard reports wrong info.

A similar issue was fixed in react natives keyboard avoiding view here: https://github.com/facebook/react-native/pull/34503

Steps to reproduce

1. Can be reproduced in example app, I tested with apps/paper-example in react-native-reanimated repository.
2. Install and get running on an iOS simulator as normally.
3. Go into settings on iOS device and turn on Reduce Motion + Prefer Cross-Fade Transitions
4. Go into reanimated paper example app, and open useAnimatedKeyboard example.
5. Tap input field, to get keyboard up. Then tap outside for it to close.
6. Keyboard focus works, but when hiding keyboard, the animated keyboard reports wrong height and status afterwards, when keyboard is closed. a. Have experienced some scenarios of it also giving to big a height on opening keyboard.

https://github.com/user-attachments/assets/aca6932f-60cb-4fbe-ba5b-e3a0f4538673

Logged values

With added logs by usage of animated keyboard:

  const translateStyle = useAnimatedStyle(() => {
+    console.info("keyboard state", keyboard.height.value, keyboard.state.value)
    return {
      transform: [{ translateY: -keyboard.height.value }],
    };
  });

Then on opening the values seems correct, going to correct height and open state. But on closing it goes to 0 height, then straight up to a lot higher, with still reporting keyboard as open.

 INFO  keyboard state 0 0
 INFO  keyboard state 0 2
 INFO  keyboard state 291 2
 INFO  keyboard state 0 2
 INFO  keyboard state 852 2

Snack or a link to a repository

https://github.com/software-mansion/react-native-reanimated/tree/main/apps/paper-example

Reanimated version

3.15.0

React Native version

0.75.1

Platforms

iOS

JavaScript runtime

None

Workflow

None

Architecture

Paper (Old Architecture)

Build type

None

Device

None

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?