react-native-keyboard-controller

The default useKeyboardAnimation hook changes the Android softInputMode on component mount/unmount. In deep navigation stacks (like react-navigation), this can cause all subsequent screens to inherit adjustResize because previous screens remain mounted.

To ensure softInputMode is only set to adjustResize while a specific screen is focused and restored to default when the screen is blurred, you can implement a custom hook using useFocusEffect from @react-navigation/native and the primitives from react-native-keyboard-controller.

import { useContext, useCallback } from "react";
import { useFocusEffect } from "@react-navigation/native";
import {
  KeyboardController,
  AndroidSoftInputModes,
  useKeyboardContext,
} from "react-native-keyboard-controller";

function useKeyboardAnimation() {
  useFocusEffect(
    useCallback(() => {
      KeyboardController.setInputMode(
        AndroidSoftInputModes.SOFT_INPUT_ADJUST_RESIZE,
      );

      return () => KeyboardController.setDefaultMode();
    }, []),
  );

  const context = useKeyboardContext();

  return context.animated;
}

Since KeyboardChatScrollView is a custom scroll component, you can integrate it with third-party virtualized lists using their renderScrollComponent prop.

To ensure correct behavior, create a wrapper component that forwards the ref and sets automaticallyAdjustContentInsets={false} and contentInsetAdjustmentBehavior="never".

import React, { forwardRef } from "react";
import {
  KeyboardChatScrollView,
  type KeyboardChatScrollViewRef,
} from "react-native-keyboard-controller";
import type { ScrollViewProps } from "react-native";
import type { KeyboardChatScrollViewProps } from "react-native-keyboard-controller";

const VirtualizedListScrollView = forwardRef<
  KeyboardChatScrollViewRef,
  ScrollViewProps & KeyboardChatScrollViewProps
>((props, ref) => {
  return (
    <KeyboardChatScrollView
      ref={ref}
      automaticallyAdjustContentInsets={false}
      contentInsetAdjustmentBehavior="never"
      {...props}
    />
  );
});

export default VirtualizedListScrollView;

Then use it in your list:

// For FlashList
<FlashList
  renderScrollComponent={VirtualizedListScrollView}
  {...otherProps}
/>

// For FlatList or LegendList (memoize the component to avoid re-renders)
const memoList = useCallback(
  (props: ScrollViewProps) => <VirtualizedListScrollView {...props} />,
  [],
);

<FlatList
  renderScrollComponent={memoList}
  {...otherProps}
/>

To create animations synchronized with the keyboard, use either useKeyboardAnimation or useReanimatedKeyboardAnimation. Both hooks return an object containing progress and height values.

Choosing a hook

• useKeyboardAnimation: Returns standard React Native Animated.Value objects. It has the Native Driver enabled (useNativeDriver: true), which means it is highly performant but limited to properties that support the native driver (e.g., transform, opacity). It cannot be used to animate properties like height or backgroundColor.
• useReanimatedKeyboardAnimation: Returns Reanimated.SharedValue objects. This is compatible with React Native Reanimated v2/v3 but is not compatible with the Reanimated v1 API.

Usage Pattern

1. Call the hook to get height and progress.
2. Use progress to interpolate values (e.g., for scaling).
3. Apply height and interpolated values to Animated.View styles, typically within the transform property to ensure native driver compatibility.

import React from "react";
import { Animated, StyleSheet, TextInput, View } from "react-native";
import { useKeyboardAnimation } from "react-native-keyboard-controller";

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "flex-end",
  },
  row: {
    flexDirection: "row",
  },
});

export default function KeyboardAnimation() {
  // 1. get access to animated values
  const { height, progress } = useKeyboardAnimation();

  const scale = progress.interpolate({
    inputRange: [0, 1],
    outputRange: [1, 2],
  });

  return (
    <View style={styles.container}>
      <View style={styles.row}>
        <Animated.View
          style={{
            width: 50,
            height: 50,
            backgroundColor: "#17fc03",
            borderRadius: 15,
            // 2. apply transformations
            transform: [{ translateY: height }, { scale }],
          }}
        />
      </View>
      <TextInput
        style={{
          width: "100%",
          marginTop: 50,
          height: 50,
          backgroundColor: "yellow",
        }}
      />
    </View>
  );
}