### Prepare example app
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/CONTRIBUTING.md
Prebuild the example application before running it on a device or simulator.
```sh
cd packages/expo-example
yarn prebuild
```
--------------------------------
### Install Project Dependencies
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/README.md
Run this command to install all necessary dependencies for the project.
```bash
$ yarn
```
--------------------------------
### Run example app on Android
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/CONTRIBUTING.md
Launch the example application on an Android device or emulator.
```sh
cd packages/expo-example
yarn android
```
--------------------------------
### Run example app on iOS
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/CONTRIBUTING.md
Launch the example application on an iOS device or simulator.
```sh
cd packages/expo-example
yarn ios
```
--------------------------------
### Branch creation example
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/CONTRIBUTING.md
Example of creating a new branch using the project's naming convention.
```sh
git branch chore/2-configuration
```
--------------------------------
### Install project dependencies
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/CONTRIBUTING.md
Run this command in the root directory to install all required dependencies for the monorepo.
```sh
yarn
```
--------------------------------
### Install expo-build-properties
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/docs/guides/INSTALLATION.mdx
Install the plugin required to manage build properties in managed Expo projects.
```sh
npx expo install expo-build-properties
```
--------------------------------
### Start Local Development Server
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/README.md
Launches a local development server with live reloading enabled.
```bash
$ yarn start
```
--------------------------------
### Run Docusaurus documentation
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/CONTRIBUTING.md
Start the local development server for the documentation site.
```sh
cd docs
yarn start
```
--------------------------------
### Mocking via Jest setup file
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/docs/guides/JEST_MOCK_USAGE.mdx
Use jest.mock within a configured Jest setup file to define the mock implementation.
```js
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;
});
```
--------------------------------
### Commit message example
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/CONTRIBUTING.md
Example of a commit message following the conventional commits specification.
```text
fix(#1): bug with crash...
```
--------------------------------
### Open iOS project in Xcode
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/CONTRIBUTING.md
Install Pods and open the iOS project workspace in Xcode.
```sh
cd packages/expo-example
xed ios
```
--------------------------------
### Install react-native-avoid-softinput with Yarn
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/packages/react-native-avoid-softinput/README.md
Install the library using Yarn. This is the first step for integrating the library into your React Native project.
```sh
yarn add react-native-avoid-softinput
```
--------------------------------
### Install react-native-avoid-softinput with npm
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/packages/react-native-avoid-softinput/README.md
Install the library using npm. This is an alternative to Yarn for integrating the library into your React Native project.
```sh
npm i --save react-native-avoid-softinput
```
--------------------------------
### Install iOS Pods
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/README.md
Required step for iOS projects to link the native dependencies.
```sh
npx pod-install
```
--------------------------------
### Install react-native-avoid-softinput
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/README.md
Use a package manager to add the library to your React Native project.
```sh
yarn add react-native-avoid-softinput
```
```sh
npm i --save react-native-avoid-softinput
```
--------------------------------
### Modal Example with AvoidSoftInputView
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/docs/guides/USAGE_VIEW.mdx
Use this snippet to display a modal with content managed by AvoidSoftInputView. Ensure react-navigation is set up for focus effects if needed. This example includes basic modal controls and scrollable content.
```tsx
import * as React from "react";
import { Button, Modal, ScrollView, TextInput, View } from "react-native";
import { AvoidSoftInputView } from "react-native-avoid-softinput";
import { useFocusEffect } from "@react-navigation/native";
export const ModalExample: React.FC = () => {
const [ modalVisible, setModalVisible ] = React.useState(false);
function closeModal() {
setModalVisible(false);
}
function openModal() {
setModalVisible(true);
}
return
// highlight-start
// highlight-end
;
};
```
--------------------------------
### Update Keyboard Handling Setup
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/docs/guides/MIGRATION_FROM_V6_TO_V7.mdx
In v7, AvoidSoftInput.setShouldMimicIOSBehavior is deprecated. Use AvoidSoftInput.setEnabled(true) for keyboard handling. Ensure react-native-edge-to-edge is installed for Android 15 support.
```diff
useEffect(() => {
- AvoidSoftInput.setShouldMimicIOSBehavior(true); // <---- Tell Android that library will handle keyboard insets manually to match iOS behavior
AvoidSoftInput.setEnabled(true); // <---- Enable module
}, []);
```
--------------------------------
### Modal Form Example
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/docs/recipes/MODAL.mdx
This component shows how to integrate a form within a React Native Modal. It uses AvoidSoftInputView to manage keyboard interactions and ensures the submit button remains visible when scrolling.
```tsx
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,
},
});
```
--------------------------------
### Get Soft Input State
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/docs/api/hooks/USE_SOFT_INPUT_STATE.mdx
Import and call the useSoftInputState hook to access the soft input's visibility and height. This hook is essential for dynamically managing UI layout based on keyboard presence.
```typescript
import { useSoftInputState } from "react-native-avoid-softinput";
const { isSoftInputShown, softInputHeight } = useSoftInputState();
```
--------------------------------
### Bottom Sheet Integration with AvoidSoftInput
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/docs/recipes/BOTTOM_SHEET.mdx
This example shows how to use the AvoidSoftInput module when your bottom sheet is implemented with a library like React Native Bottom Sheet. It enables soft input avoidance on focus and resets it on blur.
```tsx
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.absoluteFill,
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,
},
});
```
--------------------------------
### Set Default App Soft Input Mode
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/docs/api/module/SET_DEFAULT_APP_SOFT_INPUT_MODE.mdx
Use this function to revert the soft input mode to the default declared in the Android manifest. No specific setup is required beyond importing the module.
```typescript
import { AvoidSoftInput } from "react-native-avoid-softinput";
AvoidSoftInput.setDefaultAppSoftInputMode();
```
--------------------------------
### Build Static Content
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/README.md
Compiles the website into static files located in the build directory.
```bash
$ yarn build
```
--------------------------------
### Publish new version
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/CONTRIBUTING.md
Use release-it to automate the versioning and publishing process to npm.
```sh
yarn release
```
--------------------------------
### Deploy Website to GitHub Pages
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/README.md
Deploys the website to the gh-pages branch. Choose between SSH or standard authentication methods.
```bash
$ USE_SSH=true yarn deploy
```
```bash
$ GIT_USER= yarn deploy
```
--------------------------------
### Configure AndroidManifest.xml
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/docs/guides/INSTALLATION.mdx
Set the windowSoftInputMode to adjustResize to allow the library to manage keyboard space.
```xml
```
--------------------------------
### setEasing Method
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/docs/api/module/SET_EASING.mdx
Configures the animation easing curve for soft input transitions.
```APIDOC
## setEasing
### Description
Use the setEasing method to customize the animation's easing curve.
### Parameters
- **easing** (string) - Required - The animation easing type. Available values: 'easeIn', 'easeInOut', 'easeOut', 'linear'.
### Request Example
```ts
import { AvoidSoftInput } from "react-native-avoid-softinput";
AvoidSoftInput.setEasing("easeInOut");
```
```
--------------------------------
### onSoftInputShown Method
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/docs/api/module/ON_SOFT_INPUT_SHOWN.mdx
Registers a listener for when the soft input keyboard is shown, providing the height of the keyboard.
```APIDOC
## onSoftInputShown
### Description
Use the onSoftInputShown method to listen to events when the soft input keyboard is shown.
### Parameters
- **callback** (({ softInputHeight }: { softInputHeight: number }) => void) - Required - Function called with current soft input height when soft input is displayed.
### Request Example
```ts
import { AvoidSoftInput } from "react-native-avoid-softinput";
const unsubscribe = AvoidSoftInput.onSoftInputShown(({ softInputHeight }) => {
// Do sth
});
// later invoke unsubscribe.remove()
```
```
--------------------------------
### Mocking via __mocks__ directory
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/docs/guides/JEST_MOCK_USAGE.mdx
Create a file at __mocks__/react-native-avoid-softinput to automatically mock the library across all tests.
```js
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;
```
--------------------------------
### Listen to soft input shown events
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/docs/api/module/ON_SOFT_INPUT_SHOWN.mdx
Use this method to register a callback that receives the soft input height. Remember to call the returned unsubscribe function to prevent memory leaks.
```ts
import { AvoidSoftInput } from "react-native-avoid-softinput";
const unsubscribe = AvoidSoftInput.onSoftInputShown(({ softInputHeight }) => {
// Do sth
});
// later invoke unsubscribe.remove()
```
--------------------------------
### Implement sticky footer with useSoftInputHeightChanged
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/docs/recipes/STICKY_FOOTER.mdx
Uses the useSoftInputHeightChanged hook to animate the padding of a button container when the keyboard height changes.
```tsx
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,
},
});
```
--------------------------------
### Listen to Soft Input Height Changes
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/docs/api/module/ON_SOFT_INPUT_HEIGHT_CHANGE.mdx
Use this method to subscribe to keyboard height changes. Remember to call the returned unsubscribe function when done to prevent memory leaks.
```typescript
import { AvoidSoftInput } from "react-native-avoid-softinput";
const unsubscribe = AvoidSoftInput.onSoftInputHeightChange(
({ softInputHeight }) => {
// Do sth
}
);
// later invoke unsubscribe.remove()
```
--------------------------------
### setHideAnimationDelay
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/docs/api/module/SET_HIDE_ANIMATION_DELAY.mdx
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
#### Arguments
- **delay** (number) - Optional - The delay value in milliseconds. Defaults to 0 on Android and 300 on iOS.
### Request Example
```ts
import { AvoidSoftInput } from "react-native-avoid-softinput";
AvoidSoftInput.setHideAnimationDelay(100);
```
```
--------------------------------
### Verify code quality
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/CONTRIBUTING.md
Run TypeScript type checking and JavaScript linting to ensure code standards are met.
```sh
yarn typescript
yarn lint:js
```
--------------------------------
### Customize animation easing with setEasing
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/docs/api/module/SET_EASING.mdx
Configures the animation curve for soft input transitions. Requires importing AvoidSoftInput from the library.
```ts
import { AvoidSoftInput } from "react-native-avoid-softinput";
AvoidSoftInput.setEasing("easeInOut"); // Changes animation's easing to `easeInOut` curve
```
--------------------------------
### onSoftInputAppliedOffsetChange
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/docs/api/module/ON_SOFT_INPUT_APPLIED_OFFSET_CHANGE.mdx
Registers a callback function that is triggered whenever the applied offset changes during soft input padding or translation.
```APIDOC
## onSoftInputAppliedOffsetChange
### Description
Use the onSoftInputAppliedOffsetChange method to track the current applied offset value, useful for creating custom animations or UI adjustments when the soft input appears or disappears.
### Parameters
- **callback** (({ appliedOffset }: { appliedOffset: number }) => void) - Required - A function called during the application of padding or translation, providing the current applied offset value.
### Request Example
```ts
import { AvoidSoftInput } from "react-native-avoid-softinput";
const unsubscribe = AvoidSoftInput.onSoftInputAppliedOffsetChange(
({ appliedOffset }) => {
// Logic to handle offset change
}
);
// Later invoke unsubscribe.remove()
```
```
--------------------------------
### Basic Form Handling with ScrollView
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/docs/recipes/FORM.mdx
This component demonstrates a basic form layout within a ScrollView. It uses `useFocusEffect` to enable soft input avoidance when the screen is focused and disable it when unfocused. The `useSoftInputAppliedOffsetChanged` hook logs the applied offset, which can be useful for debugging.
```tsx
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,
},
});
```
--------------------------------
### setShowAnimationDelay
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/docs/api/module/SET_SHOW_ANIMATION_DELAY.mdx
Configures the delay for the show offset animation.
```APIDOC
## setShowAnimationDelay
### Description
Use the `setShowAnimationDelay` method to customize the delay of the show offset animation in milliseconds.
### Parameters
#### Parameters
- **delay** (number) - Optional (defaults to 0) - The show offset animation delay in ms.
### Request Example
```ts
import { AvoidSoftInput } from "react-native-avoid-softinput";
AvoidSoftInput.setShowAnimationDelay(200);
```
```
--------------------------------
### setShouldMimicIOSBehavior
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/docs/api/module/SET_SHOULD_MIMIC_IOS_BEHAVIOR.mdx
Configures whether the library should handle keyboard behavior on Android or defer to the OS.
```APIDOC
## setShouldMimicIOSBehavior
### Description
Determines whether the keyboard on Android should be handled by the library (mimicking iOS behavior) or managed by the OS via the android:windowSoftInputMode parameter.
### Parameters
- **shouldMimic** (boolean) - Required - If true, the library handles keyboard behavior on Android.
### Request Example
```ts
import { AvoidSoftInput } from "react-native-avoid-softinput";
AvoidSoftInput.setShouldMimicIOSBehavior(true);
```
```
--------------------------------
### Set show animation duration
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/docs/api/module/SET_SHOW_ANIMATION_DURATION.mdx
Configures the duration of the show offset animation in milliseconds. The default value is 660ms.
```ts
import { AvoidSoftInput } from "react-native-avoid-softinput";
AvoidSoftInput.setShowAnimationDuration(800);
```
--------------------------------
### Configure Kotlin Version in app.json
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/docs/guides/INSTALLATION.mdx
Use the expo-build-properties plugin to set the Kotlin version in managed Expo projects.
```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
}
}
]
]
}
}
```
--------------------------------
### onSoftInputHeightChange Method
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/docs/api/module/ON_SOFT_INPUT_HEIGHT_CHANGE.mdx
This method allows you to subscribe to events where the soft input's height changes. It provides a callback function that receives the current height of the soft input.
```APIDOC
## onSoftInputHeightChange
### Description
Use `onSoftInputHeightChange` method to listen to events when the soft input's height changes.
### Method
N/A (This is a method call, not a direct HTTP request)
### Endpoint
N/A (This is a method call within a library)
### Parameters
#### Callback Function
- **callback** (function) - Required - A function that will be called with an object containing the `softInputHeight` when the soft input is displayed or its height changes. The function signature is `({ softInputHeight }: { softInputHeight: number }) => void`.
### Request Example
```ts
import { AvoidSoftInput } from "react-native-avoid-softinput";
const unsubscribe = AvoidSoftInput.onSoftInputHeightChange(
({ softInputHeight }) => {
// Do something with the softInputHeight
console.log(`Soft input height changed to: ${softInputHeight}`);
}
);
// To stop listening to events, call the remove method on the returned subscription object:
unsubscribe.remove();
```
### Response
#### Subscription Object
- **remove** (function) - A function that, when called, will unsubscribe the listener from height change events.
```
--------------------------------
### Set adjustResize mode
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/docs/api/module/SET_ADJUST_RESIZE.mdx
Configures the Android window soft input mode to adjustResize. Requires the AvoidSoftInput module to be imported.
```ts
import { AvoidSoftInput } from "react-native-avoid-softinput";
AvoidSoftInput.setAdjustResize();
```
--------------------------------
### Customize AvoidSoftInput Module Animation
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/docs/recipes/CUSTOM_CONFIG.mdx
Configure animation properties such as easing, hide/show delays, and durations for the AvoidSoftInput module. Ensure to reset configurations in the cleanup function.
```tsx
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',
},
});
```
--------------------------------
### Custom Reanimated Event Handler for Offset Changes
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/docs/recipes/ANIMATIONS.mdx
Create a custom event handler for Reanimated v2.3.0+ to manage `onSoftInputAppliedOffsetChange` events. This allows for fine-grained control over animations triggered by offset changes.
```js
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
);
}
```
--------------------------------
### Set adjustPan mode
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/docs/api/module/SET_ADJUST_PAN.mdx
Configures the window soft input mode to adjustPan. Requires the AvoidSoftInput module to be imported.
```ts
import { AvoidSoftInput } from "react-native-avoid-softinput";
AvoidSoftInput.setAdjustPan();
```
--------------------------------
### Subscribe to Soft Input Shown Events with useSoftInputShown
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/docs/api/hooks/USE_SOFT_INPUT_SHOWN.mdx
Use this hook to execute a callback function whenever the soft input (keyboard) is displayed. The callback receives the current soft input height. Ensure the hook is used within a React component.
```typescript
import { useSoftInputShown } from "react-native-avoid-softinput";
useSoftInputShown(({ softInputHeight }) => {
// Do sth
});
```
--------------------------------
### Enable Mimic iOS Behavior
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/docs/guides/INSTALLATION.mdx
Call this function to make Android mimic iOS keyboard behavior. It should be called early in your app's lifecycle, either globally or in specific screens.
```javascript
AvoidSoftInput.setShouldMimicIOSBehavior(true)
```
--------------------------------
### Set Android Keyboard Adjustment Behavior
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/docs/guides/INSTALLATION.mdx
Use these functions to control how the Android soft input window behaves. This is useful if you need to keep `adjustPan` for other parts of your app while using the library.
```javascript
AvoidSoftInput.setAdjust(Pan|Resize|Nothing|Unspecified)
```
--------------------------------
### Format JavaScript code
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/CONTRIBUTING.md
Automatically fix formatting errors in JavaScript and TypeScript files.
```sh
yarn format:js
```
--------------------------------
### Custom Reanimated Event Handler for Soft Input Events
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/docs/recipes/ANIMATIONS.mdx
Implement custom event handlers for Reanimated to manage `onSoftInputHidden`, `onSoftInputShown`, and `onSoftInputHeightChange` events. This provides a flexible way to integrate soft input events with Reanimated.
```js
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
);
}
```
--------------------------------
### Set Show Animation Delay
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/docs/api/module/SET_SHOW_ANIMATION_DELAY.mdx
Use setShowAnimationDelay to set a custom delay in milliseconds for the show offset animation. The default delay is 0ms.
```typescript
import { AvoidSoftInput } from "react-native-avoid-softinput";
AvoidSoftInput.setShowAnimationDelay(200);
```
--------------------------------
### Subscribe to Soft Input Offset Changes
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/docs/api/module/ON_SOFT_INPUT_APPLIED_OFFSET_CHANGE.mdx
Use this method to register a callback that will be invoked whenever the soft input's applied offset changes. Remember to call the returned unsubscribe function when you no longer need to listen for these changes.
```typescript
import { AvoidSoftInput } from "react-native-avoid-softinput";
const unsubscribe = AvoidSoftInput.onSoftInputAppliedOffsetChange(
({ appliedOffset }) => {
// Do sth
}
);
// Later invoke unsubscribe.remove()
```
--------------------------------
### AvoidSoftInputView Component Usage
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/docs/api/view/VIEW.mdx
This snippet demonstrates how to wrap your content with AvoidSoftInputView and configure its various props to control soft input behavior.
```APIDOC
## AvoidSoftInputView Component
### Description
Wrap your content inside `AvoidSoftInputView` to manage its position when the soft keyboard appears. This is particularly useful when your form is rendered inside a modal or when you want to avoid applying padding or translation to the React root view.
### Props
`AvoidSoftInputView` extends standard `View` props. Additionally, it accepts the following props:
#### Props Table
| 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
```tsx
import { AvoidSoftInputView } from "react-native-avoid-softinput";
{/** Content that should be pushed above the keyboard **/
;
```
```
--------------------------------
### Enable AvoidSoftInput module
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/docs/api/module/SET_ENABLED.mdx
Use this method to toggle the module's active state. It requires a boolean parameter to specify whether the module should be enabled.
```ts
import { AvoidSoftInput } from "react-native-avoid-softinput";
AvoidSoftInput.setEnabled(true);
```
--------------------------------
### Animate Soft Input Events with Hooks
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/docs/recipes/ANIMATIONS.mdx
Use shortcut hooks like `useSoftInputShown` and `useSoftInputHidden` within `useEffect` to animate UI elements based on soft keyboard events. Requires React Native's Animated API or Reanimated.
```tsx
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
);
};
```
--------------------------------
### Configure Kotlin Version in build.gradle
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/docs/guides/INSTALLATION.mdx
Specify the Kotlin version in your Android build configuration for bare React Native or prebuilt Expo projects.
```java
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
}
}
```
--------------------------------
### Set Android Window Soft Input Mode to Adjust Nothing
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/docs/api/module/SET_ADJUST_NOTHING.mdx
Use this function to set the `android:windowSoftInputMode` attribute to `adjustNothing`. This is useful when you want the keyboard to appear without affecting the layout of your application.
```typescript
import { AvoidSoftInput } from "react-native-avoid-softinput";
AvoidSoftInput.setAdjustNothing();
```
--------------------------------
### Use useSoftInputHidden Hook
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/docs/api/hooks/USE_SOFT_INPUT_HIDDEN.mdx
Use this hook to perform actions when the soft input is hidden. It takes a callback function as a parameter that will be executed upon hiding the keyboard.
```typescript
import { useSoftInputHidden } from "react-native-avoid-softinput";
useSoftInputHidden(() => {
// Do sth
});
```
--------------------------------
### Set adjustUnspecified mode
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/docs/api/module/SET_ADJUST_UNSPECIFIED.mdx
Configures the Android window soft input mode to adjustUnspecified. Requires the AvoidSoftInput module to be imported.
```ts
import { AvoidSoftInput } from "react-native-avoid-softinput";
AvoidSoftInput.setAdjustUnspecified();
```
--------------------------------
### setDefaultAppSoftInputMode
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/docs/api/module/SET_DEFAULT_APP_SOFT_INPUT_MODE.mdx
Use `setDefaultAppSoftInputMode` to set `android:windowSoftInputMode` to the default value declared in the Android manifest.
```APIDOC
## setDefaultAppSoftInputMode
### Description
Sets the Android `windowSoftInputMode` to its default value as defined in the AndroidManifest.xml.
### Method
JavaScript Function Call
### Endpoint
N/A (This is a module function)
### Parameters
None
### Request Example
```ts
import { AvoidSoftInput } from "react-native-avoid-softinput";
AvoidSoftInput.setDefaultAppSoftInputMode();
```
### Response
#### Success Response
This function does not return a value.
#### Response Example
N/A
```
--------------------------------
### onSoftInputHidden Event Listener
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/docs/api/module/ON_SOFT_INPUT_HIDDEN.mdx
This method allows you to subscribe to events triggered when the soft keyboard is hidden. It returns a function to unsubscribe from the event.
```APIDOC
## POST /onSoftInputHidden
### Description
Listens for events when the soft input (keyboard) is hidden.
### Method
POST
### Endpoint
/onSoftInputHidden
### Parameters
#### Query Parameters
- **callback** (function) - Required - The function to be called when the soft input is hidden.
### Request Example
```ts
import { AvoidSoftInput } from "react-native-avoid-softinput";
const unsubscribe = AvoidSoftInput.onSoftInputHidden(() => {
// Do sth when soft input is hidden
});
// To stop listening:
unsubscribe.remove();
```
### Response
#### Success Response (200)
- **unsubscribe** (function) - A function that, when called, removes the event listener.
#### Response Example
```json
{
"unsubscribe": "function"
}
```
```
--------------------------------
### setShowAnimationDuration
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/docs/api/module/SET_SHOW_ANIMATION_DURATION.mdx
Configures the duration of the show offset animation in milliseconds.
```APIDOC
## setShowAnimationDuration
### Description
Use the setShowAnimationDuration method to customize the duration of the show offset animation.
### Parameters
#### Parameters
- **duration** (number) - Optional (defaults to 660) - The duration of the show offset animation in milliseconds.
### Request Example
```ts
import { AvoidSoftInput } from "react-native-avoid-softinput";
AvoidSoftInput.setShowAnimationDuration(800);
```
```
--------------------------------
### Listen to soft input hidden events
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/docs/api/module/ON_SOFT_INPUT_HIDDEN.mdx
Register a callback to execute when the soft input is hidden. Remember to call the returned unsubscribe function to prevent memory leaks.
```ts
import { AvoidSoftInput } from "react-native-avoid-softinput";
const unsubscribe = AvoidSoftInput.onSoftInputHidden(() => {
// Do sth
});
// later invoke unsubscribe.remove()
```
--------------------------------
### Customize AvoidSoftInputView Component Animation
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/docs/recipes/CUSTOM_CONFIG.mdx
Configure animation properties like easing, hide/show delays, and durations directly via props on the AvoidSoftInputView component. Ensure the module is enabled when using this component.
```tsx
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',
},
});
```
--------------------------------
### Set Hide Animation Delay
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/docs/api/module/SET_HIDE_ANIMATION_DELAY.mdx
Use `setHideAnimationDelay` to customize the hide offset animation delay in milliseconds. Defaults to 0 on Android and 300 on iOS.
```typescript
import { AvoidSoftInput } from "react-native-avoid-softinput";
AvoidSoftInput.setHideAnimationDelay(100);
```
--------------------------------
### Subscribe to Soft Input Applied Offset Changes
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/docs/api/hooks/USE_SOFT_INPUT_APPLIED_OFFSET_CHANGED.mdx
Use this hook to execute a callback function whenever the soft input's applied offset changes. This is useful for performing actions based on the keyboard's visibility and position. Ensure the hook is imported from 'react-native-avoid-softinput'.
```typescript
import { useSoftInputAppliedOffsetChanged } from "react-native-avoid-softinput";
useSoftInputAppliedOffsetChanged(({ appliedOffset }) => {
// Do sth
});
```
--------------------------------
### useSoftInputAppliedOffsetChanged Hook
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/docs/api/hooks/USE_SOFT_INPUT_APPLIED_OFFSET_CHANGED.mdx
The `useSoftInputAppliedOffsetChanged` hook allows you to easily subscribe to changes in the soft input applied offset. It's a shortcut for using `AvoidSoftInput.onSoftInputAppliedOffsetChange` within a `useEffect` hook.
```APIDOC
## useSoftInputAppliedOffsetChanged Hook
### Description
This hook subscribes to soft input applied offset changes. It's a convenient wrapper around `AvoidSoftInput.onSoftInputAppliedOffsetChange` for use within React components.
### Method
Hook
### Parameters
#### Callback Function
- **callback** (function) - Required - A function that accepts an object with the `appliedOffset` property. This function is called whenever the soft input applied offset changes.
- **appliedOffset** (number) - The current value of the applied offset.
### Request Example
```ts
import { useSoftInputAppliedOffsetChanged } from "react-native-avoid-softinput";
useSoftInputAppliedOffsetChanged(({ appliedOffset }) => {
// Perform actions based on the appliedOffset value
console.log("Soft input applied offset changed to:", appliedOffset);
});
```
### Response
This hook does not return a value directly, but it executes the provided callback function when the soft input applied offset changes.
```
--------------------------------
### Using AvoidSoftInputView Component
Source: https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/docs/docs/api/view/VIEW.mdx
Wrap your form content with AvoidSoftInputView to ensure it remains visible when the soft keyboard is active. This is particularly useful for content within modals or when you don't want the root view to be translated. Configure animation and offset properties as needed.
```tsx
import { AvoidSoftInput } from "react-native-avoid-softinput";
{/** Content that should be pushed above the keyboard */}
;
```