useKeyboard

useKeyboard is a hook that provides Reanimated shared values for the current and final heights of the keyboard, along with a boolean shared value indicating whether the keyboard is visible. These properties are keyboardHeight, keyboardFinalHeight, and isKeyboardVisible and can be utilized when building animations.

info

This hook is provided for convenience, however it is not necessary for accessibility or part of the official AMA guidelines.

Usage

import { useKeyboard } from '@react-native-ama/bottom-sheet';
import Animated, {
  useAnimatedStyle,
  useDerivedValue,
} from 'react-native-reanimated';

const Example = props => {
  const { keyboardHeight, keyboardFinalHeight, isKeyboardVisible } =
    useKeyboard(props.shouldHandleKeyboardEvents);

  // Do something with values
  const maxHeightValue = useDerivedValue(() => {
    return maxHeight - keyboardHeight.value;
  }, [keyboardHeight, maxHeight]);

  const animatedStyle = useAnimatedStyle(() => {
    const keyboard = keyboardHeight.value;

    return {
      transform: [{ translateY: translateY.value - keyboard }],
      maxHeight: maxHeightValue.value,
    };
  }, [maxHeightValue, translateY, keyboardHeight]);

  return <Animated.View style={[animatedStyle]} />;
};

Arguments

shouldHandleKeyboardEvents (optional)

When true, the hook listens to keyboard show/hide events and updates the shared values accordingly. Set to false to opt out of keyboard handling.

Type	Default
boolean	true

Returns

keyboardHeight

A Reanimated shared value representing the current height of the keyboard.

Type	Initial
SharedValue<number>	0

You can access data stored in the shared value with either its value property or get and set methods.

keyboardFinalHeight

A Reanimated shared value representing the final height of the keyboard. When the keyboard is not visible, this value will be 0.

Type	Initial
SharedValue<number>	0

You can access data stored in the shared value with either its value property or get and set methods.

isKeyboardVisible

A Reanimated shared value representing whether the keyboard is visible.

Type	Initial
SharedValue<boolean>	false

You can access data stored in the shared value with either its value property or get and set methods.

Related

SharedValue type

interface SharedValue<Value = unknown> {
  value: Value;
  get(): Value;
  set(value: Value | ((value: Value) => Value)): void;
  addListener: (listenerID: number, listener: (value: Value) => void) => void;
  removeListener: (listenerID: number) => void;
  modify: (
    modifier?: <T extends Value>(value: T) => T,
    forceUpdate?: boolean,
  ) => void;
}