### 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 ;
};
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 ;
};
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 ;
};
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
```
--------------------------------
### 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 SPACER;
};
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";
{/** Content that should be pushed above the keyboard */}
;
```
```
--------------------------------
### 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(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 (
// ... some JSX
// ... animated content
// ... some JSX
);
};
```
--------------------------------
### 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 isVisible: {JSON.stringify(softInputState.isSoftInputShown)}height: {softInputState.softInputHeight};
};
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 ;
};
```
--------------------------------
### 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 = () => ;
export const BottomSheetExample: React.FC = () => {
const bottomSheetModalRef = React.useRef(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 Header;
};
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
```