Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.firstflow.app/llms.txt

Use this file to discover all available pages before exploring further.

import { useKeyboardHeight } from "@firstflow/react-native";
useKeyboardHeight listens to the keyboard show/hide events and returns the current keyboard height in pixels. Use it to shift your chat layout up so the composer stays visible when the keyboard opens.

​
Usage

import { FirstflowWidget, useKeyboardHeight } from "@firstflow/react-native";
import { View } from "react-native";

function ChatScreen() {
  const keyboardHeight = useKeyboardHeight();

  return (
    <FirstflowWidget experiencePlacement="inlineStack">
      <View style={{ flex: 1, paddingBottom: keyboardHeight }}>
        <MessageList />
        <Composer />
      </View>
    </FirstflowWidget>
  );
}

​
Return value

number — the current keyboard height in pixels. Returns 0 when the keyboard is hidden.

​
Notes

  • The height animates on keyboard show/hide. For a smoother transition, wrap the paddingBottom in a LayoutAnimation or Animated.Value.
  • On Android, if android:windowSoftInputMode is set to adjustResize in your AndroidManifest.xml, the OS resizes the window automatically and you may not need useKeyboardHeight.
  • Must be called inside a component that is a descendant of FirstflowProvider.