useReanimatedKeyboardAnimation doesn't look smooth like the Reanimated UseAnimatedKeyboard hook in IOS when closing the keyboard

[devoren]

Describe the bug
Hello! I'm creating a chat app and using fakeView. I'm using useReanimatedKeyboardAnimation but the height value is faster than useAnimatedKeyboard height value in iOS. Also how to add instets bottom? when i use useReanimatedKeyboardAnimation i use it like this: height: height.value ? Math.abs(height.value) : insets.bottom but it is not working with useAnimatedKeyboard (jumping)

Code snippet
Add your code snippet where error has been occurred.

<>
const { height } = useReanimatedKeyboardAnimation(); // ---- useAnimatedKeyboard ----

const fakeView = useAnimatedStyle(
() => ({
	height: height.value ? Math.abs(height.value) : insets.bottom,
}),[],);

<View style={styles.container}>
	<Chats.MessagesList
		data={allMessages}
	/>
	<Chats.MessageActions
		chat={chat}
		setMessages={setMessages}
	/>
	<Animated.View style={fakeView} />
      </View>
</>

Repo for reproducing
I would be highly appreciate if you can provide repository for reproducing your issue. It can significantly reduce the time for discovering and fixing the problem.
https://github.com/kirillzyusko/react-native-keyboard-controller/blob/main/example/src/screens/Examples/ReanimatedChatFlatlist/index.tsx

To Reproduce
Steps to reproduce the behavior:

1. Use ReanimatedChatFlatlist example
2. Open on ios simulator
3. Change useReanimatedKeyboardAnimation to useAnimatedKeyboard
4. Check the difference when opening/closing the keyboard.

Expected behavior
A clear and concise description of what you expected to happen.
The keyboard closes smoothly, as when using the useAnimatedKeyboard hook.

Screenshots
If applicable, add screenshots to help explain your problem.

useReanimatedKeyboardAnimation:

useReanimatedKeyboardAnimation.mp4

useAnimatedKeyboard:

useAnimatedKeyboard.mp4

Smartphone (please complete the following information):

• Desktop OS: [MacOS]
• Device: [Phone14]
• OS: [iOS 16.6]
• RN version: [0.72.6]
• RN architecture: [old]
• JS engine: [Hermes]
• Library version: [1.9.5]

Additional context
Add any other context about the problem here.

[kirillzyusko]

Hello @devoren

If you want to have the same behavior as reanimated hook, then you can use something like this:

const useAnimatedKeyboard = () => {
  const height = useSharedValue(0);
  
  useKeyboardHandler({
    onMove: (e) => {
      'worklet';

      height.value = e.height;
    },
  }, []);

  return { height };
}

However it's strange that there is no back animation. In my example app it's present:

RNKC-back-transition.mp4

The only difference I see in RN version (0.72.4 vs 0.72.7), iOS version (17.2 vs 16.6), device (iPhone 15 Pro simulator vs iPhone 14).

The described problem I observed in RN 0.73 🤔 But I haven't figured out what is causing this problem yet

[devoren]

@kirillzyusko Hey! im sorry, RN version is 0.72.6. Yeah no back animation and height value is jumping from -326 to -0 when closing the keyboard. Android works fine in my case

[kirillzyusko]

Yeah no back animation and height value is jumping from -326 to -0 when closing the keyboard

@devoren that how it was designed to work. When keyboard appears it will also instantly change the height from 0 to -326. iOS kind of schedules layout animations and because of that animation actually happens.

When you are using onMove handler then you will get intermediate values, but they will not be perfectly synchronized with a keyboard (they will be always kind of one frame behind, because I'm pulling keyboard coordinates via DisplayLink and it fires a callback before next frame).

Can you try to clone the repo and run example app? Are you observing the same problem there? What is the react-native-reanimated version you are using?

[devoren]

"react-native-reanimated": "^3.6.1". Okay i will try it today, thank you!

[devoren]

@kirillzyusko Hello! Sorry for the late feedback. I tried the example but the back animation is still not working. Can you check flatlist example? Chat works but chat flatlist example not. RN 0.72.4v, ios 16.4, iphone 13
UPD: If I press the return button it works as expected, but if I press a message from the list the keyboard closes without animation. In the video I pressed messages
UPD 2: If i press message in chat screen (not flatlist) it also works with animation
UPD 3: if i use useAnimatedKeyboard and press message works with back animation

Simulator.Screen.Recording.-.iPhone.13.-.2023-12-27.at.22.03.53.online-video-cutter.com.mp4

[kirillzyusko]

Hm, very interesting @devoren

I'll investigate it, but for now I'd suggest you to go with:

const useAnimatedKeyboard = () => {
  const height = useSharedValue(0);
  
  useKeyboardHandler({
    onMove: (e) => {
      'worklet';

      height.value = e.height;
    },
  }, []);

  return { height };
}

Since you are animating height (i. e. non UI props) it's better to sync up values on every frame 🙂

[devoren]

In production, the "back animation" is better than DEV mode, and also the back animation only doesn't show up if I dismiss the keyboard by pressing the list rather than the keyboard back button. @kirillzyusko thank you ❤️

[kirillzyusko]

@focux @nandorojo @devoren @jongbelegen looks like you are all experienced this problem.

I fixed it in 1.11.5 version and published it on npm so you can use useReanimatedKeyboardAnimation/useKeyboardAnimation hooks as before and it should work as expected 👀

If it doesn't work in your case (for some reasons), please open a new issue 🙏

[focux]

Sounds good. Thank you so much!

[alantoa]

Confirm it got fixed in v1.11.5, thanks! 🙏