[v3][iOS] useAnimatedKeyboard smooth animation breaks with keyboardDismissMode="on-drag"

[azhavrid]

Description

Smooth animation glitches when ScrollView with prop keyboardDismissMode="on-drag" dismisses keyboard.

Attaching video preview of this issue. At first closed 2 times keyboard with simple tap and later on closed it by dragging ScrollView.

Video Preview

Screenshot.2023-03-09.at.00.45.07.mp4

Code to reproduce

import React from 'react';
import {ScrollView, TextInput, View} from 'react-native';
import Animated, {
  useAnimatedKeyboard,
  useAnimatedStyle,
} from 'react-native-reanimated';

function App() {
  const keyboard = useAnimatedKeyboard();
  const translateStyle = useAnimatedStyle(() => {
    return {
      backgroundColor: 'red',
      transform: [{translateY: -keyboard.height.value}],
    };
  });

  return (
    <ScrollView keyboardDismissMode="on-drag">
      <View style={{height: 500, backgroundColor: 'blue'}} />
      <Animated.View style={translateStyle}>
        <TextInput />
      </Animated.View>
    </ScrollView>
  );
}

export default App;

Other tested cases

• Keyboard.dismiss() doesn't break animation
• Closing gesture for react-navigation stack breaks animation
• Moving app to background with opened keyboard breaks animation

Steps to reproduce

1. Focus input
2. Drag ScrolView with keyboardDismissMode="on-drag"

Versions

• "react-native": "0.71.4",
• "react-native-reanimated": "3.0.2"

Platforms

iOS

[github-actions]

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?

[github-actions]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Snack or a link to a repository, Reanimated version and React Native version sections.

[tomekzaw]

May be fixed with #4266.