KeyboardAvoidingView not animating with autofill fields

[LielAmar]

Describe the bug
If I have a form wrapped in KeyboardAvoidingView (and also KeyboardStickyView) and say I have email and password in the form, then switching between the form fields takes a split second to load the autofill option (for example - passwords). This causes the screen to flicker and the components to "jump around" instead of animating.

Code snippet

<SafeAreaView>
  <KeyboardAvoidingView
    behavior={"padding"}
    keyboardVerticalOffset={20}
  >
    <View className="items-center justify-between h-full">
      <Logo />

      <View className="w-full flex flex-col gap-10">
        < TextInput
          placeholder="enter email address"
          keyboardType="email-address"
          autoFocus={true}
        />

        <TextInput
          placeholder="enter your password"
          keyboardType="default"
          secure={true}
        />

        <Button title="Sign Up" onPress={() => handleSignUp()} />
      </View>
    </View>
  </KeyboardAvoidingView>
</SafeAreaView>

<SafeAreaView>
  <View className="items-center justify-between h-full">
    <Logo />

    <KeyboardStickyView>
      <View className="w-full flex flex-col gap-10">
        < TextInput
          placeholder="enter email address"
          keyboardType="email-address"
          autoFocus={true}
        />
  
        <TextInput
          placeholder="enter your password"
          keyboardType="default"
          secure={true}
        />
  
        <Button title="Sign Up" onPress={() => handleSignUp()} />
      </View>
    </KeyboardStickyView>
  </View>
</SafeAreaView>

Repo for reproducing
Can't :(

To Reproduce
Steps to reproduce the behavior:

explained pretty well above...

Expected behavior
An animated effect instead of content jumping around

Screenshots

ScreenRecording_02-21-2025_22-18-22_1.mov

Smartphone (please complete the following information):

• Desktop OS: [e.g. MacOS 15.3.1]
• Device: [e.g. iPhone 15 Pro Max]
• OS: [e.g. iOS 18.3.1]
• RN version: [e.g. 0.76.7]
• RN architecture: [e.g.new]
• JS engine: [e.g. Hermes]
• Library version: [e.g. 1.16.4]

Additional context
none

[kirillzyusko]

@LielAmar Is the problem reproducible on a simulator? If yes, can you capture a problem on simulator via QuickTime player?

From a provided video I don't understand when the jump occurs, because I think keyboard is not captured for password-like fields using a built-in screen-recorder 🤔

[tibbe]

We just had to remove autoFocus from our app (and replace with a timer-based solution) because it makes the padding added be incorrect on iOS (i.e. the KeyboardAvoidingView gets extra spacing from the keyboard). I will see if I can find some time to make a repro but basically a KeyboardAvoidingView with a TextInput in it with autoFocus={true} and some component that should be flush above the keyboard should show it.

[John-Colvin]

I have the same problem here. I have a plain text field & an email field. When I have the text field focused and then I tap on the email field there is a brief moment where the "Passwords" autofill bar at the top of the keyboard disappears and then re-appears (this happens system-wide & is not related to React Native or this library). This also happens when switching between any fields that trigger the "Passwords" autofill menu.

The problem related to this repo: the view is not eased/animated when this change happens, causing a very noticeable flicker in the content.

Here are the events that are being sent, note the change in height. Timing is 1ms between onStart/onEnd then 7-8ms between pairs.

 LOG  onStart {"duration": 0, "eventName": "onKeyboardMoveStart", "height": 301, "progress": 1, "target": 118}
 LOG  onEnd {"duration": 0, "eventName": "onKeyboardMoveEnd", "height": 301, "progress": 1, "target": 118}
 LOG  onStart {"duration": 0, "eventName": "onKeyboardMoveStart", "height": 301, "progress": 1, "target": 118}
 LOG  onEnd {"duration": 0, "eventName": "onKeyboardMoveEnd", "height": 301, "progress": 1, "target": 118}
 LOG  onStart {"duration": 0, "eventName": "onKeyboardMoveStart", "height": 346, "progress": 1, "target": 118}
 LOG  onEnd {"duration": 0, "eventName": "onKeyboardMoveEnd", "height": 346, "progress": 1, "target": 118}

[John-Colvin]

Here's a hacky workaround that debounces, only works for behavior: "padding"

DebouncedKeyboardAvoidingView.tsx

import type React from "react";
import { forwardRef, useCallback, useMemo, useRef } from "react";
import type { View } from "react-native";
import Reanimated, {
  interpolate,
  runOnJS,
  runOnUI,
  useAnimatedStyle,
  useDerivedValue,
  useSharedValue,
} from "react-native-reanimated";

import { useWindowDimensions } from "react-native-keyboard-controller";

import type { LayoutRectangle, ViewProps } from "react-native";

import { useLayoutEffect } from "react";

import { useKeyboardContext } from "react-native-keyboard-controller";
import { useKeyboardHandler } from "react-native-keyboard-controller";

const useKeyboardAnimation = () => {
  const { reanimated } = useKeyboardContext();

  const heightWhenOpened = useSharedValue(0);
  const progress = useSharedValue(0);
  const heightUpdateTimeoutRef = useRef<NodeJS.Timeout | null>(null);

  const updateHeightWhenOpened = useCallback((height: number) => {
    runOnUI(() => {
      "worklet";
      heightWhenOpened.value = height;
    })();
  }, [heightWhenOpened]);

  const debouncedHeightUpdate = useCallback((height: number) => {
    // Clear any existing timeout (last write wins)
    if (heightUpdateTimeoutRef.current) {
      clearTimeout(heightUpdateTimeoutRef.current);
    }
    
    // Set new timeout for 20ms delay
    heightUpdateTimeoutRef.current = setTimeout(() => {
      updateHeightWhenOpened(height);
      heightUpdateTimeoutRef.current = null;
    }, 20);
  }, [updateHeightWhenOpened]);

  useLayoutEffect(() => {
    const initialHeight = -reanimated.height.value;
    const initialProgress = reanimated.progress.value;

    heightWhenOpened.value = initialHeight;
    progress.value = initialProgress;
  }, []);

  useKeyboardHandler(
    {
      onStart: (e) => {
        "worklet";

        if (e.height > 0) {
          if (e.duration === 0) {
            // Use debounced update for instant changes
            runOnJS(debouncedHeightUpdate)(e.height);
          } else {
            // Immediate update for animated changes
            heightWhenOpened.value = e.height;
          }
        }
      },
      onMove: (e) => {
        "worklet";

        progress.value = e.progress;
      },
      onInteractive: (e) => {
        "worklet";

        progress.value = e.progress;
      },
      onEnd: (e) => {
        "worklet";

        progress.value = e.progress;
      },
    },
    [debouncedHeightUpdate],
  );

  return { progress, heightWhenOpened };
};

type KeyboardAvoidingViewBaseProps = {
  /**
   * Controls whether this `KeyboardAvoidingView` instance should take effect.
   * This is useful when more than one is on the screen. Defaults to true.
   */
  enabled?: boolean;

  /**
   * Distance between the top of the user screen and the React Native view. This
   * may be non-zero in some cases. Defaults to 0.
   */
  keyboardVerticalOffset?: number;
} & ViewProps;

export type KeyboardAvoidingViewProps = KeyboardAvoidingViewBaseProps &
  {
    /**
     * Specify how to react to the presence of the keyboard.
     */
    behavior?: "padding";

    /**
     * `contentContainerStyle` is not allowed for these behaviors.
     */
    contentContainerStyle?: never;
  };

const defaultLayout: LayoutRectangle = {
  x: 0,
  y: 0,
  width: 0,
  height: 0,
};

/**
 * HACKED UP VERSION OF KeyboardAvoidingView that debounces the height update
 * to avoid view flicker when e.g. autofill bar flickers in and out, as it tends to do
 * Only works for padding behavior.
 * 
 * Original comment:
 * 
 * A View component that automatically adjusts its height, position, or bottom padding
 * when the keyboard appears to ensure that the content remains visible.
 *
 * @returns A View component that adjusts to keyboard visibility.
 * @see {@link https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/components/keyboard-avoiding-view|Documentation} page for more details.
 * @example
 * ```tsx
 * <KeyboardAvoidingView behavior="padding">
 *   <TextInput />
 * </KeyboardAvoidingView>
 * ```
 */
const KeyboardAvoidingView = forwardRef<
  View,
  React.PropsWithChildren<KeyboardAvoidingViewProps>
>(
  (
    {
      behavior,
      children,
      contentContainerStyle,
      enabled = true,
      keyboardVerticalOffset = 0,
      style,
      onLayout: onLayoutProps,
      ...props
    },
    ref,
  ) => {
    const initialFrame = useSharedValue<LayoutRectangle | null>(null);
    const frame = useDerivedValue(() => initialFrame.value || defaultLayout);

    const { progress, heightWhenOpened } = useKeyboardAnimation();
    const { height: screenHeight } = useWindowDimensions();

    const relativeKeyboardHeight = useCallback(() => {
      "worklet";

      const keyboardY =
        screenHeight - heightWhenOpened.value - keyboardVerticalOffset;

      return Math.max(frame.value.y + frame.value.height - keyboardY, 0);
    }, [screenHeight, keyboardVerticalOffset]);
    const interpolateToRelativeKeyboardHeight = useCallback(
      (value: number) => {
        "worklet";

        return interpolate(value, [0, 1], [0, relativeKeyboardHeight()]);
      },
      [relativeKeyboardHeight],
    );

    const onLayoutWorklet = useCallback(
      (layout: LayoutRectangle) => {
        "worklet";

        initialFrame.value = layout;
      },
      [],
    );
    const onLayout = useCallback<NonNullable<ViewProps["onLayout"]>>(
      (e) => {
        runOnUI(onLayoutWorklet)(e.nativeEvent.layout);
        onLayoutProps?.(e);
      },
      [onLayoutProps],
    );

    const animatedStyle = useAnimatedStyle(() => {
      const bottom = interpolateToRelativeKeyboardHeight(
        progress.value,
      );
      const bottomHeight = enabled ? bottom : 0;

      switch (behavior) {
        case "padding":
          return { paddingBottom: bottomHeight };
        default:
          return {};
      }
    }, [behavior, enabled, interpolateToRelativeKeyboardHeight]);
    const containerStyle = style;
    const combinedStyles = useMemo(
      () => [containerStyle, animatedStyle],
      [containerStyle, animatedStyle],
    );

    return (
      <Reanimated.View
        ref={ref}
        style={combinedStyles}
        onLayout={onLayout}
        {...props}
      >
        {children}
      </Reanimated.View>
    );
  },
);

KeyboardAvoidingView.displayName = "KeyboardAvoidingView";
export default KeyboardAvoidingView;

[kirillzyusko]

We just had to remove autoFocus from our app (and replace with a timer-based solution) because it makes the padding added be incorrect on iOS (i.e. the KeyboardAvoidingView gets extra spacing from the keyboard). I will see if I can find some time to make a repro but basically a KeyboardAvoidingView with a TextInput in it with autoFocus={true} and some component that should be flush above the keyboard should show it.

I think it has been fixed in #880

The problem related to this repo: the view is not eased/animated when this change happens, causing a very noticeable flicker in the content.

@John-Colvin the problem is that if I decide to animate such transitions, then in certain configurations it'll look even worse. Imagine you have 2 TextInputs: one is numeric and the other is QWERTY-keyboard and you display a KeyboardToolbar above the keyboard. When keyboard changes its size, then you need to animate that toolbar, and when keyboard changes size from smaller to bigger, then toolbar will be under the keyboard and then will appear it and it'll not look good. It looks much better with instant transitions. For KeyboardAvoidingView it's a little bit different, and maybe there animated transitions are preferrable, but I had them in the past on Android (and I believe on iOS) and I got so much unexpected bugs, that I simply decide to remove them. For context: #376

@John-Colvin can you show the video how it looks in your case?