react-native-avoid-softinput

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

1. Installation
2. Usage
   • iOS
   • Android
   • Additional offset
   • Listening to events
   • Custom hooks
   • AvoidSoftInputView
   • android:windowSoftInputMode attribute (Android only)
3. Contributing
4. Licence

Installation

yarn add react-native-avoid-softinput

On iOS run additionally

npx pod-install

:warning: Library on iOS uses Swift. Make sure that your project has bridging header configured (the easiest way is to create empty .swift file 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

:warning: Do not enable module with adjustResize value 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