Skip to main content
Version: 1.7.0

Building own hook

Default hooks may not perfectly fit in your app, because it changes/restores softInputMode on mount/unmount of the component where it's used. Though in deep stacks sometimes it may be important to have different softInputMode per screen, but by default react-navigation keeps previous screens mounted, so if you are using default useKeyboardAnimation hook, then all following screens will have softInputMode=adjustResize.

To prevent such behavior you can write own hook based on primitives from this library. The implementation may look like:

import { useContext, useCallback } from "react";
import { useFocusEffect } from "@react-navigation/native";
import {
KeyboardController,
AndroidSoftInputModes,
useKeyboardContext,
} from "react-native-keyboard-controller";

function useKeyboardAnimation() {
useFocusEffect(
useCallback(() => {
KeyboardController.setInputMode(
AndroidSoftInputModes.SOFT_INPUT_ADJUST_RESIZE,
);

return () => KeyboardController.setDefaultMode();
}, []),
);

const context = useKeyboardContext();

return context.animated;
}

In this case when screen becomes invisible hook will restore default softInputMode, and softInputMode will be set to adjustResize only on the screen where it's used.