React Native Avoid SoftInput

https://mateusz1913.github.io/react-native-avoid-softinput/docs/
Admin
React Native Avoid SoftInput is a native library that solves the common problem of focused views...
Tokens:13,684
Snippets:88
Trust Score:9.7
Update:6 months ago
Show doc for...
Tokens:
Raw
### Install pods for iOS

Source: https://mateusz1913.github.io/react-native-avoid-softinput/docs/guides

Run this command after installing the library to link native dependencies on iOS.

```bash
npx pod-install  
```

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

### Mock Implementation in Jest Setup File

Source: https://mateusz1913.github.io/react-native-avoid-softinput/docs/guides/jest-mock-usage

Add this code to your Jest setup file to mock the library. This approach allows for overriding mock functions directly within the setup.

```javascript
jest.mock('react-native-avoid-softinput', () => {  
  const mock = require('react-native-avoid-softinput/jest/mock');  
  
  /**  
   * If needed, override mock like so:  
   *  
   * return Object.assign(mock, { useSoftInputState: jest.fn(() => ({ isSoftInputShown: true, softInputHeight: 300 })) });  
   */  
  
  return mock;  
});  
```

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

### Install react-native-avoid-softinput with npm

Source: https://mateusz1913.github.io/react-native-avoid-softinput/docs/guides

Use this command to add the library to your project using npm.

```bash
npm i --save react-native-avoid-softinput  
```

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

### Install react-native-avoid-softinput with Yarn

Source: https://mateusz1913.github.io/react-native-avoid-softinput/docs/guides

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

```bash
yarn add react-native-avoid-softinput  
```

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

### Sticky Footer Example with useSoftInputHeightChanged

Source: https://mateusz1913.github.io/react-native-avoid-softinput/docs/recipes/recipes-sticky-footer

Use this hook to apply padding to a container based on the soft input (keyboard) height. This is useful for keeping elements like footers visible when the keyboard is active. Ensure `react-native-safe-area-context` is installed for proper edge handling.

```typescript
import { useFocusEffect } from '@react-navigation/native';  
import * as React from 'react';  
import { ScrollView, StyleSheet, View } from 'react-native';  
import { useSoftInputHeightChanged } from 'react-native-avoid-softinput';  
import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';  
import { SafeAreaView } from 'react-native-safe-area-context';  
  
import Button from '../components/Button';  
import SingleInput from '../components/SingleInput';  
import { styles as commonStyles } from '../consts/styles';  
  
const NOOP = () => {};  
  
export const StickyFooterExample: React.FC = () => {  
  const buttonContainerPaddingValue = useSharedValue(0);  
  
  const buttonContainerAnimatedStyle = useAnimatedStyle(() => {  
    return {  
      paddingBottom: buttonContainerPaddingValue.value,  
    };  
  });  
  
  /**  
   * You can also use `useSoftInputShown` & `useSoftInputHidden`  
   *  
   * useSoftInputShown(({ softInputHeight }) => {  
   *   buttonContainerPaddingValue.value = withTiming(softInputHeight);  
   * });  
   *  
   * useSoftInputHidden(() => {  
   *   buttonContainerPaddingValue.value = withTiming(0);  
   * });  
   */  
  useSoftInputHeightChanged(({ softInputHeight }) => {  
    buttonContainerPaddingValue.value = withTiming(softInputHeight);  
  });  
  
  return <SafeAreaView edges={[ 'left', 'right', 'bottom' ]} style={commonStyles.screenContainer}>  
    <View style={styles.scrollWrapper}>  
      <ScrollView  
        contentContainerStyle={styles.scrollContainer}  
        contentInsetAdjustmentBehavior="always"  
      >  
        <SingleInput />  
      </ScrollView>  
    </View>  
    <Animated.View style={[ buttonContainerAnimatedStyle, styles.ctaButtonWrapper ]}>  
      <View style={styles.ctaButtonContainer}>  
        <Button onPress={NOOP} title="Submit" />  
      </View>  
    </Animated.View>  
  </SafeAreaView>;  
};  
  
const styles = StyleSheet.create({  
  ctaButtonContainer: {  
    alignItems: 'center',  
    alignSelf: 'stretch',  
    borderRadius: 10,  
    borderWidth: 1,  
  },  
  ctaButtonWrapper: {  
    alignSelf: 'stretch',  
  },  
  scrollContainer: {  
    alignItems: 'center',  
    alignSelf: 'stretch',  
    borderRadius: 10,  
    borderWidth: 1,  
    flexGrow: 1,  
    justifyContent: 'center',  
    margin: 5,  
    padding: 10,  
  },  
  scrollWrapper: {  
    alignSelf: 'stretch',  
    flex: 1,  
  },  
});  
```

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

### Configure Kotlin version with expo-build-properties

Source: https://mateusz1913.github.io/react-native-avoid-softinput/docs/guides

For Expo managed projects before prebuild, use the expo-build-properties plugin in app.json or app.config.js to set the Kotlin version. Install the plugin first if you haven't already.

```json
{
  "expo": {
    "plugins": [
      [
        "expo-build-properties",
        {
          "android": {
            "kotlinVersion": "1.8.0" // <-- add a version here for resolution, version can be newer depending on the Expo SDK version used in the project
          }
        }
      ]
    ]
  }
}

```

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

### Custom Reanimated Soft Input Event Handler for Offset Change

Source: https://mateusz1913.github.io/react-native-avoid-softinput/docs/recipes/recipes-animations

Create a custom hook `useSoftInputAppliedOffsetHandler` for Reanimated v2.3.0+ to handle `onSoftInputAppliedOffsetChange` events. This hook requires Reanimated setup and should be used with caution.

```typescript
export function useSoftInputAppliedOffsetHandler(handlers, dependencies) {
  const { context, doDependenciesDiffer } = useHandler(handlers, dependencies);

  return useEvent(
    (event) => {
      "worklet";
      const { onSoftInputAppliedOffsetChange } = handlers;

      if (
        onSoftInputAppliedOffsetChange &&
        event.eventName.endsWith("onSoftInputAppliedOffsetChange")
      ) {
        onSoftInputAppliedOffsetChange(event, context);
      }
    },
    ["onSoftInputAppliedOffsetChange"],
    doDependenciesDiffer
  );
}
```

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

### Modal Form Example with AvoidSoftInputView

Source: https://mateusz1913.github.io/react-native-avoid-softinput/docs/recipes/recipes-modal

This component shows a form inside a Modal. It uses AvoidSoftInputView to push content above the keyboard and ensures the submit button is visible when scrolling. Requires react-navigation and react-native-safe-area-context.

```typescript
import { useFocusEffect } from '@react-navigation/native';  
import * as React from 'react';  
import { Image, Modal, ScrollView, StyleSheet, View } from 'react-native';  
import { AvoidSoftInputView } from 'react-native-avoid-softinput';  
import { SafeAreaView } from 'react-native-safe-area-context';  
  
import Button from '../components/Button';  
import CloseButton from '../components/CloseButton';  
import MultilineInput from '../components/MultilineInput';  
import SingleInput from '../components/SingleInput';  
import { styles as commonStyles } from '../consts/styles';  
  
const icon = require('../../assets/AppIconTransparent.png');  
  
export const ModalExample: React.FC = () => {  
  const [ modalVisible, setModalVisible ] = React.useState(false);  
  
  function closeModal() {  
    setModalVisible(false);  
  }  
  
  function openModal() {  
    setModalVisible(true);  
  }  
  
  return <SafeAreaView edges={[ 'left', 'right' ]} style={commonStyles.screenContainer}>  
    <Button  
      onPress={openModal}  
      title="Open modal"  
    />  
    <Modal  
      animationType="slide"  
      navigationBarTranslucent={true}  
      onRequestClose={closeModal}  
      statusBarTranslucent={true}  
      style={styles.modal}  
      supportedOrientations={[ 'landscape', 'portrait' ]}  
      transparent={true}  
      visible={modalVisible}  
    >  
      <SafeAreaView edges={[ 'left', 'right', 'bottom' ]} style={styles.modalContent}>  
        <View style={styles.container}>  
          <View style={styles.closeContainer}>  
            <CloseButton onPress={closeModal} />  
          </View>  
          <AvoidSoftInputView style={commonStyles.stretch}>  
            <ScrollView  
              bounces={false}  
              contentContainerStyle={commonStyles.scrollContainer}  
              contentInsetAdjustmentBehavior="always"  
              overScrollMode="always"  
              showsVerticalScrollIndicator={true}  
              style={commonStyles.stretch}  
            >  
              <View style={styles.logoContainer}>  
                <Image  
                  resizeMode="contain"  
                  source={icon}  
                  style={styles.logo}  
                />  
              </View>  
              <View style={styles.formContainer}>  
                <SingleInput placeholder="Single line" />  
                <MultilineInput placeholder="Multiline" />  
                <Button  
                  onPress={closeModal}  
                  title="Submit"  
                />  
              </View>  
            </ScrollView>  
          </AvoidSoftInputView>  
        </View>  
      </SafeAreaView>  
    </Modal>  
  </SafeAreaView>;  
};  
  
const styles = StyleSheet.create({  
  closeContainer: {  
    backgroundColor: 'transparent',  
    position: 'absolute',  
    left: 0,  
    top: 0,  
    zIndex: 999,  
  },  
  container: {  
    alignItems: 'center',  
    alignSelf: 'stretch',  
    backgroundColor: 'white',  
    borderColor: 'black',  
    borderRadius: 10,  
    borderWidth: 1,  
    marginBottom: 80,  
    marginHorizontal: 10,  
    marginTop: 60,  
    overflow: 'hidden',  
  },  
  formContainer: {  
    alignItems: 'center',  
    alignSelf: 'stretch',  
    justifyContent: 'center',  
    marginBottom: 80,  
    marginHorizontal: 10,  
  },  
  logo: {  
    height: 200,  
    width: 200,  
  },  
  logoContainer: {  
    alignItems: 'center',  
    alignSelf: 'stretch',  
    flex: 1,  
    justifyContent: 'center',  
    paddingVertical: 100,  
  },  
  modal: {  
    alignSelf: 'stretch',  
  },  
  modalContent: {  
    alignSelf: 'stretch',  
    backgroundColor: '#00000033',  
    flex: 1,  
  },  
});  
```

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

### Implement FormExample Component

Source: https://mateusz1913.github.io/react-native-avoid-softinput/docs/recipes/recipes-form

Uses useFocusEffect to toggle AvoidSoftInput and useSoftInputAppliedOffsetChanged to monitor keyboard offsets within a scrollable container.

```typescript
import { useFocusEffect } from '@react-navigation/native';  
import * as React from 'react';  
import { Image, ScrollView, StyleSheet, View } from 'react-native';  
import { AvoidSoftInput, useSoftInputAppliedOffsetChanged } from 'react-native-avoid-softinput';  
import { SafeAreaView } from 'react-native-safe-area-context';  
  
import Button from '../components/Button';  
import MultilineInput from '../components/MultilineInput';  
import SingleInput from '../components/SingleInput';  
import { styles as commonStyles } from '../consts/styles';  
  
const icon = require('../../assets/AppIconTransparent.png');  
  
const NOOP = () => {};  
  
export const FormExample: React.FC = () => {  
  const onFocusEffect = React.useCallback(() => {  
    AvoidSoftInput.setEnabled(true);  
    return () => {  
      AvoidSoftInput.setEnabled(false);  
    };  
  }, []);  
  
  useFocusEffect(onFocusEffect);  
  
  useSoftInputAppliedOffsetChanged(({ appliedOffset }) => {  
    console.log({ appliedOffset });  
  });  
  
  return <SafeAreaView edges={[ 'bottom', 'left', 'right' ]} style={commonStyles.screenContainer}>  
    <ScrollView  
      bounces={false}  
      contentContainerStyle={commonStyles.scrollContainer}  
      contentInsetAdjustmentBehavior="always"  
      overScrollMode="always"  
      showsVerticalScrollIndicator={true}  
      style={commonStyles.stretch}>  
      <View style={styles.logoContainer}>  
        <Image  
          resizeMode="contain"  
          source={icon}  
          style={styles.logo}  
        />  
      </View>  
      <View style={styles.formContainer}>  
        <SingleInput placeholder="Single line input" />  
        <MultilineInput placeholder="Multiline input" style={styles.secondInput} />  
        <MultilineInput placeholder="Large multiline input" />  
      </View>  
      <View style={styles.submitButtonContainer}>  
        <Button  
          onPress={NOOP}  
          title="Submit"  
        />  
      </View>  
    </ScrollView>  
  </SafeAreaView>;  
};  
  
const styles = StyleSheet.create({  
  formContainer: {  
    alignItems: 'center',  
    alignSelf: 'stretch',  
    justifyContent: 'center',  
    paddingHorizontal: 10,  
  },  
  logo: {  
    height: 200,  
    width: 200,  
  },  
  logoContainer: {  
    alignItems: 'center',  
    alignSelf: 'stretch',  
    flex: 1,  
    justifyContent: 'center',  
    paddingVertical: 100,  
  },  
  secondInput: {  
    height: 200,  
  },  
  submitButtonContainer: {  
    alignItems: 'center',  
    alignSelf: 'stretch',  
    justifyContent: 'center',  
    marginTop: 100,  
  },  
});
```

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

### Configure show animation delay

Source: https://mateusz1913.github.io/react-native-avoid-softinput/docs/api/module/set-show-animation-delay

Sets the delay for the show offset animation in milliseconds. Requires the AvoidSoftInput module to be imported.

```javascript
import { AvoidSoftInput } from "react-native-avoid-softinput";  
  
AvoidSoftInput.setShowAnimationDelay(200);  
```

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

### Listen for Soft Input Shown Events

Source: https://mateusz1913.github.io/react-native-avoid-softinput/docs/api/module/on-soft-input-shown

Use this method to subscribe to soft input visibility changes. The callback receives the current soft input height. Remember to call the returned unsubscribe function when done to prevent memory leaks.

```javascript
import { AvoidSoftInput } from "react-native-avoid-softinput";

const unsubscribe = AvoidSoftInput.onSoftInputShown(({ softInputHeight }) => {
  // Do sth
});

// later invoke unsubscribe.remove()
```

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

### onSoftInputShown Method

Source: https://mateusz1913.github.io/react-native-avoid-softinput/docs/api/module/on-soft-input-shown

Registers a listener for when the soft input (keyboard) is shown on the screen.

```APIDOC
## onSoftInputShown

### Description
Use the `onSoftInputShown` method to listen to events when the soft input is shown. This method returns an object with a `remove()` function to unsubscribe from the event.

### Parameters
- **callback** (({ softInputHeight }: { softInputHeight: number }) => void) - Required - Function called with current soft input height when soft input is displayed.

### Request Example
```javascript
import { AvoidSoftInput } from "react-native-avoid-softinput";

const unsubscribe = AvoidSoftInput.onSoftInputShown(({ softInputHeight }) => {
  // Do sth
});

// later invoke unsubscribe.remove()
```
```

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

### setEasing Method

Source: https://mateusz1913.github.io/react-native-avoid-softinput/docs/api/module/set-easing

Use the `setEasing` method to customize the animation's easing. Available values are `easeIn`, `easeInOut`, `easeOut`, and `linear`.

```APIDOC
## setEasing Method

### Description
Customizes the animation's easing curve.

### Method
`AvoidSoftInput.setEasing(easingType: string)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **easingType** (string) - Required - The type of easing to apply. Accepted values are `easeIn`, `easeInOut`, `easeOut`, or `linear`.

### Request Example
```javascript
import { AvoidSoftInput } from "react-native-avoid-softinput";

AvoidSoftInput.setEasing("easeInOut"); // Changes animation's easing to `easeInOut` curve
```

### Response
#### Success Response (200)
This method does not return a value.

#### Response Example
None
```

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

### onSoftInputHeightChange

Source: https://mateusz1913.github.io/react-native-avoid-softinput/docs/api/module/on-soft-input-height-change

Registers a listener to track changes in the soft input height.

```APIDOC
## onSoftInputHeightChange

### Description
Use the onSoftInputHeightChange method to listen to events when the soft input's height changes.

### Parameters
- **callback** (({ softInputHeight }: { softInputHeight: number }) => void) - Required - Function called with the current soft input height when the soft input is displayed.

### Request Example
```javascript
import { AvoidSoftInput } from "react-native-avoid-softinput";

const unsubscribe = AvoidSoftInput.onSoftInputHeightChange(
  ({ softInputHeight }) => {
    // Do sth
  }
);

// later invoke unsubscribe.remove()
```
```

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

### onSoftInputAppliedOffsetChange

Source: https://mateusz1913.github.io/react-native-avoid-softinput/docs/api/module/on-soft-input-applied-offset-change

Use the onSoftInputAppliedOffsetChange method to create animations based on the current applied offset value.

```APIDOC
## onSoftInputAppliedOffsetChange

### Description
This method allows you to subscribe to changes in the soft input offset. It's useful for creating animations or adjusting UI elements based on the current applied offset.

### Method
`onSoftInputAppliedOffsetChange`

### Parameters
#### Callback Function
- **callback** (function) - Required - A function that will be called whenever the soft input offset changes. It receives an object with the `appliedOffset` property.
  - **appliedOffset** (number) - The current applied offset value.

### Request Example
```javascript
import { AvoidSoftInput } from "react-native-avoid-softinput";

const unsubscribe = AvoidSoftInput.onSoftInputAppliedOffsetChange(
  ({ appliedOffset }) => {
    console.log("Applied offset:", appliedOffset);
    // Perform actions based on the appliedOffset
  }
);

// To stop listening for changes, call:
unsubscribe();
```

### Response
This method returns a function that can be called to unsubscribe from the event listener.
```

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

### Enable Mimic IOS Behavior for Keyboard Handling

Source: https://mateusz1913.github.io/react-native-avoid-softinput/docs/api/module/set-should-mimic-ios-behavior

Use this method to enable the library to handle keyboard input on Android, similar to how it works on iOS. This is deprecated; consider using `react-native-edge-to-edge` for Android 15 support.

```javascript
import { AvoidSoftInput } from "react-native-avoid-softinput";

AvoidSoftInput.setShouldMimicIOSBehavior(true);

```

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

### setHideAnimationDelay

Source: https://mateusz1913.github.io/react-native-avoid-softinput/docs/api/module/set-hide-animation-delay

Configures the delay for the hide offset animation in milliseconds.

```APIDOC
## setHideAnimationDelay

### Description
Use the `setHideAnimationDelay` method to customize the delay of the hide offset animation.

### Parameters
#### Path Parameters
- **delay** (number) - Optional - Hide offset animation delay in ms (defaults to 0 on Android and 300 on iOS).

### Request Example
```javascript
import { AvoidSoftInput } from "react-native-avoid-softinput";

AvoidSoftInput.setHideAnimationDelay(100);
```
```

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

### Subscribe to Soft Input Offset Changes

Source: https://mateusz1913.github.io/react-native-avoid-softinput/docs/api/module/on-soft-input-applied-offset-change

Use this method to listen for changes in the applied offset, which is useful for creating custom animations. Remember to call the returned unsubscribe method to prevent memory leaks.

```javascript
import { AvoidSoftInput } from "react-native-avoid-softinput";  
  
const unsubscribe = AvoidSoftInput.onSoftInputAppliedOffsetChange(  
  ({ appliedOffset }) => {  
    // Do sth  
  }  
);  
  
// Later invoke unsubscribe.remove()  
```

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

### Implement useSoftInputShown hook

Source: https://mateusz1913.github.io/react-native-avoid-softinput/docs/api/hooks/use-soft-input-shown

Use this hook to execute a callback function whenever the soft input keyboard is displayed, receiving the keyboard height as an argument.

```typescript
import { useSoftInputShown } from "react-native-avoid-softinput";  
  
useSoftInputShown(({ softInputHeight }) => {  
  // Do sth  
});  
```

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

### Set Android Soft Input Mode to Adjust Nothing

Source: https://mateusz1913.github.io/react-native-avoid-softinput/docs/api/module/set-adjust-nothing

Use this function to set the `android:windowSoftInputMode` attribute to `adjustNothing`. Ensure the library is imported before use.

```javascript
import { AvoidSoftInput } from "react-native-avoid-softinput";  

AvoidSoftInput.setAdjustNothing();  

```

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

### Listen to soft input height changes

Source: https://mateusz1913.github.io/react-native-avoid-softinput/docs/api/module/on-soft-input-height-change

Registers a listener for soft input height changes and returns an unsubscribe object. Call the remove method on the returned object to stop listening.

```javascript
import { AvoidSoftInput } from "react-native-avoid-softinput";  
  
const unsubscribe = AvoidSoftInput.onSoftInputHeightChange(  
  ({ softInputHeight }) => {  
    // Do sth  
  }  
);  
  
// later invoke unsubscribe.remove()
```

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

### Configure adjustResize mode

Source: https://mateusz1913.github.io/react-native-avoid-softinput/docs/api/module/set-adjust-resize

Sets the Android windowSoftInputMode to adjustResize. Requires the AvoidSoftInput module to be imported.

```javascript
import { AvoidSoftInput } from "react-native-avoid-softinput";  
  
AvoidSoftInput.setAdjustResize();  
```

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

### useSoftInputState Hook

Source: https://mateusz1913.github.io/react-native-avoid-softinput/docs/api/hooks/use-soft-input-state

The useSoftInputState hook returns an object containing the current visibility status and height of the soft input.

```APIDOC
## useSoftInputState

### Description
Returns an object with properties determining whether soft input is shown and how much screen it covers.

### Return Value
- **isSoftInputShown** (boolean) - Indicates if the soft input is currently visible.
- **softInputHeight** (number) - The height of the soft input in pixels.

### Example
```javascript
import { useSoftInputState } from "react-native-avoid-softinput";

const { isSoftInputShown, softInputHeight } = useSoftInputState();
```
```

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

### Enable react-native-avoid-softinput

Source: https://mateusz1913.github.io/react-native-avoid-softinput/docs/api/module/set-enabled

Call setEnabled with true to enable the module. Ensure the module is imported before use.

```javascript
import { AvoidSoftInput } from "react-native-avoid-softinput";

AvoidSoftInput.setEnabled(true);

```

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

### Mock Implementation in __mocks__ Directory

Source: https://mateusz1913.github.io/react-native-avoid-softinput/docs/guides/jest-mock-usage

Place this code in `__mocks__/react-native-avoid-softinput` to use the library's mock implementation. You can override specific mock functions if needed.

```javascript
const mock = require('react-native-avoid-softinput/jest/mock');  
  
/**  
 * If needed, override mock like so:  
 *  
 * module.exports = Object.assign(mock, { useSoftInputState: jest.fn(() => ({ isSoftInputShown: true, softInputHeight: 300 })) });  
 */  
  
module.exports = mock;  
```

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

### Set adjustPan mode

Source: https://mateusz1913.github.io/react-native-avoid-softinput/docs/api/module/set-adjust-pan

Configures the Android windowSoftInputMode to adjustPan. Requires the AvoidSoftInput module to be imported.

```javascript
import { AvoidSoftInput } from "react-native-avoid-softinput";  
  
AvoidSoftInput.setAdjustPan();  
```

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

### Implement useSoftInputHeightChanged hook

Source: https://mateusz1913.github.io/react-native-avoid-softinput/docs/api/hooks/use-soft-input-height-changed

Use this hook to execute a callback whenever the soft input height changes. Ensure the library is imported correctly before usage.

```typescript
import { useSoftInputHeightChanged } from "react-native-avoid-softinput";

useSoftInputHeightChanged(({ softInputHeight }) => {
  // Do sth
});
```

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

### Listen to Soft Input Hidden Events

Source: https://mateusz1913.github.io/react-native-avoid-softinput/docs/api/module/on-soft-input-hidden

Use this method to execute a callback function when the soft input (keyboard) is hidden. Remember to call the returned unsubscribe function when it's no longer needed to prevent memory leaks.

```javascript
import { AvoidSoftInput } from "react-native-avoid-softinput";

const unsubscribe = AvoidSoftInput.onSoftInputHidden(() => {
  // Do sth
});

// later invoke unsubscribe.remove()
```

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

### Set AndroidManifest.xml for keyboard handling

Source: https://mateusz1913.github.io/react-native-avoid-softinput/docs/guides

Modify the AndroidManifest.xml file to set 'android:windowSoftInputMode' to 'adjustResize' for bare React Native projects or Expo projects after prebuild. This ensures the library manages keyboard space.

```xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android">

    <uses-permission android:name="android.permission.INTERNET" />

    <application
      android:name=".MainApplication">
      <activity
        android:name=".MainActivity"
        android:windowSoftInputMode="adjustResize"
        android:launchMode="singleTask"
        android:exported="true">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>
    </application>

</manifest>

```

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

### Subscribe to Soft Input Applied Offset Changes

Source: https://mateusz1913.github.io/react-native-avoid-softinput/docs/api/hooks/use-soft-input-applied-offset-changed

Use this hook to execute a callback function whenever the applied offset for the soft input changes. This is useful for updating UI elements or performing actions based on the soft input's current visibility and position. Ensure the hook is used within a React component.

```javascript
import { useSoftInputAppliedOffsetChanged } from "react-native-avoid-softinput";

useSoftInputAppliedOffsetChanged(({ appliedOffset }) => {
  // Do sth
});

```

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

### setShowAnimationDelay

Source: https://mateusz1913.github.io/react-native-avoid-softinput/docs/api/module/set-show-animation-delay

Customizes the delay of the show offset animation with a delay value in milliseconds.

```APIDOC
## setShowAnimationDelay

### Description
Use `setShowAnimationDelay` method, to customize delay of show offset animation with delay value in ms.

### Method
N/A (This is a method call within a library)

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```javascript
import { AvoidSoftInput } from "react-native-avoid-softinput";

AvoidSoftInput.setShowAnimationDelay(200);
```

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

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

### Customize Animation Easing

Source: https://mateusz1913.github.io/react-native-avoid-softinput/docs/api/module/set-easing

Use the `setEasing` method to change the animation's easing curve. Available values include `easeIn`, `easeInOut`, `easeOut`, and `linear`. Ensure the `AvoidSoftInput` module is imported.

```javascript
import { AvoidSoftInput } from "react-native-avoid-softinput";

AvoidSoftInput.setEasing("easeInOut"); // Changes animation's easing to `easeInOut` curve  

```

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

### Configure AvoidSoftInputView Component Animations

Source: https://mateusz1913.github.io/react-native-avoid-softinput/docs/recipes/recipes-custom-config

Customize soft input animation properties directly on the AvoidSoftInputView component using props like easing, hide/show delays, and durations. This allows for component-specific animation configurations.

```typescript
import { useFocusEffect } from '@react-navigation/native';  
import * as React from 'react';  
import { StyleSheet, Text, View } from 'react-native';  
import { AvoidSoftInput, AvoidSoftInputView } from 'react-native-avoid-softinput';  
import { SafeAreaView } from 'react-native-safe-area-context';  
  
import SingleInput from '../components/SingleInput';  
  
export const CustomAnimationConfigViewExample: React.FC = () => {  
  const onFocusEffect = React.useCallback(() => {  
    AvoidSoftInput.setEnabled(true);  
    return () => {  
      AvoidSoftInput.setEnabled(false);  
    };  
  }, []);  
  
  useFocusEffect(onFocusEffect);  
  
  return <SafeAreaView edges={[ 'left', 'bottom', 'right' ]} style={styles.container}>  
    <AvoidSoftInputView  
      easing="easeOut"  
      hideAnimationDelay={1000}  
      hideAnimationDuration={600}  
      showAnimationDelay={1000}  
      showAnimationDuration={1200}  
      style={styles.contentContainer}>  
      <SingleInput placeholder="1" />  
      <View style={styles.spacer}>  
        <Text style={styles.label}>SPACER</Text>  
      </View>  
    </AvoidSoftInputView>  
  </SafeAreaView>;  
};  
  
const styles = StyleSheet.create({  
  container: {  
    alignSelf: 'stretch',  
    flex: 1,  
  },  
  contentContainer: {  
    alignSelf: 'stretch',  
    flexDirection: 'column-reverse',  
    flexGrow: 1,  
  },  
  label: {  
    color: 'blue',  
    fontSize: 18,  
    fontWeight: 'bold',  
  },  
  spacer: {  
    alignItems: 'center',  
    backgroundColor: 'pink',  
    flex: 1,  
    justifyContent: 'center',  
  },  
});  
```

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

### Implement useSoftInputHidden hook

Source: https://mateusz1913.github.io/react-native-avoid-softinput/docs/api/hooks/use-soft-input-hidden

Use this hook to trigger a callback function whenever the soft input keyboard is hidden.

```javascript
import { useSoftInputHidden } from "react-native-avoid-softinput";  
  
useSoftInputHidden(() => {  
  // Do sth  
});  
```

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

### AvoidSoftInputView Component Usage

Source: https://mateusz1913.github.io/react-native-avoid-softinput/docs/api/view

This snippet demonstrates how to use the AvoidSoftInputView component and its available props to control soft input behavior.

```APIDOC
## AvoidSoftInputView Component

Wrap your content inside `AvoidSoftInputView` if your form is rendered inside a modal or you don't want to apply padding or translation to the React root view.

### Props

Extends `View` props

| Prop | Type | Default value |
|---|---|---|
| `avoidOffset` | number | 0 |
| `easing` | `easeIn` or `easeInOut` or `easeOut` or `linear` | `linear` |
| `enabled` | boolean | true |
| `hideAnimationDelay` | number | 0 |
| `hideAnimationDuration` | number | 220 |
| `onSoftInputAppliedOffsetChange` | function(e: { nativeEvent: { appliedOffset: number }}) | undefined |
| `onSoftInputHeightChange` | function(e: { nativeEvent: { softInputHeight: number }}) | undefined |
| `onSoftInputHidden` | function(e: { nativeEvent: { softInputHeight: number }}) | undefined |
| `onSoftInputShown` | function(e: { nativeEvent: { softInputHeight: number }}) | undefined |
| `showAnimationDelay` | number | 300/0 (iOS/Android) |
| `showAnimationDuration` | number | 660 |

### Example

```javascript
import { AvoidSoftInputView } from "react-native-avoid-softinput";

<AvoidSoftInputView
  avoidOffset={10}
  easing="easeIn"
  enabled={true}
  hideAnimationDelay={100}
  hideAnimationDuration={300}
  onSoftInputShown={onSoftInputShown}
  onSoftInputHidden={onSoftInputHidden}
  onSoftInputHeightChange={onSoftInputHeightChange}
  showAnimationDelay={100}
  showAnimationDuration={800}
  style={styles.avoidSoftInputView}
>
  {/** Content that should be pushed above the keyboard */}
</AvoidSoftInputView>;
```
```

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

### useSoftInputHidden Hook

Source: https://mateusz1913.github.io/react-native-avoid-softinput/docs/api/hooks/use-soft-input-hidden

A shortcut hook for registering a callback that triggers when the soft input keyboard is hidden.

```APIDOC
## useSoftInputHidden

### Description
`useSoftInputHidden` is a shortcut for using `AvoidSoftInput.onSoftInputHidden` method inside a `useEffect` hook.

### Parameters
- **callback** (function) - Required - A function to be called when the soft input is hidden.

### Request Example
```javascript
import { useSoftInputHidden } from "react-native-avoid-softinput";

useSoftInputHidden(() => {
  // Do sth
});
```
```

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

### Enable Mimic iOS Behavior

Source: https://mateusz1913.github.io/react-native-avoid-softinput/docs/guides

Call AvoidSoftInput.setShouldMimicIOSBehavior(true) in your app's code to make the keyboard handling on Android mimic iOS behavior. This can be done globally or on a per-screen basis.

```javascript
AvoidSoftInput.setShouldMimicIOSBehavior(true)
```

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

### Animate UI based on Soft Input Events

Source: https://mateusz1913.github.io/react-native-avoid-softinput/docs/recipes/recipes-animations

Use shortcut hooks like `useSoftInputShown` and `useSoftInputHidden` within `useEffect` to trigger animations. Ensure React Native's Animated API or Reanimated is set up.

```typescript
const useAnimatedValue = (initialValue: number) => {
  const animatedValue = useRef<Animated.Value>(null);

  if (animatedValue.current === null) {
    animatedValue.current = new Animated.Value(initialValue);
  }

  return animatedValue.current;
}

export const AnimationExample = () => {
  /**
   * You can make animations with React Native's Animated API or Reanimated library
   */
  const animatedValue = useAnimatedValue(0);

  useSoftInputShown(({ softInputHeight }) => {
    /**
     * Animate based on event value
     */
    Animated.timing(animatedValue, {
      toValue: softInputHeight,
      duration: 1000,
    }).start();
  });

  useSoftInputHidden(() => {
    /**
     * Animate based on event value
     */
    Animated.timing(animatedValue, {
      toValue: 0,
      duration: 1000,
    }).start();
  });

  return (
    <View>
      // ... some JSX
      <Animated.View /** apply animated style */>
        // ... animated content
      </Animated.View>
      // ... some JSX
    </View>
  );
};
```

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

### Set adjustUnspecified mode

Source: https://mateusz1913.github.io/react-native-avoid-softinput/docs/api/module/set-adjust-unspecified

Configures the Android window soft input mode to adjustUnspecified. Requires the AvoidSoftInput module to be imported.

```javascript
import { AvoidSoftInput } from "react-native-avoid-softinput";  
  
AvoidSoftInput.setAdjustUnspecified();  
```

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

### Configure AvoidSoftInput Module Animations

Source: https://mateusz1913.github.io/react-native-avoid-softinput/docs/recipes/recipes-custom-config

Use the AvoidSoftInput module to programmatically set animation properties like easing, hide/show delays, and durations. This configuration is applied globally.

```typescript
import { useFocusEffect } from '@react-navigation/native';  
import * as React from 'react';  
import { StyleSheet, Text, View } from 'react-native';  
import { AvoidSoftInput, useSoftInputState } from 'react-native-avoid-softinput';  
import { SafeAreaView } from 'react-native-safe-area-context';  
  
import SingleInput from '../components/SingleInput';  
  
export const CustomAnimationConfigModuleExample: React.FC = () => {  
  const onFocusEffect = React.useCallback(() => {  
    AvoidSoftInput.setEnabled(true);  
    AvoidSoftInput.setEasing('easeOut');  
    AvoidSoftInput.setHideAnimationDelay(1000);  
    AvoidSoftInput.setHideAnimationDuration(600);  
    AvoidSoftInput.setShowAnimationDelay(1000);  
    AvoidSoftInput.setShowAnimationDuration(1200);  
    return () => {  
      AvoidSoftInput.setEasing('linear');  
      AvoidSoftInput.setHideAnimationDelay();  
      AvoidSoftInput.setHideAnimationDuration();  
      AvoidSoftInput.setShowAnimationDelay();  
      AvoidSoftInput.setShowAnimationDuration();  
      AvoidSoftInput.setEnabled(false);  
    };  
  }, []);  
  
  useFocusEffect(onFocusEffect);  
  
  const softInputState = useSoftInputState();  
  
  return <SafeAreaView edges={[ 'left', 'bottom', 'right' ]} style={styles.container}>  
    <View style={styles.contentContainer}>  
      <SingleInput placeholder="1" />  
      <View style={styles.spacer}>  
        <Text style={styles.label}>isVisible: {JSON.stringify(softInputState.isSoftInputShown)}</Text>  
        <Text style={styles.label}>height: {softInputState.softInputHeight}</Text>  
      </View>  
    </View>  
  </SafeAreaView>;  
};  
  
const styles = StyleSheet.create({  
  container: {  
    alignSelf: 'stretch',  
    flex: 1,  
  },  
  contentContainer: {  
    alignSelf: 'stretch',  
    flexDirection: 'column-reverse',  
    flexGrow: 1,  
  },  
  label: {  
    color: 'blue',  
    fontSize: 18,  
    fontWeight: 'bold',  
  },  
  spacer: {  
    alignItems: 'center',  
    backgroundColor: 'pink',  
    flex: 1,  
    justifyContent: 'center',  
  },  
});  
```

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

### Specify Kotlin version in Android build.gradle

Source: https://mateusz1913.github.io/react-native-avoid-softinput/docs/guides

For bare React Native projects or Expo projects after prebuild, specify the Kotlin version in the android/build.gradle file. Ensure the version is compatible with your React Native version.

```gradle
buildscript {
    ext {
        kotlinVersion = "1.8.0"  // <-- add a version here for resolution, version can be newer depending on the React Native version used in the project
    }
}  

```

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

### Custom Reanimated Soft Input Event Handler

Source: https://mateusz1913.github.io/react-native-avoid-softinput/docs/recipes/recipes-animations

Implement a generic `useSoftInputHandler` hook for Reanimated to manage multiple soft input events like `onSoftInputHidden`, `onSoftInputShown`, and `onSoftInputHeightChange`. Ensure Reanimated is configured.

```typescript
export function useSoftInputHandler(handlers, dependencies) {
  const { context, doDependenciesDiffer } = useHandler(handlers, dependencies);

  return useEvent(
    (event) => {
      "worklet";
      const { onSoftInputHidden, onSoftInputShown, onSoftInputHeightChange } = 
        handlers;

      if (onSoftInputHidden && event.eventName.endsWith("onSoftInputHidden")) {
        onSoftInputHidden(event, context);
      }

      if (onSoftInputShown && event.eventName.endsWith("onSoftInputShown")) {
        onSoftInputShown(event, context);
      }

      if (
        onSoftInputHeightChange &&
        event.eventName.endsWith("onSoftInputHeightChange")
      ) {
        onSoftInputHeightChange(event, context);
      }
    },
    ["onSoftInputHidden", "onSoftInputShown", "onSoftInputHeightChange"],
    doDependenciesDiffer
  );
}
```

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

### Retrieve Soft Input State

Source: https://mateusz1913.github.io/react-native-avoid-softinput/docs/api/hooks/use-soft-input-state

Returns an object containing the visibility status and height of the soft input keyboard.

```typescript
{ isSoftInputShown: boolean, softInputHeight: number }
```

```typescript
import { useSoftInputState } from "react-native-avoid-softinput";

const { isSoftInputShown, softInputHeight } = useSoftInputState();
```

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

### onSoftInputHidden Method

Source: https://mateusz1913.github.io/react-native-avoid-softinput/docs/api/module/on-soft-input-hidden

Registers a listener for the soft input hidden event.

```APIDOC
## onSoftInputHidden

### Description
Use `onSoftInputHidden` method if you want to listen to events when soft input is hidden.

### Parameters
- **callback** (() => void) - Required - Function called when soft input is hidden.

### Request Example
```javascript
import { AvoidSoftInput } from "react-native-avoid-softinput";

const unsubscribe = AvoidSoftInput.onSoftInputHidden(() => {
  // Do sth
});

// later invoke unsubscribe.remove()
```
```

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

### Enable Module on Screen Focus with React Navigation

Source: https://mateusz1913.github.io/react-native-avoid-softinput/docs/guides/usage-module

Use this snippet to enable the AvoidSoftInput module when a screen gains focus and disable it when the screen loses focus. This is useful for managing soft input behavior only when needed. Requires react-navigation.

```typescript
import * as React from "react";
import { Button, ScrollView, TextInput, View } from "react-native";
import { AvoidSoftInput } from "react-native-avoid-softinput";
import { useFocusEffect } from "@react-navigation/native";

export const FormExample: React.FC = () => {
  const onFocusEffect = React.useCallback(() => {
    // This should be run when screen gains focus - enable the module where it's needed
    AvoidSoftInput.setEnabled(true);
    return () => {
      // This should be run when screen loses focus - disable the module where it's not needed, to make a cleanup
      AvoidSoftInput.setEnabled(false);
    };
  }, []);

  useFocusEffect(onFocusEffect); // register callback to focus events

  return <ScrollView>
    <View>
      <TextInput placeholder="Single line input" />
      <TextInput placeholder="Multiline input" />
      <TextInput placeholder="Large multiline input" />
    </View>
    <View>
      <Button
        onPress={NOOP}
        title="Submit"
      />
    </View>
  </ScrollView>;
};

```

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

### setDefaultAppSoftInputMode

Source: https://mateusz1913.github.io/react-native-avoid-softinput/docs/api/module/set-default-app-soft-input-mode

Resets the android:windowSoftInputMode to the default value defined in the Android manifest.

```APIDOC
## setDefaultAppSoftInputMode

### Description
Use `setDefaultAppSoftInputMode` to reset the `android:windowSoftInputMode` to the default value declared in the Android manifest.

### Request Example
```javascript
import { AvoidSoftInput } from "react-native-avoid-softinput";

AvoidSoftInput.setDefaultAppSoftInputMode();
```
```

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

### setEnabled Method

Source: https://mateusz1913.github.io/react-native-avoid-softinput/docs/api/module/set-enabled

Use the `setEnabled` method to enable or disable the soft input module.

```APIDOC
## setEnabled

### Description
Use `setEnabled` method, to enable or disable module.

### Method
Not specified (assumed to be a method call on an imported object)

### Endpoint
Not applicable (this is a library method)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **enabled** (boolean) - yes - control whether module is enabled

### Request Example
```javascript
import { AvoidSoftInput } from "react-native-avoid-softinput";

AvoidSoftInput.setEnabled(true);
```

### Response
#### Success Response (200)
Not specified

#### Response Example
Not specified
```

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

### Implement AvoidSoftInput with Bottom Sheet

Source: https://mateusz1913.github.io/react-native-avoid-softinput/docs/recipes/recipes-bottom-sheet

Uses useFocusEffect to enable and configure AvoidSoftInput when the screen is focused, and resets it upon cleanup.

```typescript
import { BottomSheetModal, BottomSheetView } from '@gorhom/bottom-sheet';  
import { useFocusEffect } from '@react-navigation/native';  
import * as React from 'react';  
import { StyleSheet, Text, View } from 'react-native';  
import { AvoidSoftInput } from 'react-native-avoid-softinput';  
import { SafeAreaView } from 'react-native-safe-area-context';  
  
import Button from '../components/Button';  
import SingleInput from '../components/SingleInput';  
import { styles as commonStyles } from '../consts/styles';  
  
const Backdrop: React.FC = () => <View style={styles.backdrop} />;

export const BottomSheetExample: React.FC = () => {  
  const bottomSheetModalRef = React.useRef<BottomSheetModal>(null);  
  
  function dismissBottomSheet() {  
    bottomSheetModalRef.current?.dismiss();  
  }  
  
  function presentBottomSheet() {  
    bottomSheetModalRef.current?.present();  
  }  
  
  const onFocusEffect = React.useCallback(() => {  
    AvoidSoftInput.setEnabled(true);  
    AvoidSoftInput.setAvoidOffset(70);  
  
    return () => {  
      AvoidSoftInput.setAvoidOffset(0);  
      AvoidSoftInput.setEnabled(false);  
    };  
  }, []);  
  
  useFocusEffect(onFocusEffect);  
  
  return <SafeAreaView edges={[ 'left', 'right' ]} style={commonStyles.screenContainer}>  
    <Button  
      onPress={presentBottomSheet}  
      title="Open bottom sheet"  
    />  
    <BottomSheetModal  
      ref={bottomSheetModalRef}  
      backdropComponent={Backdrop}  
      enableDismissOnClose  
      enableDynamicSizing  
      enablePanDownToClose  
      index={0}  
    >  
      <BottomSheetView style={styles.bottomSheet}>  
        <SafeAreaView edges={[ 'bottom', 'left', 'right' ]} style={styles.bottomSheet}>  
          <Text style={styles.header}>Header</Text>  
          <SingleInput style={styles.input} />  
          <View style={styles.submitButtonContainer}>  
            <Button  
              onPress={dismissBottomSheet}  
              title="Submit"  
            />  
          </View>  
        </SafeAreaView>  
      </BottomSheetView>  
    </BottomSheetModal>  
  </SafeAreaView>;  
};  
  
const styles = StyleSheet.create({  
  backdrop: {  
    ...StyleSheet.absoluteFillObject,  
    backgroundColor: 'rgba(0,0,0,0.5)',  
  },  
  bottomSheet: {  
    alignItems: 'center',  
    alignSelf: 'stretch',  
    backgroundColor: 'white',  
  },  
  header: {  
    color: 'black',  
    fontSize: 28,  
    fontWeight: 'bold',  
    paddingBottom: 40,  
    paddingTop: 30,  
  },  
  input: {  
    marginHorizontal: 50,  
  },  
  submitButtonContainer: {  
    alignSelf: 'stretch',  
    marginBottom: 30,  
  },  
});
```

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

### useSoftInputAppliedOffsetChanged Hook

Source: https://mateusz1913.github.io/react-native-avoid-softinput/docs/api/hooks/use-soft-input-applied-offset-changed

The `useSoftInputAppliedOffsetChanged` hook is a convenient wrapper around the `AvoidSoftInput.onSoftInputAppliedOffsetChange` method, designed to be used within `useEffect` for managing soft input adjustments.

```APIDOC
## useSoftInputAppliedOffsetChanged Hook

### Description
This hook provides a simplified way to subscribe to and handle changes in the soft input applied offset within your React Native application. It's particularly useful for triggering actions or UI updates when the soft input's padding or translation changes.

### Parameters
#### Callback Function
- **callback** (function) - Required - A function that accepts an object with an `appliedOffset` property. This function is invoked whenever the soft input's applied offset changes.
  - **appliedOffset** (number) - The current value of the applied offset.

### Usage Example
```javascript
import { useSoftInputAppliedOffsetChanged } from "react-native-avoid-softinput";

// Inside your component:
useSoftInputAppliedOffsetChanged(({ appliedOffset }) => {
  console.log("Soft input applied offset changed to:", appliedOffset);
  // Perform actions based on the new offset, e.g., adjust UI elements.
});
```
```

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

### Reset Android Soft Input Mode

Source: https://mateusz1913.github.io/react-native-avoid-softinput/docs/api/module/set-default-app-soft-input-mode

Use this method to revert the window soft input mode to the default configuration specified in the Android manifest.

```javascript
import { AvoidSoftInput } from "react-native-avoid-softinput";  
  
AvoidSoftInput.setDefaultAppSoftInputMode();  
```

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

### setHideAnimationDuration

Source: https://mateusz1913.github.io/react-native-avoid-softinput/docs/api/module/set-hide-animation-duration

Use `setHideAnimationDuration` method, to customize duration of hide offset animation with duration value in ms.

```APIDOC
## setHideAnimationDuration

### Description
Use `setHideAnimationDuration` method, to customize duration of hide offset animation with duration value in ms.

### Method
N/A (This is a method call within a library)

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```javascript
import { AvoidSoftInput } from "react-native-avoid-softinput";

AvoidSoftInput.setHideAnimationDuration(300);
```

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```
Tokens:
Raw