useMultinaireKeyboard

Detect keyboard visibility and get animated height values for smooth layouts.

Usage

import { useMultinaireKeyboard } from '@multinaire/multinaire-design';

function MyComponent() {
  const { isKeyboardVisible, animatedHeight } = useMultinaireKeyboard();

  return (
    <Animated.View style={{ paddingBottom: animatedHeight }}>
      <TextInput placeholder="Type here..." />
      {isKeyboardVisible && <Text>Keyboard is open</Text>}
    </Animated.View>
  );
}

Return Value

Property	Type	Description
isKeyboardVisible	boolean	Whether keyboard is currently visible
animatedHeight	SharedValue<number>	Reanimated shared value for smooth animations

Animated Height

The animatedHeight is a Reanimated shared value that animates smoothly when the keyboard opens/closes:

import Animated, { useAnimatedStyle } from 'react-native-reanimated';

function ChatInput() {
  const { animatedHeight } = useMultinaireKeyboard();

  const animatedStyle = useAnimatedStyle(() => ({
    paddingBottom: animatedHeight.value,
  }));

  return (
    <Animated.View style={animatedStyle}>
      <TextInput />
    </Animated.View>
  );
}

Example: Chat Screen

function ChatScreen() {
  const { animatedHeight } = useMultinaireKeyboard();
  const { bottom } = useSafeAreaInsets();

  const animatedStyle = useAnimatedStyle(() => ({
    paddingBottom: animatedHeight.value || bottom,
  }));

  return (
    <View style={{ flex: 1 }}>
      <MessageList />
      <Animated.View style={animatedStyle}>
        <ChatInput />
      </Animated.View>
    </View>
  );
}

Platform Notes

• On iOS, the keyboard height is reported directly
• On Android, behavior may vary based on android:windowSoftInputMode
• The hook handles platform differences internally