Skip to main content
Version: 4.0.x

Usage - module

The preferrable usage of the module is to enable it where it's actually needed.

Depending on the navigation setup you have, check the navigation's library documentation for correct way to run some actions when the screen gains/loses focus.

The following example assumes react-navigation is used as a navigation:

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.setShouldMimicIOSBehavior(true);
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);
AvoidSoftInput.setShouldMimicIOSBehavior(false);
};
}, []);

useFocusEffect(onFocusEffect); // register callback to focus events

return <ScrollView>
<View>
<TextInput placeholder="Single line input" />
<TextInput placeholder="Multiline input" />
<TextInput placeholder="Large multiline input" />
</View>
<View>
<Button
onPress={NOOP}
title="Submit"
/>
</View>
</ScrollView>;
};