### Basic KeyboardProvider Setup

Source: https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/keyboard-provider

Wrap your application with KeyboardProvider to enable keyboard event handling. This is the primary setup required for the library to function.

```javascript
import { KeyboardProvider } from "react-native-keyboard-controller";

const App = () => {
  return (
    <KeyboardProvider>
      {/* The other components in your tree */}
    </KeyboardProvider>
  );
};

```

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

### Install with NPM

Source: https://kirillzyusko.github.io/react-native-keyboard-controller/docs/installation

Use this command to add the package to your project using NPM.

```bash
npm install react-native-keyboard-controller --save  

```

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

### Full Example: FlatList with KeyboardAwareScrollView

Source: https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/components/keyboard-aware-scroll-view

A complete example demonstrating how to use KeyboardAwareScrollView with a FlatList that contains TextInput elements. This ensures that inputs are visible when the keyboard appears.

```javascript
import React from "react";
import { View, FlatList, TextInput } from "react-native";
import { KeyboardAwareScrollView } from "react-native-keyboard-controller";

const List = () => {
  return (
    <View style={{ flex: 1 }}>
      <FlatList
        data={new Array(10).fill(0).map((_, i) => i)}
        keyExtractor={(data) => String(data)}
        renderItem={() => {
          return (
            <View
              style={{
                width: "100%",
                height: 250,
                backgroundColor: "#00000066",
                justifyContent: "center",
              }}
            >
              <TextInput
                style={{
                  height: 40,
                  width: "100%",
                  borderColor: "black",
                  borderWidth: 2,
                }}
              />
            </View>
          );
        }}
        renderScrollComponent={(props) => (
          <KeyboardAwareScrollView {...props} />
        )}
        ItemSeparatorComponent={() => <View style={{ height: 5 }} />}
        showsVerticalScrollIndicator={false}
      />
    </View>
  );
};

export default List;
```

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

### Basic useKeyboardHandler Setup

Source: https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/hooks/keyboard/use-keyboard-handler

Initializes the hook with handlers for keyboard lifecycle events. Ensure all handlers include the 'worklet' directive.

```javascript
useKeyboardHandler(  
  {
    onStart: (e) => {
      "worklet";
    },
    onMove: (e) => {
      "worklet";
    },
    onInteractive: (e) => {
      "worklet";
    },
    onEnd: (e) => {
      "worklet";
    },
  },
  [],
);

```

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

### Install with Expo

Source: https://kirillzyusko.github.io/react-native-keyboard-controller/docs/installation

Use this command to add the package to your project if you are using Expo.

```bash
npx expo install react-native-keyboard-controller  

```

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

### onStart Handler Example

Source: https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/hooks/keyboard/use-keyboard-handler

The `onStart` handler is called before keyboard movement begins. It provides destination values for `progress` and `height`. Use this to determine if the keyboard will appear.

```javascript
useKeyboardHandler(  
  {
    onStart: (e) => {
      'worklet';
      const willKeyboardAppear = e.progress === 1;
    }
  },
  []
);

```

```javascript
useKeyboardHandler(  
  {
    onStart: (e) => {
      'worklet';
      const willKeyboardAppear = e.progress === 1;
    }
  },
  []
);

```

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

### Install with Yarn

Source: https://kirillzyusko.github.io/react-native-keyboard-controller/docs/installation

Use this command to add the package to your project using Yarn.

```bash
yarn add react-native-keyboard-controller  

```

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

### KeyboardAvoidingView Usage Example

Source: https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/components/keyboard-avoiding-view

This example demonstrates how to use the KeyboardAvoidingView component in a React Native application. It shows how to import the component and apply common props like `behavior` and `keyboardVerticalOffset`.

```APIDOC
## KeyboardAvoidingView Example

### Description
This example demonstrates how to use the `KeyboardAvoidingView` component to ensure content remains visible when the keyboard appears. It includes common props and basic styling.

### Component Usage
```javascript
import React from "react";
import {
  Text,
  TextInput,
  TouchableOpacity,
  View,
  StyleSheet,
} from "react-native";
import { KeyboardAvoidingView } from "react-native-keyboard-controller";

export default function KeyboardAvoidingViewExample() {
  return (
    <KeyboardAvoidingView
      behavior={"padding"}
      keyboardVerticalOffset={100}
      style={styles.content}
    >
      <View style={styles.inner}>
        <Text style={styles.heading}>Header</Text>
        <View>
          <TextInput placeholder="Username" style={styles.textInput} />
          <TextInput placeholder="Password" style={styles.textInput} />
        </View>
        <TouchableOpacity style={styles.button}>
          <Text style={styles.text}>Submit</Text>
        </TouchableOpacity>
      </View>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  content: {
    flex: 1,
    maxHeight: 600,
  },
  heading: {
    fontSize: 36,
    marginBottom: 48,
    fontWeight: "600",
  },
  inner: {
    padding: 24,
    flex: 1,
    justifyContent: "space-between",
  },
  textInput: {
    height: 45,
    borderColor: "#000000",
    borderWidth: 1,
    borderRadius: 10,
    marginBottom: 36,
    paddingLeft: 10,
  },
  button: {
    marginTop: 12,
    height: 45,
    borderRadius: 10,
    backgroundColor: "rgb(40, 64, 147)",
    justifyContent: "center",
    alignItems: "center",
  },
  text: {
    fontWeight: "500",
    fontSize: 16,
    color: "white",
  },
});
```
```

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

### KeyboardExtender Usage Example

Source: https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/views/keyboard-extender

This example demonstrates how to use the KeyboardExtender component to add custom UI that extends the keyboard. It shows how to conditionally enable the extender and animate its opacity based on the keyboard's appearance.

```javascript
import React, { useEffect, useMemo, useState } from "react";  
import {  
  Alert,  
  Keyboard,  
  StyleSheet,  
  Text,  
  TextInput,  
  TouchableOpacity,  
  TouchableWithoutFeedback,  
} from "react-native";  
import {  
  KeyboardExtender,  
  useKeyboardState,  
} from "react-native-keyboard-controller";  
import Reanimated, {  
  useAnimatedStyle,  
  useSharedValue,  
  withTiming,  
} from "react-native-reanimated";  
import { SafeAreaView } from "react-native-safe-area-context";  
  
export default function KeyboardExtendExample() {  
  const appearance = useKeyboardState((state) => state.appearance);  
  const [showExtend, setShowExtend] = useState(true);  
  const opacity = useSharedValue(1);  
  
  useEffect(() => {  
    opacity.set(withTiming(showExtend ? 1 : 0));  
  }, [showExtend]);  
  
  const animatedStyle = useAnimatedStyle(  
    () => ({  
      opacity: opacity.value,  
    }),  
    [],  
  );  
  const textStyle = useMemo(  
    () => [  
      styles.priceText,  
      appearance === "light"  
        ? styles.lightKeyboardText  
        : styles.darkKeyboardText,  
    ],  
    [appearance],  
  );  
  
  return (  
    <>  
      <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>  
        <SafeAreaView edges={["top"]} style={styles.container}>  
          <TextInput  
            keyboardType="numeric"  
            placeholder="Donation amount"  
            placeholderTextColor="#5c5c5c"  
            style={styles.input}  
            onFocus={() => setShowExtend(true)}  
          />  
          <TextInput  
            keyboardType="numeric"  
            placeholder="Postal code"  
            placeholderTextColor="#5c5c5c"  
            style={styles.input}  
            onFocus={() => setShowExtend(false)}  
          />  
        </SafeAreaView>  
      </TouchableWithoutFeedback>  
      <KeyboardExtender enabled={showExtend}>  
        <Reanimated.View style={[styles.keyboardExtend, animatedStyle]}>  
          <TouchableOpacity onPress={() => Alert.alert("10 dollars")}>  
            <Text style={textStyle}>10$</Text>  
          </TouchableOpacity>  
          <TouchableOpacity onPress={() => Alert.alert("20 dollars")}>  
            <Text style={textStyle}>20$</Text>  
          </TouchableOpacity>  
          <TouchableOpacity onPress={() => Alert.alert("50 dollars")}>  
            <Text style={textStyle}>50$</Text>  
          </TouchableOpacity>  
        </Reanimated.View>  
      </KeyboardExtender>  
    </>  
  );  
}  
  
const styles = StyleSheet.create({  
  background: {  
    ...StyleSheet.absoluteFillObject,  
    flex: 1,  
    width: "100%",  
  },  
  container: {  
    flex: 1,  
    paddingHorizontal: 20,  
    backgroundColor: "#ffffff",  
  },  
  input: {  
    height: 40,  
    borderWidth: 2,  
    borderColor: "#1c1c1c",  
    borderRadius: 8,  
    padding: 10,  
    fontSize: 18,  
    marginBottom: 20,  
  },  
  keyboardExtend: {  
    width: "100%",  
    flexDirection: "row",  
    justifyContent: "space-around",  
    alignItems: "center",  
  },  
  priceText: {  
    fontSize: 18,  
    fontWeight: "600",  
    padding: 20,  
  },  
  lightKeyboardText: {  
    color: "black",  
  },  
  darkKeyboardText: {  
    color: "white",  
  },  
});  
```

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

### KeyboardGestureArea Example

Source: https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/views/keyboard-gesture-area

This example demonstrates how to use KeyboardGestureArea to control keyboard behavior with gestures. It configures the interpolator, offset, and links to a TextInput via textInputNativeID. Ensure the associated TextInput has the same nativeID.

```jsx
<KeyboardGestureArea  
  interpolator="ios"  
  offset={50}  
  textInputNativeID="composer"  
>
  <ScrollView keyboardDismissMode="interactive">  
    {/* The other UI components of application in your tree */}
  </ScrollView>  
  <TextInput nativeID="composer" />  
</KeyboardGestureArea>
```

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

### useKeyboardHandler Hook Usage

Source: https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/hooks/keyboard/use-keyboard-handler

This example demonstrates the basic usage of the useKeyboardHandler hook with all its available event handlers: onStart, onMove, onInteractive, and onEnd. Remember to add the 'worklet' directive to each handler.

```APIDOC
## useKeyboardHandler Hook

### Description
The `useKeyboardHandler` hook provides a low-level API to access keyboard lifecycle events, including the start, move, interactive, and end of keyboard animations. It allows you to determine the keyboard's position and state at any point during its animation.

### Parameters
- `handlers` (object) - An object containing callback functions for keyboard events:
  - `onStart`: Called before keyboard movement begins. Receives an event object with `height`, `progress`, `duration`, and `target`.
  - `onMove`: Called every frame during keyboard animation. Receives an event object with `height`, `progress`, `duration`, and `target`.
  - `onInteractive`: Called every frame when the user interactively changes the keyboard position (Android >= 11 with `KeyboardGestureArea`, or iOS with `keyboardDismissMode="interactive"` on `ScrollView`). Receives an event object with `height`, `progress`, `duration`, and `target`.
  - `onEnd`: Called when the keyboard finishes its movement. Receives an event object with `height`, `progress`, `duration`, and `target`.
- `dependencies` (array) - An array of dependencies for the hook, similar to `useEffect`.

### Event Structure
- `height` (number): The current height of the keyboard.
- `progress` (number): A value between 0 (closed) and 1 (opened) indicating the relative keyboard position.
- `duration` (number): The duration of the keyboard animation.
- `target` (number): The tag of the focused `TextInput`, or -1 if not found.

### Example
```javascript
import { useKeyboardHandler } from 'react-native-keyboard-controller';
import { useSharedValue } from 'react-native-reanimated';

const MyComponent = () => {
  const keyboardProgress = useSharedValue(0);
  const keyboardHeight = useSharedValue(0);

  useKeyboardHandler({
    onStart: (e) => {
      'worklet';
      console.log('Keyboard animation started');
    },
    onMove: (e) => {
      'worklet';
      keyboardProgress.value = e.progress;
      keyboardHeight.value = e.height;
    },
    onInteractive: (e) => {
      'worklet';
      keyboardProgress.value = e.progress;
      keyboardHeight.value = e.height;
    },
    onEnd: (e) => {
      'worklet';
      console.log('Keyboard animation ended');
    },
  }, []);

  // ... rest of your component
};
```

### Worklet Directives
Ensure that all handler functions (`onStart`, `onMove`, `onInteractive`, `onEnd`) are marked with the `'worklet';` directive. This is crucial for the handlers to execute correctly within the Reanimated worklet environment. If omitted, your code may throw an exception.
```

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

### Complete Chat Screen Example

Source: https://kirillzyusko.github.io/react-native-keyboard-controller/docs/guides/building-chat-app

This example shows a full chat screen implementation using KeyboardChatScrollView with a FlatList, interactive dismissal, sticky input, and safe area handling. It requires react-native-keyboard-controller and react-native-safe-area-context.

```typescript
import React, { forwardRef, useCallback, useRef, useState } from "react";  
import {  
  FlatList,  
  StyleSheet,  
  TextInput,  
  TouchableOpacity,  
  View,  
  type LayoutChangeEvent,  
  type ScrollViewProps,  
} from "react-native";  
import {  
  KeyboardChatScrollView,  
  KeyboardGestureArea,  
  KeyboardStickyView,  
} from "react-native-keyboard-controller";  
import { useSharedValue, withTiming } from "react-native-reanimated";  
import {  
  SafeAreaView,  
  useSafeAreaInsets,  
} from "react-native-safe-area-context";  
  
import type { KeyboardChatScrollViewProps } from "react-native-keyboard-controller";  
  
type Ref = React.ElementRef<typeof KeyboardChatScrollView>;  
  
const MARGIN = 8;  
const INPUT_HEIGHT = 42;  
  
// Wrapper for virtualized lists  
const ChatScrollView = forwardRef<  
  Ref,  
  ScrollViewProps & KeyboardChatScrollViewProps  
>((props, ref) => {  
  const { bottom } = useSafeAreaInsets();  
  
  return (  
    <KeyboardChatScrollView  
      ref={ref}  
      automaticallyAdjustContentInsets={false}  
      contentInsetAdjustmentBehavior="never"  
      keyboardDismissMode="interactive"  
      offset={bottom - MARGIN}  
      {...props}  
    />  
  );  
});  
  
function ChatScreen() {  
  const textInputRef = useRef<TextInput>(null);  
  const textRef = useRef("");  
  const [messages, setMessages] = useState(INITIAL_MESSAGES);  
  const { bottom } = useSafeAreaInsets();  
  const extraContentPadding = useSharedValue(0);  
  
  const renderScrollComponent = useCallback(  
    (props: ScrollViewProps) => (  
      <ChatScrollView {...props} extraContentPadding={extraContentPadding} />  
    ),  
    [extraContentPadding],  
  );  
  
  const onSend = useCallback(() => {  
    const text = textRef.current.trim();  
    if (!text) return;  
  
    setMessages((prev) => [...prev, { id: String(Date.now()), text }]);  
    textInputRef.current?.clear();  
    textRef.current = "";  
  }, []);  
  
  const onInputLayout = useCallback(  
    (e: LayoutChangeEvent) => {  
      extraContentPadding.value = withTiming(  
        Math.max(e.nativeEvent.layout.height - INPUT_HEIGHT, 0),  
        { duration: 250 },  
      );  
    },  
    [extraContentPadding],  
  );  
  
  return (  
    <SafeAreaView edges={["bottom"]} style={styles.container}>  
      <KeyboardGestureArea  
        interpolator="ios"  
        offset={INPUT_HEIGHT}  
        style={styles.container}  
        textInputNativeID="chat-input"  
      >  
        <FlatList  
          data={messages}  
          inverted  
          contentContainerStyle={{ paddingTop: INPUT_HEIGHT + MARGIN }}  
          keyExtractor={(item) => item.id}  
          renderItem={({ item }) => <Message {...item} />}  
          renderScrollComponent={renderScrollComponent}  
        />  
        <KeyboardStickyView  
          offset={{ opened: bottom - MARGIN }}  
          style={styles.composer}  
        >  
          <TextInput  
            ref={textInputRef}  
            multiline  
            nativeID="chat-input"  
            placeholder="Type a message..."  
            style={styles.input}  
            onChangeText={(text) => (textRef.current = text)}  
            onLayout={onInputLayout}  
          />  
          <TouchableOpacity onPress={onSend}>  
            <Text>Send</Text>  
          </TouchableOpacity>  
        </KeyboardStickyView>  
      </KeyboardGestureArea>  
    </SafeAreaView>  
  );  
}

```

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

### Basic KeyboardAvoidingView Example

Source: https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/components/keyboard-avoiding-view

Demonstrates how to use KeyboardAvoidingView with padding behavior and a vertical offset. This is useful for chat-like applications or layouts that need to remain visible when the keyboard appears.

```javascript
import React from "react";
import {
  Text,
  TextInput,
  TouchableOpacity,
  View,
  StyleSheet,
} from "react-native";
import { KeyboardAvoidingView } from "react-native-keyboard-controller";

export default function KeyboardAvoidingViewExample() {
  return (
    <KeyboardAvoidingView
      behavior={"padding"}
      keyboardVerticalOffset={100}
      style={styles.content}
    >
      <View style={styles.inner}>
        <Text style={styles.heading}>Header</Text>
        <View>
          <TextInput placeholder="Username" style={styles.textInput} />
          <TextInput placeholder="Password" style={styles.textInput} />
        </View>
        <TouchableOpacity style={styles.button}>
          <Text style={styles.text}>Submit</Text>
        </TouchableOpacity>
      </View>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  content: {
    flex: 1,
    maxHeight: 600,
  },
  heading: {
    fontSize: 36,
    marginBottom: 48,
    fontWeight: "600",
  },
  inner: {
    padding: 24,
    flex: 1,
    justifyContent: "space-between",
  },
  textInput: {
    height: 45,
    borderColor: "#000000",
    borderWidth: 1,
    borderRadius: 10,
    marginBottom: 36,
    paddingLeft: 10,
  },
  button: {
    marginTop: 12,
    height: 45,
    borderRadius: 10,
    backgroundColor: "rgb(40, 64, 147)",
    justifyContent: "center",
    alignItems: "center",
  },
  text: {
    fontWeight: "500",
    fontSize: 16,
    color: "white",
  },
});

```

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

### Mock react-native-keyboard-controller for Jest

Source: https://kirillzyusko.github.io/react-native-keyboard-controller/docs/recipes/jest-testing-guide

Add this code to your Jest setup file to mock the library. This ensures that Jest uses the provided mock implementation.

```javascript
jest.mock("react-native-keyboard-controller", () =>  
  require("react-native-keyboard-controller/jest"),  
);

```

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

### Basic Chat Screen Setup with KeyboardChatScrollView

Source: https://kirillzyusko.github.io/react-native-keyboard-controller/docs/guides/building-chat-app

Integrate KeyboardChatScrollView as a direct replacement for ScrollView to enable basic keyboard handling. This setup ensures messages are pushed up when the keyboard appears and pulled down when it hides.

```javascript
import { TextInput, View } from "react-native";
import {
  KeyboardChatScrollView,
  KeyboardStickyView,
} from "react-native-keyboard-controller";

function ChatScreen() {
  return (
    <View style={{ flex: 1 }}>
      <KeyboardChatScrollView>
        {messages.map((msg) => (
          <Message key={msg.id} {...msg} />
        ))}
      </KeyboardChatScrollView>
      <KeyboardStickyView>
        <TextInput placeholder="Type a message..." />
      </KeyboardStickyView>
    </View>
  );
}

```

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

### Shared-Surface Transition with KeyboardBackgroundView

Source: https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/views/keyboard-background-view

An advanced example demonstrating how to use KeyboardBackgroundView with Reanimated for animated background color transitions and opacity changes, creating a seamless visual bridge during keyboard interactions. It requires KeyboardStickyView and useReanimatedKeyboardAnimation for animation control.

```javascript
import React from "react";
import { TextInput, View } from "react-native";
import {  
  KeyboardBackgroundView,  
  KeyboardStickyView,  
  useReanimatedKeyboardAnimation,  
} from "react-native-keyboard-controller";
import Reanimated, {  
  interpolateColor,  
  useAnimatedStyle,  
} from "react-native-reanimated";
import {  
  SafeAreaView,  
  useSafeAreaInsets,  
} from "react-native-safe-area-context";

const ReanimatedBackgroundView = Reanimated.createAnimatedComponent(
  KeyboardBackgroundView,
);
const ReanimatedTextInput = Reanimated.createAnimatedComponent(TextInput);

const KeyboardSharedTransitionExample = () => {
  const { bottom } = useSafeAreaInsets();
  const { progress } = useReanimatedKeyboardAnimation();

  const opacity = useAnimatedStyle(
    () => ({
      height: 291 + 70,
      opacity: progress.value,
    }),
    [],
  );
  const inputColor = useAnimatedStyle(
    () => ({
      backgroundColor: interpolateColor(
        progress.value,
        [0, 1],
        ["#323232", "#474747"],
      ),
    }),
    [],
  );

  return (
    <SafeAreaView  
      style={{
        backgroundColor: "#000000",
        flex: 1,
        justifyContent: "flex-end",
      }}>
      <KeyboardStickyView offset={{ closed: 291, opened: 291 + bottom }}>
        <ReanimatedBackgroundView style={opacity} />
        <View
          style={{
            marginHorizontal: 30,
            marginVertical: 16,
            position: "absolute",
            left: 0,
            right: 0,
            bottom: 0,
            top: 0,
          }}>
          <ReanimatedTextInput
            placeholder="127.0.0.1"
            placeholderTextColor="#ececec"
            style={[ 
              {
                width: "100%",
                padding: 10,
                borderRadius: 8,
                textAlign: "center",
              },
              inputColor,
            ]}/>
        </View>
      </KeyboardStickyView>
    </SafeAreaView>
  );
};

export default KeyboardSharedTransitionExample;
```

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

### Basic Keyboard Animation with useKeyboardAnimation

Source: https://kirillzyusko.github.io/react-native-keyboard-controller/docs/guides/first-animation

Use the `useKeyboardAnimation` hook to get animated values for keyboard height and progress. Apply these values to animate UI elements like position and scale. This hook uses `Animated.Value` with the native driver enabled.

```javascript
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. we need to use hook to get an 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. we can apply any transformations we want  
            transform: [{ translateY: height }, { scale }],  
          }}  
        />  
      </View>  
      <TextInput  
        style={{  
          width: "100%",  
          marginTop: 50,  
          height: 50,  
          backgroundColor: "yellow",  
        }}  
      />  
    </View>  
  );
}
```

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

### Basic KeyboardAwareScrollView Implementation

Source: https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/components/keyboard-aware-scroll-view

This example demonstrates how to use KeyboardAwareScrollView to wrap multiple TextInput components. It includes a custom TextInput component for consistent styling and placeholder text.

```javascript
import React from "react";  
import {  
  StyleSheet,  
  TextInputProps,  
  TextInput as TextInputRN,  
} from "react-native";  
import { KeyboardAwareScrollView } from "react-native-keyboard-controller";  
  
const TextInput = (props: TextInputProps) => {  
  return (  
    <TextInputRN  
      placeholderTextColor="#6c6c6c"  
      style={styles.textInput}  
      multiline  
      numberOfLines={2}  
      testID={props.placeholder}  
      {...props}  
      placeholder={`${props.placeholder} (${  
        props.keyboardType === "default" ? "text" : "numeric"  
      })`}  
    />  
  );  
};
  
export default function AwareScrollView() {  
  return (  
    <KeyboardAwareScrollView  
      bottomOffset={50}  
      style={styles.container}  
      contentContainerStyle={styles.content}  
    >  
      {new Array(10).fill(0).map((_, i) => (  
        <TextInput  
          key={i}  
          placeholder={`TextInput#${i}`}  
          keyboardType={i % 2 === 0 ? "numeric" : "default"}  
        />  
      ))}  
    </KeyboardAwareScrollView>  
  );  
}  
  
const styles = StyleSheet.create({  
  container: {  
    paddingHorizontal: 16,  
  },  
  content: {  
    paddingTop: 50,  
  },  
  textInput: {  
    width: "100%",  
    minHeight: 50,  
    maxHeight: 200,  
    marginBottom: 50,  
    borderColor: "black",  
    borderWidth: 2,  
    marginRight: 160,  
    borderRadius: 10,  
    color: "black",  
    paddingHorizontal: 12,  
  },  
});  

```

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

### Configure Kotlin Version for Expo Managed Workflow

Source: https://kirillzyusko.github.io/react-native-keyboard-controller/docs/troubleshooting

Install expo-build-properties and configure the kotlinVersion in app.json or app.config.js for Expo managed projects.

```bash
npx expo install expo-build-properties

```

```json
{
  "expo": {
    "plugins": [
      [
        "expo-build-properties",
        {
          "android": {
            "kotlinVersion": "1.6.21"
          }
        }
      ]
    ]
  }
}

```

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

### Test keyboard animation with Jest

Source: https://kirillzyusko.github.io/react-native-keyboard-controller/docs/recipes/jest-testing-guide

Example test case demonstrating how to test component behavior based on keyboard height and progress. It mocks the useKeyboardAnimation hook to simulate different keyboard states.

```javascript
import "@testing-library/jest-native/extend-expect";
import React from "react";
import { Animated } from "react-native";
import { render } from "@testing-library/react-native";

import { useKeyboardAnimation } from "react-native-keyboard-controller";

function TestComponent() {
  const { height } = useKeyboardAnimation();

  return (
    <Animated.View
      testID="view"
      style={{ transform: [{ translateY: height }] }}
    />
  );
}

describe("basic keyboard interaction", () => {
  it("should have different styles depends on position", () => {
    const { getByTestId, update } = render(<TestComponent />);

    expect(getByTestId("view")).toHaveStyle({ transform: [{ translateY: 0 }] });

    (useKeyboardAnimation as jest.Mock).mockReturnValue({
      height: new Animated.Value(150),
      progress: new Animated.Value(0.5),
    });
    update(<TestComponent />);

    expect(getByTestId("view")).toHaveStyle({
      transform: [{ translateY: 150 }],
    });

    (useKeyboardAnimation as jest.Mock).mockReturnValue({
      height: new Animated.Value(300),
      progress: new Animated.Value(1),
    });
    update(<TestComponent />);

    expect(getByTestId("view")).toHaveStyle({
      transform: [{ translateY: 300 }],
    });
  });
});

```

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

### Listen to keyboardWillShow Event

Source: https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/keyboard-events

Example of how to add a listener for the 'keyboardWillShow' event using useEffect. Remember to remove the listener in the cleanup function to prevent memory leaks.

```javascript
import { KeyboardEvents } from "react-native-keyboard-controller";

useEffect(() => {
  const show = KeyboardEvents.addListener("keyboardWillShow", (e) => {
    // place your code here
  });

  return () => {
    show.remove();
  };
}, []);

```

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

### onMove Handler Example

Source: https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/hooks/keyboard/use-keyboard-handler

The `onMove` handler is invoked on every frame during keyboard position changes. It's useful for updating UI elements in real-time based on keyboard progress and height.

```javascript
useKeyboardHandler(  
  {
    onMove: (e) => {
      'worklet';
      progress.value = e.progress;
      height.value = e.height;
    }
  },
  []
);

```

```javascript
useKeyboardHandler(  
  {
    onMove: (e) => {
      'worklet';
      progress.value = e.progress;
      height.value = e.height;
    }
  },
  []
);

```

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

### Implementing Haptic Feedback on KeyboardToolbar.Prev Press

Source: https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/components/keyboard-toolbar

Add haptic feedback to the previous button's press event by passing a callback function to the `onPress` prop of KeyboardToolbar.Prev. This example uses react-native-haptic-feedback.

```javascript
import { Platform } from "react-native";
import { KeyboardToolbar } from "react-native-keyboard-controller";
import { trigger } from "react-native-haptic-feedback";

const options = {
  enableVibrateFallback: true,
  ignoreAndroidSystemSettings: false,
};
const haptic = () =>
  trigger(Platform.OS === "ios" ? "impactLight" : "keyboardTap", options);

// ...

<KeyboardToolbar>
  <KeyboardToolbar.Prev onPress={haptic} />
</KeyboardToolbar>;
```

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

### App Entry Point with KeyboardProvider

Source: https://kirillzyusko.github.io/react-native-keyboard-controller/docs/guides/building-chat-app

Sets up the root of the application to use KeyboardProvider, enabling keyboard management across the entire app. This is essential for components like ChatKitPlayground to function correctly.

```javascript
export default function App() {
  return (
    <SafeAreaProvider>
      <KeyboardProvider>
        <ChatKitPlayground />
      </KeyboardProvider>
    </SafeAreaProvider>
  )
};
  
```

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

### Using useReanimatedFocusedInput Hook

Source: https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/hooks/input/use-reanimated-focused-input

Demonstrates how to use the useReanimatedFocusedInput hook to get the focused input's SharedValue and the update function.

```javascript
const { input, update } = useReanimatedFocusedInput();

```

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

### Add KeyboardProvider to App

Source: https://kirillzyusko.github.io/react-native-keyboard-controller/docs/installation

Wrap your application's root component with KeyboardProvider to enable the library's functionality. This is required for the library to work.

```javascript
import { KeyboardProvider } from "react-native-keyboard-controller";  
  
export default function App() {  
  return (  
    <KeyboardProvider>  
      {/* your main application code goes here */}
    </KeyboardProvider>  
  );  
}  


```

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

### onEnd Handler Example

Source: https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/hooks/keyboard/use-keyboard-handler

The `onEnd` handler is triggered once the keyboard has finished its animation. It provides the final `progress` and `height` values of the keyboard.

```javascript
useKeyboardHandler(  
  {
    onEnd: (e) => {
      'worklet';
      progress.value = e.progress;
      height.value = e.height;
    }
  },
  []
);

```

```javascript
useKeyboardHandler(  
  {
    onEnd: (e) => {
      'worklet';
      progress.value = e.progress;
      height.value = e.height;
    }
  },
  []
);

```

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

### Using with Class Components and KeyboardController

Source: https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/hooks/keyboard/use-reanimated-keyboard-animation

Demonstrates how to integrate keyboard animation values into a React class component using `KeyboardContext`. It also shows how to manage Android soft input modes using `KeyboardController` to ensure proper resizing behavior.

```javascript
import {
  KeyboardController,
  KeyboardContext,
  AndroidSoftInputModes,
} from "react-native-keyboard-controller";

class KeyboardAnimation extends React.PureComponent {
  // 1. use context value
  static contextType = KeyboardContext;

  componentDidMount() {
    // 2. set input mode for android to `adjustResize`
    // (can be omitted if you already have `adjustResize` in `AndroidManifest.xml`)
    KeyboardController.setInputMode(
      AndroidSoftInputModes.SOFT_INPUT_ADJUST_RESIZE,
    );
  }

  componentWillUnmount() {
    // 2. return to default input mode (for Android)
    // in order not to break other part of your app
    KeyboardController.setDefaultMode();
  }

  render() {
    // 3. consume reanimated values 😊
    const { reanimated } = this.context;
  }
}

```

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

### Integrating with FlatList/FlashList/SectionList

Source: https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/components/keyboard-aware-scroll-view

Demonstrates how to integrate KeyboardAwareScrollView with virtualization components like FlatList and FlashList by using the renderScrollComponent prop.

```APIDOC
## Integrating with Virtualization Lists

### Description
KeyboardAwareScrollView can be integrated with virtualization components such as `FlatList`, `FlashList`, and `SectionList` by providing a custom `renderScrollComponent` prop.

### Usage

**For `FlatList`:**
```javascript
import React from "react";
import { FlatList, ScrollView, ScrollViewProps } from "react-native";
import { KeyboardAwareScrollView } from "react-native-keyboard-controller";

<FlatList
  renderScrollComponent={(props) => <KeyboardAwareScrollView {...props} />}
/>;
```

**For `FlashList`:**
```javascript
import React from "react";
import { ScrollView, ScrollViewProps } from "react-native";
import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
import { FlashList } from "@shopify/flash-list";

const RenderScrollComponent = React.forwardRef<ScrollView, ScrollViewProps>(
  (props, ref) => <KeyboardAwareScrollView {...props} ref={ref} />,
);

<FlashList renderScrollComponent={RenderScrollComponent} />;
```

### Example with `FlatList`
```javascript
import React from "react";
import { View, FlatList, TextInput } from "react-native";
import { KeyboardAwareScrollView } from "react-native-keyboard-controller";

const List = () => {
  return (
    <View style={{ flex: 1 }}>
      <FlatList
        data={new Array(10).fill(0).map((_, i) => i)}
        keyExtractor={(data) => String(data)}
        renderItem={() => {
          return (
            <View
              style={{
                width: "100%",
                height: 250,
                backgroundColor: "#00000066",
                justifyContent: "center",
              }}
            >
              <TextInput
                style={{
                  height: 40,
                  width: "100%",
                  borderColor: "black",
                  borderWidth: 2,
                }}
              />
            </View>
          );
        }}
        renderScrollComponent={(props) => (
          <KeyboardAwareScrollView {...props} />
        )}
        ItemSeparatorComponent={() => <View style={{ height: 5 }} />}
        showsVerticalScrollIndicator={false}
      />
    </View>
  );
};

export default List;
```
```

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

### Basic KeyboardStickyView Usage

Source: https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/components/keyboard-sticky-view

Demonstrates how to use KeyboardStickyView to attach a footer component to the keyboard. Configure the `offset` prop to control additional spacing when the keyboard is closed or opened.

```javascript
const offset = { closed: 0, opened: 20 };

const StickyFooter = () => {
  return (
    <KeyboardStickyView offset={offset}>
      <Footer />
    </KeyboardStickyView>
  );
};

```

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

### Using BottomSheetKeyboardAwareScrollView with BottomSheet

Source: https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/components/keyboard-aware-scroll-view

Example of how to use the custom BottomSheetKeyboardAwareScrollView component within a BottomSheet from @gorhom/bottom-sheet. This ensures keyboard awareness inside the bottom sheet.

```typescript
import BottomSheet from "@gorhom/bottom-sheet";
import BottomSheetKeyboardAwareScrollView from "./BottomSheetKeyboardAwareScrollView";

export function Example() {
  return (
    <BottomSheet>
      <BottomSheetKeyboardAwareScrollView>
        {/* More content here */}
      </BottomSheetKeyboardAwareScrollView>
    </BottomSheet>
  );
}

```

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

### Using useReanimatedKeyboardAnimation Hook

Source: https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/hooks/keyboard/use-reanimated-keyboard-animation

Import and use the `useReanimatedKeyboardAnimation` hook to get access to keyboard animation values. These values can be directly used with Reanimated for animations.

```javascript
import { useReanimatedKeyboardAnimation } from "react-native-keyboard-controller";

const { height, progress } = useReanimatedKeyboardAnimation();

```

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

### Import and Use useKeyboardAnimation Hook

Source: https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/hooks/keyboard/use-keyboard-animation

Import the hook from the library and destructure the animated height and progress values. These values can be used to animate UI elements based on keyboard state.

```javascript
import { useKeyboardAnimation } from "react-native-keyboard-controller";  
  
const { height, progress } = useKeyboardAnimation();  
```

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

### Using with Class Component

Source: https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/hooks/keyboard/use-keyboard-animation

Demonstrates how to use the `KeyboardContext` to access animated values within a class component and manage Android input modes.

```APIDOC
## Using with class component

```javascript
import {  
  KeyboardController,  
  KeyboardContext,  
  AndroidSoftInputModes,  
} from "react-native-keyboard-controller";  
  
class KeyboardAnimation extends React.PureComponent {  
  // 1. use context value  
  static contextType = KeyboardContext;  
  
  componentDidMount() {  
    // 2. set input mode for android to `adjustResize`  
    // (can be omitted if you already have `adjustResize` in `AndroidManifest.xml`)
    KeyboardController.setInputMode(  
      AndroidSoftInputModes.SOFT_INPUT_ADJUST_RESIZE,  
    );  
  }
  
  componentWillUnmount() {  
    // 2. return to default input mode (for Android)  
    // in order not to break other part of your app  
    KeyboardController.setDefaultMode();  
  }
  
  render() {  
    // 3. consume animated values 😊  
    const { animated } = this.context;  
  }
}
```
```

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

### onInteractive Handler Example

Source: https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/hooks/keyboard/use-keyboard-handler

The `onInteractive` handler is called during manual drag gestures on the keyboard. It provides real-time updates for `progress` and `height` while the user is actively resizing the keyboard.

```javascript
useKeyboardHandler(  
  {
    onInteractive: (e) => {
      'worklet';
      progress.value = e.progress;
      height.value = e.height;
    }
  },
  []
);

```

```javascript
useKeyboardHandler(  
  {
    onInteractive: (e) => {
      'worklet';
      progress.value = e.progress;
      height.value = e.height;
    }
  },
  []
);

```

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

### Keyboard Inset Calculation with blankSpace

Source: https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/components/keyboard-chat-scroll-view

Illustrates the formula for calculating the bottom padding when `blankSpace` is used. `blankSpace` ensures a minimum inset, absorbing keyboard height to prevent content movement.

```javascript
max(blankSpace, keyboardPadding + extraContentPadding);
```

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

### Set Android Input Mode

Source: https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/keyboard-controller

Dynamically change the windowSoftInputMode on Android during runtime. Use this to control how the keyboard interacts with the screen layout. The example sets the mode to SOFT_INPUT_ADJUST_RESIZE.

```typescript
static setInputMode(mode: AndroidSoftInputModes): void;
```

```typescript
KeyboardController.setInputMode(AndroidSoftInputModes.SOFT_INPUT_ADJUST_RESIZE);
```

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

### useFocusedInputHandler Hook Usage

Source: https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/hooks/input/use-focused-input-handler

This example demonstrates how to use the useFocusedInputHandler hook to intercept onChangeText and onSelectionChange events from a focused TextInput. It requires the 'worklet' directive for Reanimated compatibility.

```javascript
useFocusedInputHandler(  
  {
    onChangeText: ({ text }) => {
      "worklet";
    },
    onSelectionChange: ({ target, selection }) => {
      "worklet";
    },
  },
  [],
);

```

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

### KeyboardProvider

Source: https://kirillzyusko.github.io/react-native-keyboard-controller/docs/category/api-reference

KeyboardProvider should wrap your app. Under the hood it works with KeyboardControllerView to receive events during keyboard movements, maps these events to Animated/Reanimated values and store them in context.

```APIDOC
## KeyboardProvider

### Description
Wraps your application to manage keyboard events and animations.

### Usage
```jsx
<KeyboardProvider>
  <App />
</KeyboardProvider>
```
```

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

### Choose Keyboard Lift Behavior

Source: https://kirillzyusko.github.io/react-native-keyboard-controller/docs/guides/building-chat-app

Configure how messages react when the keyboard opens using the keyboardLiftBehavior prop. Options include 'always', 'whenAtEnd', 'persistent', and 'never'.

```javascript
<KeyboardChatScrollView keyboardLiftBehavior="whenAtEnd">
  {/* ...messages... */}
</KeyboardChatScrollView>

```

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

### Using useKeyboardController Hook

Source: https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/hooks/module/use-keyboard-controller

Import and use the useKeyboardController hook in your functional components to get the enabled state and control it. Call setEnabled(false) to disable the module when needed.

```javascript
import { useKeyboardController } from "react-native-keyboard-controller";  
  
const { enabled, setEnabled } = useKeyboardController();  
  
setEnabled(false);  

```

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

### Create a Wrapper for Virtualized Lists

Source: https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/components/keyboard-chat-scroll-view

Create a wrapper component that forwards the ref and passes props to KeyboardChatScrollView. This is necessary because virtualized lists expect a custom scroll component.

```typescript
import React, { forwardRef } from "react";
import { KeyboardChatScrollView } from "react-native-keyboard-controller";

import type { ScrollViewProps } from "react-native";
import type { KeyboardChatScrollViewProps } from "react-native-keyboard-controller";

type Ref = React.ElementRef<typeof KeyboardChatScrollView>;

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

export default VirtualizedListScrollView;
```

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

### Recommended: Optimize Animations with Native Threads

Source: https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/hooks/keyboard/use-keyboard-state

For animating UI elements based on keyboard height, use `useKeyboardAnimation` to offload the animation to the native thread. This prevents choppy animations and excessive re-renders caused by frequent state updates on the JS thread.

```javascript
const { height } = useKeyboardAnimation();

<Animated.View
  style={{
    width: "100%",
    transform: [{ translateY: height }],
  }}>
  ...
</Animated.View>;
```

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

### Using KeyboardController with Class Component

Source: https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/hooks/module/use-keyboard-controller

In class components, access the KeyboardContext to get the enabled state and the setEnabled function. Use componentDidMount to disable the module on demand by calling setEnabled(false).

```javascript
import {
  KeyboardController,
  KeyboardContext,
  AndroidSoftInputModes,
} from "react-native-keyboard-controller";

class KeyboardAnimation extends React.PureComponent {
  // 1. use context value
  static contextType = KeyboardContext;

  componentDidMount() {
    // 2. get an access to `enabled` and `setEnabled` props
    const { enabled, setEnabled } = this.context;

    // 3. disable a module on demand in your app
    setEnabled(false);
  }
}

```

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

### Basic KeyboardBackgroundView Usage

Source: https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/views/keyboard-background-view

Import and render KeyboardBackgroundView with a specified height. This is useful for simple integrations where visual alignment with the keyboard is needed.

```javascript
import { KeyboardBackgroundView } from "react-native-keyboard-controller";

export function KeyboardExtension() {
  return <KeyboardBackgroundView style={{ height: 48 }} />;
}
```

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

### Conditional Rendering Based on Keyboard Visibility

Source: https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/hooks/keyboard/use-keyboard-state

Conditionally render UI elements based on the keyboard's visibility state. This example shows how to display an 'Address form' section only when the keyboard is visible.

```javascript
import { View, Text, StyleSheet } from "react-native";
import { useKeyboardState } from "react-native-keyboard-controller";

const ShowcaseComponent = () => {
  const isVisible = useKeyboardState((state) => state.isVisible);

  return isVisible ? (
    <View style={styles.highlighted}>
      <Text>Address form</Text>
    </View>
  ) : null;
};

const styles = StyleSheet.create({
  highlighted: {
    borderColor: "#0070D8",
  },
});
```

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

### Migrate KeyboardToolbar to Compound Component Structure

Source: https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/components/keyboard-toolbar

Use the compound component API by nesting sub-components like Prev, Next, and Done within KeyboardToolbar. This replaces the old prop-based approach.

```javascript
import { KeyboardToolbar } from 'react-native-keyboard-controller';

// Old:
// <KeyboardToolbar />

// New:
<KeyboardToolbar>
  <KeyboardToolbar.Prev />
  <KeyboardToolbar.Next />
  <KeyboardToolbar.Done />
</KeyboardToolbar>
```

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

### Basic OverKeyboardView Usage

Source: https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/views/over-keyboard-view

Demonstrates how to use OverKeyboardView to show a custom view when a button is pressed. The view is hidden when the background is tapped. Imports necessary components from react-native and react-native-gesture-handler.

```javascript
import React, { useState } from "react";  
import {  
  Button,  
  StyleSheet,  
  TextInput,  
  TouchableWithoutFeedback,  
  View,  
} from "react-native";  
import {  
  GestureHandlerRootView,  
  TouchableOpacity,  
} from "react-native-gesture-handler";  
import { OverKeyboardView } from "react-native-keyboard-controller";  
  
export default function OverKeyboardViewExample() {  
  const [isShow, setShow] = useState(false);  
  
  return (  
    <View>  
      <TextInput style={styles.input} testID="over_keyboard_view.input" />  
      <Button  
        testID="over_keyboard_view.show"  
        title="Show"  
        onPress={() => setShow(true)}  
      />  
      <OverKeyboardView visible={isShow}>  
        <GestureHandlerRootView style={styles.fullScreen}>  
          <TouchableWithoutFeedback  
            style={styles.fullScreen}  
            testID="over_keyboard_view.background"  
            onPress={() => setShow(false)}  
          >  
            <View style={styles.container}>  
              <TouchableOpacity  
                testID="over_keyboard_view.content"  
                onPress={() => setShow(false)}  
              >  
                <View style={styles.background} />  
              </TouchableOpacity>  
            </View>  
          </TouchableWithoutFeedback>  
        </GestureHandlerRootView>  
      </OverKeyboardView>  
    </View>  
  );  
}  
  
const styles = StyleSheet.create({  
  fullScreen: {  
    flex: 1,  
  },  
  container: {  
    flex: 1,  
    justifyContent: "flex-end",  
    alignItems: "center",  
  },  
  background: {  
    width: 200,  
    height: 200,  
    backgroundColor: "blue",  
  },  
  input: {  
    backgroundColor: "yellow",  
    width: 200,  
    height: 50,  
    alignSelf: "center",  
    marginTop: 150,  
  },  
});  
```