Antipattern question

[lauridskern]

Is it an antipattern to add a value to an animated value like in the following code?
I am asking because the animation doesn't feel quite smooth.

const translateStyle = useAnimatedStyle(() => {
      return {
        transform: [
          {
            translateY:
              -keyboardAnim.height.value +
              interpolate(keyboardAnim.height.value, [0, 335], [0, 32], {
                extrapolateRight: Extrapolation.CLAMP,
              }),
          },
        ],
      };
    });

[lauridskern]

The purpose is to negate the padding I am adding at the bottom of the input field when the keyboard is opened. See attached video. When testing on a device it becomes quite obvious that the animation isn't quite smooth. The jittering is best seen when looking at the round send button in the second video

CleanShot.2023-04-10.at.20.32.26.mp4

RPReplay_Final1681151705_AdobeExpress.mp4