Keyboard Controller

https://kirillzyusko.github.io/react-native-keyboard-controller/docs/
Admin
Keyboard Controller is a React Native library that enables frame-by-frame control of keyboard...
Tokens:59,832
Snippets:462
Trust Score:8.3
Update:9 hours ago
Show doc for...
Tokens:
Raw
### 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 starts. The height and progress values are destination values, so progress equals 1 when the keyboard will appear.

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

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

### Example: ShowcaseComponent using useKeyboardState

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

A complete example component that uses useKeyboardState with a selector to conditionally render a highlighted view based on keyboard visibility.

```TSX
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",
  },
});
```

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

### useKeyboardAnimation example with Animated.View and TextInput

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

Full example component using useKeyboardAnimation to get height and progress, interpolate progress to scale, and apply translateY and scale transforms to an Animated.View. Note that useKeyboardAnimation returns Animated values with native driver enabled, so properties like height and backgroundColor cannot be animated.

```tsx
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>
  );
}
```

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

### KeyboardStickyView Usage Example

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

Example showing how to use KeyboardStickyView with an offset object to stick a footer to the keyboard.

```APIDOC
## KeyboardStickyView

### Description
A component that sticks a view to the keyboard's movements, maintaining visibility and interaction. It acts as a keyboard accessory view.

### Props

#### `enabled`
- **type**: boolean
- **Required**: No
- **Default**: `true`
- **Description**: Indicates whether KeyboardStickyView is enabled or disabled. If disabled, the view will be moved to its initial position (as if the keyboard were closed) and will not react to keyboard movements.

#### `offset`
- **type**: object
- **Required**: No
- **Description**: An object containing the following properties:
  - **closed** (number) - Additional offset to the view when the keyboard is closed. Default value is `0`.
  - **opened** (number) - Additional offset to the view when the keyboard is opened. Default value is `0`.

### Example
```tsx
const offset = { closed: 0, opened: 20 };

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

### Troubleshooting

#### Missing animations on iOS (new arch only)
Starting with version `1.21.7`, KeyboardStickyView uses Reanimated for its `translateY` animation. On iOS (New Architecture only), updating React state right before a keyboard event can cause this animation to be skipped entirely. This happens because a React commit can block Reanimated from applying its animated updates in the same frame.

Common triggers include:
- Updating state in the `onFocus` callback of a `TextInput`.
- Updating state in response to the `keyboardWillShow` event.
- Using `KeyboardToolbar` or other components that trigger a state update before the keyboard appears.

To fix this, enable the `DISABLE_COMMIT_PAUSING_MECHANISM` feature flag. See the link for detailed setup instructions.
```

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

### KeyboardProvider usage example

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

Wrap your app with KeyboardProvider to enable keyboard handling. The example shows the import and basic JSX structure, with a placeholder for other components.

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

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

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

### Complete chat app example with messages, styles, and App component

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

This snippet contains the full example for building a chat app with react-native-keyboard-controller. It defines an array of chat messages with optional sender flags, style objects for the chat UI, and the main App component that wraps ChatScreen with SafeAreaProvider and KeyboardProvider. The example is intended to be used as a starting point for implementing keyboard-aware chat interfaces.

```typescript
const messages = [
  { text: "Hmmm🤔" },
  { text: "It looks like it still will be choppy..." },
  { text: "But I don't know what should I try next" },
  { text: "Reanimated?", sender: true },
  { text: "A little bit disappointed 😔" },
  { text: "🤯" },
  { text: "Try to check it. I hope it helps you...", sender: true },
  { text: "It really pushes you to think twice on how to design it first" },
  {
    text: "Looks promising!😎 I was always looking for a solution that would allow us to run animations on native thread and provide at least stable 60 FPS",
  },
  { text: "You have to check it!!!", sender: true },
  { text: "Ha-ha! I'm definitely going to check it!" },
  { text: "Hello! How are you?" },
  { text: "Hi! I'm good. How are you?", sender: true },
  {
    text: "I'm fine, thank you! Have you seen new keyboard animation library?",
  },
  { text: "No! Let me check.", sender: true },
  {
    text: "Wow! I've been looking for it for a while. It's awesome!",
    sender: true,
  },
  { text: "Do you any other questions?", sender: true },
  { text: "Yes, I have a question about teleport library" },
  { text: "Do you know anything about it?", sender: true },
  {
    text: "I have seen some techno demos, but haven't tried it uet",
    sender: true,
  },
  { text: "Yes, I already tried it in my project" },
  {
    text: "It's pretty cool. We were able to built gallery with share element transitions without any flickering or any other issues",
    sender: true,
  },
  { text: "So far it looks cool!", sender: true },
  { text: "And seems to be pretty stable", sender: true },
  {
    text: "This is a literally missing 'move' operation in react/react-native. Before we could only create/delete elements, but now you get power of zero-overhead 'move' operation and it can bring your app performance on the next level and also significantly boost your app UI cause it unlocks the power that we didn't have before",
  },
  { text: "Wow! That's awesome!" },
  { text: "Yes! Totally agree!", sender: true },
].map((message, index) => ({
  id: `initial-${index + 1}`,
  sender: false,
  ...message,
}));

const container = {
  borderRadius: 10,
  padding: 10,
  margin: 10,
  marginVertical: 5,
  maxWidth: "80%" as const,
};

const styles = StyleSheet.create({
  container: {
    justifyContent: "flex-end",
    flex: 1,
    backgroundColor: "#3A3A3C",
  },
  input: {
    flex: 1,
    margin: MARGIN,
    marginBottom: 0,
    padding: MARGIN,
    lineHeight: 20,
    paddingVertical: 10,
    paddingHorizontal: 16,
    borderRadius: 99,
    borderWidth: 1,
    borderColor: "#BCBCBC",
    backgroundColor: "#3A3A3C66",
    color: "#F8F8FC",
  },
  composer: {
    position: "absolute",
    width: "100%",
    minHeight: TEXT_INPUT_HEIGHT,
    flexDirection: "row",
  },
  send: {
    right: MARGIN,
    padding: MARGIN,
    marginTop: MARGIN,
    backgroundColor: "white",
    justifyContent: "center",
    borderRadius: 16,
    marginLeft: MARGIN,
  },
  senderContainer: {
    alignSelf: "flex-end",
    backgroundColor: "#F8F8FC",
    ...container,
  },
  recipientContainer: {
    alignSelf: "flex-start",
    backgroundColor: "#64D2FF",
    ...container,
  },
  message: {
    color: "#000000",
  },
});

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

export default App;
```

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

### Install expo-build-properties for Expo managed workflow

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

Run this command to install the expo-build-properties package, required to configure Kotlin version in Expo managed workflow.

```sh
npx expo install expo-build-properties
```

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

### Preload keyboard

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

Example call to preload the keyboard.

```typescript
KeyboardController.preload();
```

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

### Jest mock setup for react-native-keyboard-controller

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 react-native-keyboard-controller library. This is required before writing tests that use the library's hooks.

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

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

### Dismiss keyboard with await

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

Example of dismissing the keyboard and awaiting its full dismissal.

```typescript
await KeyboardController.dismiss();
```

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

### Full FlatList integration example with KeyboardAwareScrollView

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

A complete example of a FlatList with TextInput items, using renderScrollComponent to wrap KeyboardAwareScrollView. Demonstrates a typical list with separators and scroll indicator.

```tsx
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;
```

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

### KeyboardToolbar and KeyboardAwareScrollView Example

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

Complete example showing a form with multiple text inputs inside a KeyboardAwareScrollView and a KeyboardToolbar with Prev, Next, and Done buttons. Includes a custom TextInput component that tracks focus state and applies conditional styling. The example is from the KeyboardToolbar documentation page.

```tsx
import React, { useCallback, useState } from "react";
import { StyleSheet, Text, TextInput as TextInputRN, View } from "react-native";
import {
  KeyboardAwareScrollView,
  KeyboardToolbar,
} from "react-native-keyboard-controller";

import type {
  NativeSyntheticEvent,
  TextInputFocusEventData,
  TextInputProps,
} from "react-native";

export default function ToolbarExample() {
  return (
    <>
      <KeyboardAwareScrollView bottomOffset={35} style={scrollViewStyles}>
        <TextInput placeholder="Your name" title="Name" />
        <TextInput placeholder="Your surname" title="Surname" />
        <TextInput
          placeholder="example@gmail.com"
          title="Email"
          editable={false}
        />
        <TextInput
          placeholder="Tell us funny facts about you"
          title="About you"
          editable={false}
        />
        <View style={styles.row}>
          <View style={styles.birthday}>
            <TextInput placeholder="DD" title="Day" />
          </View>
          <View style={[styles.birthday, styles.withPadding]}>
            <TextInput placeholder="MM" title="Month" />
          </View>
          <View style={styles.birthday}>
            <TextInput placeholder="YYYY" title="Year" />
          </View>
        </View>
        <TextInput placeholder="Country" title="Country" />
        <TextInput placeholder="Region of the city" title="Region" />
        <TextInput placeholder="City where you currently live" title="City" />
        <TextInput placeholder="Street name" title="Street" />
        <TextInput placeholder="House number" title="House" />
        <TextInput placeholder="Flat number" title="Flat" />
      </KeyboardAwareScrollView>
      <KeyboardToolbar>
        <KeyboardToolbar.Prev />
        <KeyboardToolbar.Next />
        <KeyboardToolbar.Done />
      </KeyboardToolbar>
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: "white",
  },
  row: {
    flexDirection: "row",
  },
  birthday: {
    flex: 1 / 3,
  },
  withPadding: {
    paddingHorizontal: 16,
  },
});
const scrollViewStyles = [styles.withPadding, styles.container];

type CustomTextInputProps = {
  title?: string;
} & TextInputProps;

const TextInput = (props: CustomTextInputProps) => {
  const { title, ...rest } = props;
  const [isFocused, setFocused] = useState(false);

  const onFocus = useCallback(
    (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
      setFocused(true);
      props.onFocus?.(e);
    },
    [],
  );

  const onBlur = useCallback(
    (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
      setFocused(false);
      props.onBlur?.(e);
    },
    [],
  );

  return (
    <>
      {!!title && <Text style={textInputStyles.title}>{title}</Text>}
      <TextInputRN
        placeholderTextColor="#6c6c6c"
        style={[
          textInputStyles.container,
          rest.editable === false && textInputStyles.disabled,
          isFocused && textInputStyles.focused,
        ]}
        multiline
        numberOfLines={2}
        testID={rest.placeholder}
        {...rest}
        placeholder={`${rest.placeholder}`}
        onFocus={onFocus}
        onBlur={onBlur}
      />
    </>
  );
};

const textInputStyles = StyleSheet.create({
  title: {
    marginBottom: 6,
    marginLeft: 3,
    color: "black",
    fontSize: 16,
  },
  container: {
    width: "100%",
    minHeight: 50,
    maxHeight: 200,
    marginBottom: 50,
    borderColor: "black",
    borderWidth: 2,
    marginRight: 160,
    borderRadius: 10,
    color: "black",
    paddingHorizontal: 12,
  },
  disabled: {
    opacity: 0.5,
  },
  focused: {
    borderColor: "#20AAFF",
  },
});
```

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

### OverKeyboardView usage example

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

Example showing how to use OverKeyboardView with a visible state, a button to show it, and a touchable background to hide it. It imports from react-native, react-native-gesture-handler, and react-native-keyboard-controller. The component renders a TextInput and a Button, and when visible, shows a full-screen GestureHandlerRootView with a TouchableWithoutFeedback background and a TouchableOpacity content.

```tsx
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,
  },
});
```

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

### Install with npm

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

Use this command to add react-native-keyboard-controller to your project with npm. This is one of three package manager options.

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

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

### Not recommended: Using useKeyboardState for styles

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

Avoid using useKeyboardState for controlling styles because it can lead to choppy animations and excessive re-renders. This example shows the anti-pattern.

```TSX
const { height } = useKeyboardState();

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

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

### Using with class component

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

Example of using keyboard animation values in a class component via KeyboardContext and KeyboardController.

```APIDOC
## Using with class component

### Description
Shows how to consume reanimated keyboard values in a class component using KeyboardContext and set input mode for Android.

### Usage
```tsx
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;
  }
}
```

### Notes
- `KeyboardController.setInputMode` sets the Android input mode to `adjustResize`.
- `KeyboardController.setDefaultMode` resets to the default input mode.
- The `reanimated` object from context contains the keyboard animation values.

```

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

### Install with Expo

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

Use this command to add react-native-keyboard-controller to your project with Expo. This is one of three package manager options.

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

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

### KeyboardExtender usage example

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

A complete example showing how to use KeyboardExtender to extend the keyboard with donation amount buttons. It uses useKeyboardState to adapt text color to keyboard appearance, and toggles the extender based on TextInput focus. Note: TextInput cannot be placed inside KeyboardExtender; use KeyboardBackgroundView and KeyboardStickyView instead.

```jsx
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",
  },
});
```

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

### KeyboardEvents usage example

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

Shows how to subscribe to keyboard events using KeyboardEvents.addListener and clean up the listener on unmount. Place your custom logic inside the event handler.

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

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

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

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

### Install with Yarn

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

Use this command to add react-native-keyboard-controller to your project with Yarn. This is one of three package manager options.

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

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

### Plug VirtualizedListScrollView into FlatList or LegendList

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

FlatList and LegendList require a stable function reference, so wrap the component in useCallback. This example shows the useCallback pattern and the FlatList usage.

```tsx
import { useCallback } from "react";
import { FlatList, type ScrollViewProps } from "react-native";

const renderScrollComponent = useCallback(
  (props: ScrollViewProps) => <VirtualizedListScrollView {...props} />,
  [],
);

<FlatList
  data={messages}
  inverted
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => <Message {...item} />}
  renderScrollComponent={renderScrollComponent}
/>;
```

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

### KeyboardAvoidingView Props

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

Documentation for the KeyboardAvoidingView component props, including behavior modes, offset configuration, and usage examples.

```APIDOC
## KeyboardAvoidingView Props

### Description
Documentation for the KeyboardAvoidingView component props in react-native-keyboard-controller.

### Props

#### `behavior`
- **Type**: string
- **Required**: No
- **Description**: Specify how to react to the presence of the keyboard. Possible values:
  - `translate-with-padding` - Combines translation with paddingTop for best performance, commonly used in chat-like apps.
  - `padding` - Moves the view up by keyboard height and applies paddingBottom to the content container.
  - `height` - Shrinks the entire view.
  - `position` - Shifts the view up instead of resizing.

#### `contentContainerStyle`
- **Type**: style object
- **Required**: No
- **Description**: The style of the content container (View) when behavior is `position`.

#### `enabled`
- **Type**: boolean
- **Required**: No
- **Default**: `true`
- **Description**: Indicates whether KeyboardAvoidingView is enabled or disabled.

#### `keyboardVerticalOffset`
- **Type**: number
- **Required**: No
- **Default**: `0`
- **Description**: The distance between the top of the user screen and the react native view. Useful for fixed headers, navigation bars, or other UI elements at the top.

#### `automaticOffset`
- **Type**: boolean
- **Required**: No
- **Default**: `false`
- **Description**: When `true`, the view automatically detects its position on screen, accounting for navigation headers, modals, and other layout offsets. `keyboardVerticalOffset` becomes purely additive extra space.

### Usage Example

```tsx
import { useHeaderHeight } from "@react-navigation/elements";
import { KeyboardAvoidingView } from "react-native-keyboard-controller";

const MyScreen = () => {
  const headerHeight = useHeaderHeight();

  return (
    <KeyboardAvoidingView
      behavior="padding"
      keyboardVerticalOffset={headerHeight}
    >
      <TextInput placeholder="Type here..." />
    </KeyboardAvoidingView>
  );
};
```

### Notes
- For Android with translucent StatusBar, `useHeaderHeight()` includes StatusBar height automatically.
- For non-translucent StatusBar, add `StatusBar.currentHeight` manually.
- `keyboardVerticalOffset` is useful for navigation bars, custom toolbars, and modal screens.
```

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

### Set input mode to SOFT_INPUT_ADJUST_RESIZE

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

Example call to setInputMode with AndroidSoftInputModes.SOFT_INPUT_ADJUST_RESIZE. Note that combining adjustResize with edge-to-edge mode results in behavior similar to adjustNothing.

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

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

### useKeyboardAnimation

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

Hook that returns animated values for keyboard height and progress. Use it in functional components to get the current keyboard animation state.

```APIDOC
## useKeyboardAnimation

### Description
`useKeyboardAnimation` is a hook which gives access to two animated values: `height` and `progress`.

### Returns
- **height** (Animated.Value) - value which changes between **0** and **keyboardHeight**
- **progress** (Animated.Value) - value which changes between **0** (keyboard closed) and **1** (keyboard opened)

### Example
```tsx
import { useKeyboardAnimation } from "react-native-keyboard-controller";

const { height, progress } = useKeyboardAnimation();
```

### Using with class component
```tsx
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;
  }
}
```
```

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

### KeyboardGestureArea usage example

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

Example of using KeyboardGestureArea with interpolator="ios", offset={50}, and textInputNativeID="composer". It wraps a ScrollView with keyboardDismissMode="interactive" and a TextInput with matching nativeID. This demonstrates the required setup for offset behavior on iOS.

```tsx
<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 basic example with all handlers

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

Shows the basic usage of useKeyboardHandler with onStart, onMove, onInteractive, and onEnd handlers. Remember to add the 'worklet' directive to each handler to avoid exceptions, as they are not workletized by default.

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

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

### Freezing with Reanimated SharedValue

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

freeze also accepts a Reanimated SharedValue<boolean>. This is useful for toggling freezing synchronously from a worklet, e.g., inside a gesture handler. The example sets freeze.value = true on the UI thread before the keyboard starts dismissing.

```tsx
import { useSharedValue } from "react-native-reanimated";
import { Gesture, GestureDetector } from "react-native-gesture-handler";

const freeze = useSharedValue(false);

const gesture = Gesture.Pan().onStart(() => {
  "worklet";
  // freeze synchronously on the UI thread before the keyboard starts dismissing
  freeze.value = true;
});

<KeyboardChatScrollView freeze={freeze}>
  {/* ...messages... */}
</KeyboardChatScrollView>;
```

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

### Wrap app with KeyboardProvider

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

Wrap your app with KeyboardProvider to use the library. The provider preloads the keyboard on app start; set preload={false} to avoid flickering and manually preload later via KeyboardController.

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

export default function App() {
  return (
    <KeyboardProvider>
      {/* your main application code goes here */}
    </KeyboardProvider>
  );
}
```

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

### useFocusedInputHandler example with onChangeText and onSelectionChange

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

Example of using useFocusedInputHandler to intercept text change and selection change events from a focused TextInput. The handlers are marked as worklets for use with Reanimated.

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

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

### Shared-surface transition with KeyboardBackgroundView and Reanimated

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

Advanced example using KeyboardBackgroundView with KeyboardStickyView and useReanimatedKeyboardAnimation to create a shared-surface transition. It animates opacity and background color based on keyboard progress. Note that keyboard apps may allow custom background colors, so an exact match isn't always guaranteed.

```tsx
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;
```

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

### KeyboardAwareScrollView usage example with multiple TextInputs

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

A complete example showing how to use KeyboardAwareScrollView with a custom TextInput component. It renders 10 text inputs with alternating keyboard types (numeric and default) and applies a bottomOffset of 50. The styles define container, content, and textInput properties.

```tsx
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,
  },
});
```

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

### Dismiss keyboard without animation

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

Example of dismissing the keyboard immediately without animation.

```typescript
await KeyboardController.dismiss({ animated: false });
```

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

### Dismiss keyboard with keepFocus option

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

Example of dismissing the keyboard while keeping focus on the input.

```typescript
await KeyboardController.dismiss({ keepFocus: true });
```

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

### Set focus to next field

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

Example of using setFocusTo to move focus to the next field.

```typescript
KeyboardController.setFocusTo("next");
```

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

### Check keyboard visibility

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

Example of using isVisible to conditionally execute code when the keyboard is visible.

```typescript
if (KeyboardController.isVisible()) {
  // do something
}
```

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

### Basic setup with KeyboardChatScrollView and KeyboardStickyView

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

Drop-in replacement for ScrollView. Wrap messages in KeyboardChatScrollView and place a TextInput inside KeyboardStickyView. The keyboard pushes messages up when it appears and pulls them back when it hides.

```tsx
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>
  );
}
```

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

### Restore default input mode

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

Example call to setDefaultMode to reset the input mode to the default value.

```typescript
KeyboardController.setDefaultMode();
```

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

### preload

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

Preloads the keyboard to reduce delay when focusing the first input after app launch.

```APIDOC
## preload

### Description
Preloads the keyboard to prevent noticeable delay when the user focuses the first input after launching the app.

### Method
static

### Signature
```ts
static preload(): void;
```

### Example
```ts
KeyboardController.preload();
```

```

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

### Using useReanimatedKeyboardAnimation with class component

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

Class component example that consumes reanimated values from KeyboardContext. Sets Android input mode to adjustResize on mount and restores default on unmount. Requires AndroidSoftInputModes import.

```tsx
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;
  }
}
```

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

### Basic usage of useReanimatedKeyboardAnimation

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

Import the hook and destructure height and progress reanimated values. height changes between 0 and keyboardHeight, progress between 0 (closed) and 1 (opened).

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

const { height, progress } = useReanimatedKeyboardAnimation();
```

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

### Test case example for keyboard animation

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

A sample test case that renders a component using the useKeyboardAnimation hook and verifies that the Animated.View style changes when the mock returns different height values. It uses @testing-library/react-native and @testing-library/jest-native.

```tsx
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 }],
    });
  });
});
```

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

### useKeyboardAnimation with class component

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

Use KeyboardContext and KeyboardController in a class component. Set Android input mode to adjustResize on mount and restore default on unmount. Consume animated values from context.

```tsx
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;
  }
}
```

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

### onEnd handler example

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

The onEnd handler is called when the keyboard has completed its movement. The event contains the current keyboard metrics.

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