### Run Example App

Source: https://github.com/launchtodayhq/react-native-keyboard-composer/blob/main/CONTRIBUTING.md

Commands to navigate to the example directory, install its dependencies, and run the example app on iOS or Android.

```bash
cd example
pnpm install
pnpm prebuild
pnpm ios    # or pnpm android
```

--------------------------------

### Test Example App on iOS

Source: https://github.com/launchtodayhq/react-native-keyboard-composer/blob/main/CONTRIBUTING.md

Navigate to the example directory and run this command to test the application on iOS.

```bash
cd example
pnpm ios
```

--------------------------------

### Local iOS Development Loop

Source: https://github.com/launchtodayhq/react-native-keyboard-composer/blob/main/README.md

Execute these commands from the `example/` directory to run the local iOS development loop: install dependencies, prebuild locally, build and run on iOS, and start Metro in local mode.

```bash
pnpm i
pnpm prebuild:local
pnpm ios:local
pnpm start:local
```

--------------------------------

### Test Example App on Android

Source: https://github.com/launchtodayhq/react-native-keyboard-composer/blob/main/CONTRIBUTING.md

Navigate to the example directory and run this command to test the application on Android.

```bash
cd example
pnpm android
```

--------------------------------

### Run Android with Local Source

Source: https://github.com/launchtodayhq/react-native-keyboard-composer/blob/main/example/README.md

Run the example on Android using the local package source.

```bash
pnpm android:local
```

--------------------------------

### Clone Repository and Install Dependencies

Source: https://github.com/launchtodayhq/react-native-keyboard-composer/blob/main/CONTRIBUTING.md

Steps to clone the repository and install project dependencies using pnpm.

```bash
git clone https://github.com/launchtodayhq/react-native-keyboard-composer.git
cd react-native-keyboard-composer
pnpm install
```

--------------------------------

### Install Dependencies

Source: https://github.com/launchtodayhq/react-native-keyboard-composer/blob/main/example/README.md

Install project dependencies using pnpm.

```bash
pnpm install
```

--------------------------------

### Run iOS with Local Source

Source: https://github.com/launchtodayhq/react-native-keyboard-composer/blob/main/example/README.md

Run the example on iOS using the local package source.

```bash
pnpm ios:local
```

--------------------------------

### Run on Android

Source: https://github.com/launchtodayhq/react-native-keyboard-composer/blob/main/example/README.md

Run the example application on an Android emulator or device.

```bash
pnpm android
```

--------------------------------

### Run on iOS

Source: https://github.com/launchtodayhq/react-native-keyboard-composer/blob/main/example/README.md

Run the example application on an iOS simulator or device.

```bash
pnpm ios
```

--------------------------------

### Local Development: Use Local Version

Source: https://github.com/launchtodayhq/react-native-keyboard-composer/blob/main/CONTRIBUTING.md

Commands to switch the example app to use the local version of the package for native development, including rebuilding.

```bash
pnpm use:local
pnpm prebuild:local
pnpm android:local
# or pnpm ios:local
```

--------------------------------

### Local Development: Use Published Version

Source: https://github.com/launchtodayhq/react-native-keyboard-composer/blob/main/CONTRIBUTING.md

Commands to switch the example app to use the published version of the package and then rebuild.

```bash
pnpm use:published
pnpm prebuild
pnpm android
# or pnpm ios
```

--------------------------------

### Install Dependencies (npm/yarn)

Source: https://github.com/launchtodayhq/react-native-keyboard-composer/blob/main/README.md

Run this command after updating your package.json to install all project dependencies, including the linked local package.

```bash
npm install
# or
yarn install
```

--------------------------------

### Install @launchhq/react-native-keyboard-composer

Source: https://context7.com/launchtodayhq/react-native-keyboard-composer/llms.txt

Use your preferred package manager to add the library to your project. For Expo managed workflow, run prebuild after installation.

```bash
pnpm add @launchhq/react-native-keyboard-composer
```

```bash
npm install @launchhq/react-native-keyboard-composer
```

```bash
yarn add @launchhq/react-native-keyboard-composer
```

```bash
npx expo prebuild
```

--------------------------------

### Install React Native Keyboard Composer

Source: https://github.com/launchtodayhq/react-native-keyboard-composer/blob/main/README.md

Add the library to your project using npm, yarn, or pnpm. For Expo managed projects, run `npx expo prebuild` after installation.

```bash
pnpm add @launchhq/react-native-keyboard-composer
# or
npm install @launchhq/react-native-keyboard-composer
# or
yarn add @launchhq/react-native-keyboard-composer
```

--------------------------------

### Use Local Package Source

Source: https://github.com/launchtodayhq/react-native-keyboard-composer/blob/main/example/README.md

Configure the example to use the local package source instead of the published npm package.

```bash
pnpm use:local
```

--------------------------------

### Local Development Setup for Keyboard Composer

Source: https://context7.com/launchtodayhq/react-native-keyboard-composer/llms.txt

Configure Metro bundler and `package.json` for local development when consuming the package from a clone. Rebuild native code after linking.

```js
// metro.config.js (consuming app)
const path = require("path");
const { getDefaultConfig } = require("expo/metro-config");

const config = getDefaultConfig(__dirname);

const keyboardComposerPath = path.resolve(
  __dirname,
  "../react-native-keyboard-composer" // adjust to your clone location
);

config.watchFolders = [keyboardComposerPath];

config.resolver.extraNodeModules = {
  "@launchhq/react-native-keyboard-composer": keyboardComposerPath,
};

module.exports = config;
```

```json
{
  "dependencies": {
    "@launchhq/react-native-keyboard-composer": "file:../react-native-keyboard-composer"
  }
}
```

```bash
npx expo prebuild --clean
npx expo run:ios   # or run:android
```

--------------------------------

### iOS Native Logging

Source: https://github.com/launchtodayhq/react-native-keyboard-composer/blob/main/CONTRIBUTING.md

Example of logging in iOS Swift code using emoji prefixes for categorization.

```swift
print("🎯 [Component] message")
```

--------------------------------

### Android Native Logging

Source: https://github.com/launchtodayhq/react-native-keyboard-composer/blob/main/CONTRIBUTING.md

Example of logging in Android Kotlin code using a TAG for filtering.

```kotlin
Log.d(TAG, "📐 message")
```

--------------------------------

### Basic Chat Screen Setup

Source: https://github.com/launchtodayhq/react-native-keyboard-composer/blob/main/README.md

Integrate KeyboardComposer and KeyboardAwareWrapper into your chat screen. The wrapper manages content positioning relative to the keyboard, and KeyboardComposer handles input and height changes.

```tsx
import {
  KeyboardComposer,
  KeyboardAwareWrapper,
} from "@launchhq/react-native-keyboard-composer";

function ChatScreen() {
  const [composerHeight, setComposerHeight] = useState(48);

  return (
    <KeyboardAwareWrapper style={{ flex: 1 }} extraBottomInset={composerHeight}>
      <ScrollView>{/* Your chat messages */}</ScrollView>

      <View style={styles.composerContainer}>
        <KeyboardComposer
          placeholder="Type a message..."
          onSend={(text) => handleSend(text)}
          onHeightChange={(height) => setComposerHeight(height)}
          onComposerFocus={() => console.log("Focused")}
          onComposerBlur={() => console.log("Blurred")}
        />
      </View>
    </KeyboardAwareWrapper>
  );
}
```

--------------------------------

### ChatGPT-style Pin-to-Top Chat with Streaming

Source: https://context7.com/launchtodayhq/react-native-keyboard-composer/llms.txt

This example implements a ChatGPT-style chat interface with pin-to-top behavior and a streaming runway. It utilizes KeyboardAwareWrapper with `pinToTopEnabled` and `scrollToTopTrigger` props. The `handleSend` function arms the pin-to-top mechanism for subsequent message appends.

```tsx
import React, { useState, useCallback } from "react";
import { View, ScrollView, Text, StyleSheet } from "react-native";
import {
  KeyboardAwareWrapper,
  KeyboardComposer,
  constants,
} from "@launchhq/react-native-keyboard-composer";

// ─── Example 2: ChatGPT-style pin-to-top with streaming runway ──────────────
function PinToTopChat() {
  const [composerHeight, setComposerHeight] = useState(constants.defaultMinHeight);
  const [scrollToTopTrigger, setScrollToTopTrigger] = useState(0);

  const handleSend = useCallback((text: string) => {
    // Arm pin-to-top so the next append snaps the message to the top
    setScrollToTopTrigger(Date.now());
    console.log("Message sent:", text);
  }, []);

  return (
    <KeyboardAwareWrapper
      style={{ flex: 1 }}
      pinToTopEnabled            // Activates ChatGPT-style pin behavior
      extraBottomInset={composerHeight}
      scrollToTopTrigger={scrollToTopTrigger}  // Arms the next pin
      // extraTopInset={headerHeight}           // Use if you have a transparent header
    >
      <ScrollView contentContainerStyle={{ padding: 16 }}>
        <Text>Messages appear here…</Text>
      </ScrollView>

      <View style={[styles.composerShell, { height: composerHeight }]}>
        <KeyboardComposer
          style={{ flex: 1 }}
          placeholder="Ask anything…"
          onSend={handleSend}
          onHeightChange={setComposerHeight}
        />
      </View>
    </KeyboardAwareWrapper>
  );
}

const styles = StyleSheet.create({
  composerShell: {
    position: "absolute",
    left: 0,
    right: 0,
    bottom: 0,
    paddingHorizontal: 16,
    paddingBottom: 16,
  },
});

```

--------------------------------

### Standard Keyboard-Aware Chat Layout

Source: https://context7.com/launchtodayhq/react-native-keyboard-composer/llms.txt

Use this example for a standard chat interface where the keyboard pushes content up. It requires KeyboardAwareWrapper as the parent of ScrollView and KeyboardComposer. The onHeightChange prop of KeyboardComposer is used to manage the composer's height and the extraBottomInset of KeyboardAwareWrapper.

```tsx
import React, { useState, useCallback } from "react";
import { View, ScrollView, Text, StyleSheet } from "react-native";
import {
  KeyboardAwareWrapper,
  KeyboardComposer,
  constants,
} from "@launchhq/react-native-keyboard-composer";

// ─── Example 1: Standard keyboard-aware chat (no pin-to-top) ───────────────
function StandardChat() {
  const [composerHeight, setComposerHeight] = useState(constants.defaultMinHeight);

  return (
    // pinToTopEnabled omitted → standard push-up-on-keyboard-open behavior
    <KeyboardAwareWrapper style={{ flex: 1 }} extraBottomInset={composerHeight}>
      <ScrollView contentContainerStyle={{ padding: 16 }}>
        <Text>Message history…</Text>
      </ScrollView>

      <View style={[styles.composerShell, { height: composerHeight }]}>
        <KeyboardComposer
          style={{ flex: 1 }}
          placeholder="Type a message…"
          onSend={(text) => console.log("sent:", text)}
          onHeightChange={setComposerHeight}
        />
      </View>
    </KeyboardAwareWrapper>
  );
}

```

--------------------------------

### Build and Publish Package

Source: https://github.com/launchtodayhq/react-native-keyboard-composer/blob/main/README.md

Navigate to the package directory, build the project, and publish it to npm. Ensure you have the necessary permissions and have followed publishing best practices.

```bash
cd react-native-keyboard-composer
pnpm run build
npm publish --access public
```

--------------------------------

### Consumer Workflow: Add Package and Run

Source: https://github.com/launchtodayhq/react-native-keyboard-composer/blob/main/CONTRIBUTING.md

How users typically add the package to their app and rebuild native code using Expo.

```bash
pnpm add @launchhq/react-native-keyboard-composer
npx expo prebuild --clean
npx expo run:ios
# or
npx expo run:android
```

--------------------------------

### Prebuild with Local Source

Source: https://github.com/launchtodayhq/react-native-keyboard-composer/blob/main/example/README.md

Generate native projects using the local package source.

```bash
pnpm prebuild:local
```

--------------------------------

### Initialize Composer Height with Native Constants

Source: https://context7.com/launchtodayhq/react-native-keyboard-composer/llms.txt

Use native constants to initialize composer height state for consistent layout math. Ensure `extraBottomInset` is set to the composer's height.

```tsx
import { constants } from "@launchhq/react-native-keyboard-composer";

// constants.defaultMinHeight → 48
// constants.defaultMaxHeight → 120
// constants.contentGap       → 32

function ChatScreen() {
  // Initialize composer height state from native constants
  const [composerHeight, setComposerHeight] = useState(constants.defaultMinHeight);

  return (
    <KeyboardAwareWrapper style={{ flex: 1 }} extraBottomInset={composerHeight}>
      <ScrollView
        contentContainerStyle={{
          // Optional: add extra space above the composer beyond the native gap
          paddingBottom: 16,
        }}>
        {/* Messages */}
      </ScrollView>

      <View style={{ height: composerHeight, position: "absolute", left: 0, right: 0, bottom: 0 }}>
        <KeyboardComposer
          minHeight={constants.defaultMinHeight}
          maxHeight={constants.defaultMaxHeight}
          onHeightChange={setComposerHeight}
          onSend={(text) => console.log(text)}
        />
      </View>
    </KeyboardAwareWrapper>
  );
}

// Built-in spacing reference (handled natively — no manual CSS needed):
// CONTENT_GAP           24pt/dp  — gap between last message and composer
// COMPOSER_KEYBOARD_GAP  8pt/dp  — gap between composer bottom and keyboard top
console.log(constants);
// → { defaultMinHeight: 48, defaultMaxHeight: 120, contentGap: 32 }
```

--------------------------------

### Generate Native Projects

Source: https://github.com/launchtodayhq/react-native-keyboard-composer/blob/main/example/README.md

Generate native projects for iOS and Android.

```bash
pnpm prebuild
```

--------------------------------

### Add Quick Toggle Scripts to package.json

Source: https://github.com/launchtodayhq/react-native-keyboard-composer/blob/main/README.md

Include these scripts in your consuming app's package.json for easy switching between local development and the published version of the keyboard composer package.

```json
{
  "scripts": {
    "use-local-keyboard": "pnpm pkg set dependencies.@launchhq/react-native-keyboard-composer=workspace:* && pnpm install",
    "use-published-keyboard": "pnpm pkg set dependencies.@launchhq/react-native-keyboard-composer=^0.1.0 && pnpm install"
  }
}
```

--------------------------------

### Accessing Default Constants

Source: https://github.com/launchtodayhq/react-native-keyboard-composer/blob/main/README.md

Import and log default constants for minimum height, maximum height, and content gap from the library.

```tsx
import { constants } from "@launchhq/react-native-keyboard-composer";

console.log(constants.defaultMinHeight); // 48
console.log(constants.defaultMaxHeight); // 120
console.log(constants.contentGap); // 32
```

--------------------------------

### Link Local Package with npm/yarn

Source: https://github.com/launchtodayhq/react-native-keyboard-composer/blob/main/README.md

Configure your app's package.json to link to a local copy of the keyboard composer package. Adjust the file path to match your project structure.

```json
{
  "dependencies": {
    "@launchhq/react-native-keyboard-composer": "file:../react-native-keyboard-composer"
  }
}
```

--------------------------------

### Add Package to pnpm Workspace

Source: https://github.com/launchtodayhq/react-native-keyboard-composer/blob/main/README.md

Configure your pnpm-workspace.yaml to include the local keyboard composer package within your monorepo. Adjust the path as necessary.

```yaml
packages:
  - apps/*
  - ../react-native-keyboard-composer # Adjust path as needed
```

--------------------------------

### Use Workspace Protocol with pnpm

Source: https://github.com/launchtodayhq/react-native-keyboard-composer/blob/main/README.md

Specify the keyboard composer package in your app's package.json using the workspace protocol for pnpm. This links directly to the package within your monorepo.

```json
{
  "dependencies": {
    "@launchhq/react-native-keyboard-composer": "workspace:*"
  }
}
```

--------------------------------

### Rebuild Native Code

Source: https://github.com/launchtodayhq/react-native-keyboard-composer/blob/main/README.md

After linking a local native module, rebuild your app's native code to include the changes. This is essential for native modules to function correctly.

```bash
npx expo prebuild --clean
npx expo run:ios
# or
npx expo run:android
```

--------------------------------

### Create Feature Branch

Source: https://github.com/launchtodayhq/react-native-keyboard-composer/blob/main/CONTRIBUTING.md

Standard Git command to create a new branch for feature development.

```bash
git checkout -b feature/your-feature-name
```

--------------------------------

### Configure Metro for Local Package

Source: https://github.com/launchtodayhq/react-native-keyboard-composer/blob/main/README.md

Modify your metro.config.js to ensure Metro watches the external package directory and resolves the package correctly. Adjust the path as needed.

```javascript
const path = require("path");
const { getDefaultConfig } = require("expo/metro-config");

const config = getDefaultConfig(__dirname);

// Path to the local package
const keyboardComposerPath = path.resolve(
  __dirname,
  "../react-native-keyboard-composer" // Adjust path as needed
);

// Watch the external package folder for changes
config.watchFolders = [keyboardComposerPath];

// Map the package name to the local path
config.resolver.extraNodeModules = {
  "@launchhq/react-native-keyboard-composer": keyboardComposerPath,
};

module.exports = config;
```

--------------------------------

### Programmatically Dismiss Keyboard with blurTrigger

Source: https://context7.com/launchtodayhq/react-native-keyboard-composer/llms.txt

Use the `blurTrigger` prop to dismiss the keyboard programmatically. Update `blurTrigger` with any new value to trigger the dismissal.

```tsx
import React, { useState, useCallback } from "react";
import { View, Button } from "react-native";
import {
  KeyboardComposer,
  KeyboardAwareWrapper,
} from "@launchhq/react-native-keyboard-composer";

function DismissExample() {
  const [blurTrigger, setBlurTrigger] = useState(0);

  const dismissKeyboard = useCallback(() => {
    setBlurTrigger(Date.now()); // Any new value triggers blur
  }, []);

  const handleSend = useCallback((text: string) => {
    console.log("Message:", text);
    dismissKeyboard(); // Dismiss after sending
  }, [dismissKeyboard]);

  return (
    <KeyboardAwareWrapper style={{ flex: 1 }}>
      <View style={{ flex: 1 }}>
        <Button title="Dismiss Keyboard" onPress={dismissKeyboard} />
      </View>

      <KeyboardComposer
        placeholder="Type…"
        blurTrigger={blurTrigger}
        onSend={handleSend}
      />
    </KeyboardAwareWrapper>
  );
}
```

--------------------------------

### Composer Container Styling with KeyboardAwareWrapper

Source: https://github.com/launchtodayhq/react-native-keyboard-composer/blob/main/README.md

Place the `KeyboardComposer` inside `KeyboardAwareWrapper` with absolute positioning for proper keyboard animation. The `extraBottomInset` prop should be set to the composer's height.

```tsx
<KeyboardAwareWrapper style={{ flex: 1 }} extraBottomInset={composerHeight}>
  <ScrollView>{/* Content */}</ScrollView>

  {/* Composer - positioned absolutely, animated by native code */}
  <View style={styles.composerContainer}>
    <View style={[styles.composerWrapper, { height: composerHeight }]}>
      <KeyboardComposer ... />
    </View>
  </View>
</KeyboardAwareWrapper>

const styles = StyleSheet.create({
  composerContainer: {
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    paddingHorizontal: 16,
    paddingBottom: 16, // Or use safe area insets
  },
  composerWrapper: {
    borderRadius: 24,
    backgroundColor: '#F2F2F7',
    overflow: 'hidden',
  },
});
```

--------------------------------

### KeyboardComposer Imperative Handle

Source: https://context7.com/launchtodayhq/react-native-keyboard-composer/llms.txt

The `KeyboardComposer` component accepts a ref typed as `KeyboardComposerRef`, which provides methods for programmatic control over the composer's state.

```APIDOC
## KeyboardComposer Imperative Handle

### Description

The `KeyboardComposer` component accepts a ref typed as `KeyboardComposerRef`. This ref exposes methods for programmatic control over the composer, such as focusing, blurring, and clearing its content.

### Methods

- **`focus()`**: Programmatically focuses the composer input.
- **`blur()`**: Programmatically blurs the composer input.
- **`clear()`**: Clears the text content of the composer.

### Example Usage

```tsx
import React, { useRef } from "react";
import { View, Button } from "react-native";
import {
  KeyboardComposer,
  KeyboardAwareWrapper,
  type KeyboardComposerRef,
} from "@launchhq/react-native-keyboard-composer";

function ControlledComposer() {
  const composerRef = useRef<KeyboardComposerRef>(null);

  return (
    <KeyboardAwareWrapper style={{ flex: 1 }}>
      <View style={{ flex: 1 }} />

      <View style={{ flexDirection: "row", gap: 8, padding: 16 }}>
        <Button title="Focus" onPress={() => composerRef.current?.focus()} />
        <Button title="Blur"  onPress={() => composerRef.current?.blur()} />
        <Button title="Clear" onPress={() => composerRef.current?.clear()} />
      </View>

      <KeyboardComposer
        ref={composerRef}
        placeholder="Controlled via ref…"
        onSend={(text) => console.log("sent:", text)}
      />
    </KeyboardAwareWrapper>
  );
}
```
```

--------------------------------

### Clean Up Workspace Config

Source: https://github.com/launchtodayhq/react-native-keyboard-composer/blob/main/README.md

If you were using pnpm workspaces, remove the local package entry from your pnpm-workspace.yaml after switching to the published version.

```yaml
packages:
  - apps/*
  # Remove: - ../react-native-keyboard-composer
```

--------------------------------

### Constants

Source: https://github.com/launchtodayhq/react-native-keyboard-composer/blob/main/README.md

Module constants providing default values for component props.

```APIDOC
## constants

### Description
Module constants for default values:

### Usage
```tsx
import { constants } from "@launchhq/react-native-keyboard-composer";

console.log(constants.defaultMinHeight); // 48
console.log(constants.defaultMaxHeight); // 120
console.log(constants.contentGap); // 32
```
```

--------------------------------

### Control KeyboardComposer Programmatically with Ref

Source: https://context7.com/launchtodayhq/react-native-keyboard-composer/llms.txt

Utilize the `KeyboardComposerRef` to imperatively control the composer's focus, blur, and clear states. This is useful for custom UI interactions.

```tsx
import React, { useRef } from "react";
import { View, Button } from "react-native";
import {
  KeyboardComposer,
  KeyboardAwareWrapper,
  type KeyboardComposerRef,
} from "@launchhq/react-native-keyboard-composer";

function ControlledComposer() {
  const composerRef = useRef<KeyboardComposerRef>(null);

  return (
    <KeyboardAwareWrapper style={{ flex: 1 }}>
      <View style={{ flex: 1 }} />

      <View style={{ flexDirection: "row", gap: 8, padding: 16 }}>
        <Button title="Focus" onPress={() => composerRef.current?.focus()} />
        <Button title="Blur"  onPress={() => composerRef.current?.blur()} />
        <Button title="Clear" onPress={() => composerRef.current?.clear()} />
      </View>

      <KeyboardComposer
        ref={composerRef}
        placeholder="Controlled via ref…"
        onSend={(text) => console.log("sent:", text)}
      />
    </KeyboardAwareWrapper>
  );
}
```

--------------------------------

### <KeyboardComposer /> Component

Source: https://github.com/launchtodayhq/react-native-keyboard-composer/blob/main/README.md

The main composer input component. It accepts various props to customize its appearance and behavior, including placeholder text, text content, height constraints, button visibility, and event handlers for text changes, sending, stopping, and focus events.

```APIDOC
## <KeyboardComposer />

### Description
The main composer input component.

### Props
- `placeholder` (string) - Optional - Placeholder text. Default: "Type a message..."
- `text` (string) - Optional - Controlled text value. Default: ""
- `minHeight` (number) - Optional - Minimum height in dp/points. Default: 48
- `maxHeight` (number) - Optional - Maximum height before scrolling. Default: 120
- `sendButtonEnabled` (boolean) - Optional - Whether send action is enabled. Default: true
- `showSendButton` (boolean) - Optional - Whether send/stop button is visible. Default: true
- `editable` (boolean) - Optional - Whether input is editable. Default: true
- `autoFocus` (boolean) - Optional - Auto-focus on mount. Default: false
- `blurTrigger` (number) - Optional - Change value to trigger blur.
- `isStreaming` (boolean) - Optional - Shows stop button when true. Default: false
- `onChangeText` (function) - Optional - Called when text changes.
- `onSend` (function) - Optional - Called when send is pressed.
- `onStop` (function) - Optional - Called when stop is pressed.
- `onHeightChange` (function) - Optional - Called when height changes.
- `onKeyboardHeightChange` (function) - Optional - Called when keyboard height changes.
- `onComposerFocus` (function) - Optional - Called when input gains focus.
- `onComposerBlur` (function) - Optional - Called when input loses focus.
- `style` (StyleProp<ViewStyle>) - Optional - Container style.
```

--------------------------------

### Update Consuming App to Published Version

Source: https://github.com/launchtodayhq/react-native-keyboard-composer/blob/main/README.md

Modify the consuming app's package.json to use the published version of the keyboard composer package instead of the local or workspace version. Update the version number as needed.

```json
{
  "dependencies": {
    // From:
    "@launchhq/react-native-keyboard-composer": "workspace:*"

    // To:
    "@launchhq/react-native-keyboard-composer": "^0.1.0"
  }
}
```

--------------------------------

### AI Streaming Chat Integration

Source: https://github.com/launchtodayhq/react-native-keyboard-composer/blob/main/README.md

Use the `isStreaming` prop to control the UI state for AI streaming responses and the `onStop` prop to handle cancellation. The `onSend` handler initiates the streaming process.

```tsx
import { KeyboardComposer } from "@launchhq/react-native-keyboard-composer";

function AIChat() {
  const [isStreaming, setIsStreaming] = useState(false);

  const handleSend = async (text: string) => {
    setIsStreaming(true);
    await streamAIResponse(text);
    setIsStreaming(false);
  };

  return (
    <KeyboardComposer
      placeholder="Ask anything..."
      isStreaming={isStreaming}
      onSend={handleSend}
      onStop={() => cancelStream()}
    />
  );
}
```

--------------------------------

### Chat Screen with KeyboardComposer

Source: https://context7.com/launchtodayhq/react-native-keyboard-composer/llms.txt

This component renders a chat interface, integrating KeyboardComposer for user input and KeyboardAwareWrapper for layout management. It handles message display, simulated AI responses, and keyboard event callbacks.

```tsx
import React, { useState, useCallback, useRef } from "react";
import {
  View,
  ScrollView,
  Text,
  StyleSheet,
  useColorScheme,
} from "react-native";
import {
  KeyboardComposer,
  KeyboardAwareWrapper,
  constants,
} from "@launchhq/react-native-keyboard-composer";
import { SafeAreaProvider, useSafeAreaInsets } from "react-native-safe-area-context";

interface Message {
  id: string;
  text: string;
  role: "user" | "assistant";
}

function ChatScreen() {
  const insets = useSafeAreaInsets();
  const isDark = useColorScheme() === "dark";

  const [messages, setMessages] = useState<Message[]>([]);
  const [composerHeight, setComposerHeight] = useState(constants.defaultMinHeight);
  const [isStreaming, setIsStreaming] = useState(false);
  const [blurTrigger, setBlurTrigger] = useState(0);
  const streamRef = useRef<ReturnType<typeof setTimeout> | null>(null);

  // Track composer height changes so the scroll wrapper can reserve space
  const handleHeightChange = useCallback((height: number) => {
    setComposerHeight(height);
  }, []);

  const handleSend = useCallback((text: string) => {
    if (!text.trim()) return;

    // Add the user message immediately
    setMessages((prev) => [
      ...prev,
      { id: Date.now().toString(), text: text.trim(), role: "user" },
    ]);

    // Begin simulated streaming response
    setIsStreaming(true);
    const assistantId = (Date.now() + 1).toString();
    setMessages((prev) => [...prev, { id: assistantId, text: "", role: "assistant" }]);

    const response = "Here is a streamed AI reply — word by word.";
    const words = response.split(" ");
    let built = "";
    words.forEach((word, i) => {
      setTimeout(() => {
        built += (i === 0 ? "" : " ") + word;
        const snapshot = built;
        setMessages((prev) =>
          prev.map((m) => (m.id === assistantId ? { ...m, text: snapshot } : m))
        );
      }, i * 60);
    });

    streamRef.current = setTimeout(() => {
      setIsStreaming(false);
    }, words.length * 60 + 100);
  }, []);

  const handleStop = useCallback(() => {
    if (streamRef.current) clearTimeout(streamRef.current);
    setIsStreaming(false);
  }, []);

  return (
    <View style={[styles.container, { backgroundColor: isDark ? "#000" : "#fff" }]}>
      <KeyboardAwareWrapper
        style={styles.flex}
        pinToTopEnabled
        extraBottomInset={composerHeight}
      >
        {/* Message list */}
        <ScrollView style={styles.flex} contentContainerStyle={styles.list}>
          {messages.map((m) => (
            <Text key={m.id} style={[styles.msg, { color: isDark ? "#fff" : "#000" }]}>
              {m.role === "user" ? "You: " : "AI: "}
              {m.text}
            </Text>
          ))}
        </ScrollView>

        {/* Composer — absolute, animated by native code */}
        <View style={[styles.composerOuter, { height: composerHeight }]}>
          <View
            style={[ 
              styles.composerInner,
              { backgroundColor: isDark ? "#1C1C1E" : "#F2F2F7" },
            ]}
          >
            <KeyboardComposer
              style={{ flex: 1 }}
              placeholder="Ask anything…"
              minHeight={constants.defaultMinHeight}   // 48
              maxHeight={constants.defaultMaxHeight}   // 120
              sendButtonEnabled
              isStreaming={isStreaming}
              blurTrigger={blurTrigger}                // change to dismiss keyboard
              onSend={handleSend}
              onStop={handleStop}
              onHeightChange={handleHeightChange}
              onComposerFocus={() => console.log("focused")}
              onComposerBlur={() => console.log("blurred")}
              onKeyboardHeightChange={(h) => console.log("keyboard height:", h)}
            />
          </View>
        </View>
      </KeyboardAwareWrapper>
    </View>
  );
}

const styles = StyleSheet.create({
  flex: { flex: 1 },
  container: { flex: 1 },
  list: { padding: 16, gap: 12 },
  msg: { fontSize: 16 },
  composerOuter: {
    position: "absolute",
    left: 0,
    right: 0,
    bottom: 0,
    paddingHorizontal: 16,
    paddingBottom: 16,
  },
  composerInner: {
    borderRadius: 24,
    overflow: "hidden",
    flex: 1,
  },
});

export default function App() {
  return (
    <SafeAreaProvider>
      <ChatScreen />
    </SafeAreaProvider>
  );
}

```

--------------------------------

### Programmatically Dismiss Keyboard

Source: https://github.com/launchtodayhq/react-native-keyboard-composer/blob/main/README.md

Control keyboard dismissal by updating a state variable passed to the `blurTrigger` prop. Incrementing this value will cause the composer to lose focus and dismiss the keyboard.

```tsx
const [blurTrigger, setBlurTrigger] = useState(0);

// Call this to dismiss keyboard
const dismissKeyboard = () => setBlurTrigger(Date.now());

<KeyboardComposer
  blurTrigger={blurTrigger}
  // ...other props
/>;
```

--------------------------------

### <KeyboardAwareWrapper /> Component

Source: https://github.com/launchtodayhq/react-native-keyboard-composer/blob/main/README.md

Wrapper component that handles keyboard-aware scrolling. It can be configured with `pinToTopEnabled` for a pin-to-top behavior with a runway, or used as a standard keyboard-aware wrapper.

```APIDOC
## <KeyboardAwareWrapper />

### Description
Wrapper component that handles keyboard-aware scrolling.

### Props
- `pinToTopEnabled` (boolean) - Optional - Enables pin-to-top + runway behavior. Default: false
- `extraBottomInset` (number) - Optional - Bottom inset (typically the current composer height). Default: 0
- `scrollToTopTrigger` (number) - Optional - Change value to arm pin-to-top for the next content append.
- `style` (StyleProp<ViewStyle>) - Optional - Container style.
- `children` (ReactNode) - Optional - Should contain a ScrollView.

### Pin-to-top behavior (optional)
Pin-to-top is **opt-in** and is controlled via `KeyboardAwareWrapper` (not `KeyboardComposer`).

When `pinToTopEnabled` is `true`:
- The next user message append is **pinned to the top** of the viewport.
- A non-scrollable **runway** is created below it so streamed assistant responses can grow without the content snapping around.
- While streaming grows content, the wrapper keeps the pinned position stable unless the user manually scrolls away.

When `pinToTopEnabled` is `false` (or omitted), the wrapper behaves like a normal keyboard-aware chat wrapper (no runway/pinning).

You can toggle `pinToTopEnabled` at runtime; disabling it clears any active runway/pin state.

### `scrollToTopTrigger`
Despite the name, `scrollToTopTrigger` is used to **arm pin-to-top for the next content append** (use a counter or `Date.now()`).
```

--------------------------------

### constants Module

Source: https://context7.com/launchtodayhq/react-native-keyboard-composer/llms.txt

The `constants` module exposes native default values used internally by the library. These are useful for keeping JavaScript layout math in sync with the native layer.

```APIDOC
## constants Module

### Description

The `constants` module exposes native default values used internally by the library. These are useful for keeping JavaScript layout math in sync with the native layer, such as for initializing `composerHeight` state.

### Available Constants

- **`defaultMinHeight`** (number) - The default minimum height of the composer.
- **`defaultMaxHeight`** (number) - The default maximum height of the composer.
- **`contentGap`** (number) - The native gap between content and the composer.

### Example Usage

```tsx
import { constants } from "@launchhq/react-native-keyboard-composer";

// constants.defaultMinHeight → 48
// constants.defaultMaxHeight → 120
// constants.contentGap       → 32

function ChatScreen() {
  const [composerHeight, setComposerHeight] = useState(constants.defaultMinHeight);

  return (
    <KeyboardAwareWrapper style={{ flex: 1 }} extraBottomInset={composerHeight}>
      <ScrollView contentContainerStyle={{ paddingBottom: 16 }}>
        {/* Messages */}
      </ScrollView>
      <View style={{ height: composerHeight, position: "absolute", left: 0, right: 0, bottom: 0 }}>
        <KeyboardComposer
          minHeight={constants.defaultMinHeight}
          maxHeight={constants.defaultMaxHeight}
          onHeightChange={setComposerHeight}
          onSend={(text) => console.log(text)}
        />
      </View>
    </KeyboardAwareWrapper>
  );
}

console.log(constants);
// → { defaultMinHeight: 48, defaultMaxHeight: 120, contentGap: 32 }
```
```

--------------------------------

### Add Extra Spacing to ScrollView

Source: https://github.com/launchtodayhq/react-native-keyboard-composer/blob/main/README.md

Add `paddingBottom` to your scroll content's `contentContainerStyle` to create extra space between the content and the composer.

```tsx
<ScrollView
  contentContainerStyle={{
    paddingBottom: 16, // Extra space above composer
  }}
>
  {/* Your messages */}
</ScrollView>
```

--------------------------------

### KeyboardAwareWrapper Props

Source: https://context7.com/launchtodayhq/react-native-keyboard-composer/llms.txt

The KeyboardAwareWrapper component enhances keyboard handling for input fields. It provides props to control its behavior, such as enabling pin-to-top functionality and adjusting insets.

```APIDOC
## KeyboardAwareWrapper Props

### Description

The `KeyboardAwareWrapper` component enhances keyboard handling for input fields. It provides props to control its behavior, such as enabling pin-to-top functionality and adjusting insets.

### Props

- **`pinToTopEnabled`** (boolean) - Optional - Enables ChatGPT-style pin-to-top + streaming runway.
- **`extraBottomInset`** (number) - Optional - Bottom inset (set to current composer height).
- **`extraTopInset`** (number) - Optional - Top inset for transparent/overlay headers (useful on Android).
- **`scrollToTopTrigger`** (number) - Optional - Change value to arm the next pin-to-top scroll.
- **`style`** (StyleProp<ViewStyle>) - Optional - Container style.
- **`children`** (ReactNode) - Optional - Should contain a `ScrollView` and the composer container.

### Behavior Notes

- When `pinToTopEnabled` is `true`, the next message append is pinned to the top of the viewport, creating a non-scrollable runway for streaming AI responses.
- Toggling `pinToTopEnabled` to `false` at runtime clears any active pin/runway state.
- `scrollToTopTrigger` arms the pin for the _next_ content append; pass `Date.now()` or an incrementing counter.
```

--------------------------------

### Hide Built-In Send Button

Source: https://github.com/launchtodayhq/react-native-keyboard-composer/blob/main/README.md

Set `showSendButton={false}` on `KeyboardComposer` when you intend to provide your own custom controls outside of the `KeyboardComposer` component.

```tsx
<KeyboardComposer
  placeholder="Type a message..."
  showSendButton={false}
  onChangeText={setDraft}
/>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.