react-native-avoid-softinput
Native solution for common React Native problem of focused views being covered by soft input view. It is solved by listening for soft input events and applying translation to react root view (or bottom padding if focused element's parent is scroll view) entirely on native side and only if currently focused view is covered by soft input frame. It supports focused views being positioned in scroll views and regular views (check out example app). It also supports modal content, when content is wrapped in AvoidSoftInputView
Table of Contents
Installation
yarn add react-native-avoid-softinput
On iOS run additionally
npx pod-install
⚠️ Library on iOS uses Swift. Make sure that your project has bridging header configured (the easiest way is to create empty.swiftfile in XCode, which will offer to create bridging header)
Usage
iOS
Enable module:
import React from "react";
import { AvoidSoftInput } from "react-native-avoid-softinput";
//...
React.useEffect(() => {
AvoidSoftInput.setEnabled(true);
}, []);
//...
Android
Enable module:
Before using module on Android, check if system support (android:windowSoftInputMode="adjustResize" in Android manifest for <activity> tag) is enough for your use case.
If you cannot use system support, then enable module and set android:windowSoftInputMode attribute to adjustNothing either in manifest or programmatically with setAdjustNothing method
⚠️ Do not enable module withadjustResizevalue set, as it will result in padding being applied to already resized android window
import React from "react";
import { AvoidSoftInput } from "react-native-avoid-softinput";
//...
React.useEffect(() => {
AvoidSoftInput.setAdjustNothing();
AvoidSoftInput.setEnabled(true);
}, []);
//...
Additional offset
If you want to increase/decrease amount of translation/padding applied to react root view/scroll view, you can use setAvoidOffset method
import React from "react";
import { AvoidSoftInput } from "react-native-avoid-softinput";
//...
AvoidSoftInput.setAvoidOffset(40); // It will result in applied value 40dp greater than standard one
//...
:warning Value applied to that method is persisted, so if you want to use that in a single use case, remember to clear it (just pass 0 as an argument)
Listening to events
If you want to listen to events when soft input is shown/hidden:
import React from "react";
import { AvoidSoftInput } from "react-native-avoid-softinput";
//...
React.useEffect(() => {
const unsubscribeShown = AvoidSoftInput.onSoftInputShown(
({ softInputHeight }) => {
console.log("soft input shown", softInputHeight); // Soft input is shown with height
}
);
const unsubscribeHidden = AvoidSoftInput.onSoftInputHidden(() => {
console.log("soft input hidden"); // Soft input is hidden
});
return () => {
unsubscribeShown.remove();
unsubscribeHidden.remove();
};
}, []);
//...
Custom hooks
Library provides custom hooks:
useSoftInputHidden
A shortcut for using AvoidSoftInput.onSoftInputHidden method inside useEffect
import React from "react";
import { useSoftInputHidden } from "react-native-avoid-softinput";
//...
useSoftInputHidden(() => {
console.log("soft input hidden"); // Soft input is hidden
});
//...
useSoftInputShown
A shortcut for using AvoidSoftInput.onSoftInputShown method inside useEffect
import React from "react";
import { useSoftInputShown } from "react-native-avoid-softinput";
//...
useSoftInputShown(({ softInputHeight }) => {
console.log("soft input shown", softInputHeight); // Soft input is shown with height
});
//...
useSoftInputState
It returns object with properties determining whether soft input is shown and how much screen it covers
import React from "react";
import { useSoftInputState } from "react-native-avoid-softinput";
//...
const { isSoftInputShown, softInputHeight } = useSoftInputState();
//...
AvoidSoftInputView
If your form is rendered inside modal, wrap your modal content inside AvoidSoftInputView. It will manage whether form's content should be pushed above soft input frame. It accepts regular view props with addition of avoidOffset prop and onSoftInputShown and onSoftInputHidden callbacks
import React from "react";
import { Modal } from "react-native";
import { AvoidSoftInput } from "react-native-avoid-softinput";
const MyComponent = () => {
//...
function onSoftInputShown(e) {
console.log(e.nativeEvent.softInputHeight);
// Do sth
}
//...
function onSoftInputHidden() {
// Do sth
}
//...
return (
//...
<Modal {...modalProps}>
<AvoidSoftInputView
avoidOffset={10}
onSoftInputShown={onSoftInputShown}
onSoftInputHidden={onSoftInputHidden}
style={styles.avoidSoftInputView}
>
<View>{/** Rest of form's content */}</View>
</AvoidSoftInputView>
</Modal>
//...
);
};
android:windowSoftInputMode attribute (Android only)
Library exposes methods for managing android:windowSoftInputMode value:
setAdjustNothing
Sets android:windowSoftInputMode to adjustNothing value
import { AvoidSoftInput } from "react-native-avoid-softinput";
//...
AvoidSoftInput.setAdjustNothing();
//...
setAdjustPan
Sets android:windowSoftInputMode to adjustPan value
import { AvoidSoftInput } from "react-native-avoid-softinput";
//...
AvoidSoftInput.setAdjustPan();
//...
setAdjustResize
Sets android:windowSoftInputMode to adjustResize value
import { AvoidSoftInput } from "react-native-avoid-softinput";
//...
AvoidSoftInput.setAdjustResize();
//...
setAdjustUnspecified
Sets android:windowSoftInputMode to adjustUnspecified value
import { AvoidSoftInput } from "react-native-avoid-softinput";
//...
AvoidSoftInput.setAdjustUnspecified();
//...
setDefaultAppSoftInputMode
sets android:windowSoftInputMode to default value from Android manifest
import { AvoidSoftInput } from "react-native-avoid-softinput";
//...
AvoidSoftInput.setDefaultAppSoftInputMode();
//...
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT
![[ios] On iOS keyboard focusing/dismissal will very ocassionally cause the root view to shrink its height](https://avatars.githubusercontent.com/u/19533289?v=4)
![[Android] compileSdkVersion=33 prevents build](https://avatars.githubusercontent.com/u/90613?v=4)
94 Jan 1, 2023
512 Nov 20, 2022
190 Oct 16, 2022
57 Dec 8, 2022
1.4k Dec 29, 2022
6 Aug 29, 2022
2.9k Dec 27, 2022
476 Nov 11, 2022
54 Nov 8, 2022
51 Jan 3, 2023
1.2k Jan 3, 2023
5 Sep 13, 2022
6 Dec 19, 2022
4 Nov 29, 2022
19 Dec 30, 2022
225 Nov 29, 2022
18 Jul 7, 2022
5 Dec 18, 2022
6 Dec 2, 2022