Skip to main content
Version: 4.0.x

AvoidSoftInputView

Wrap your content inside AvoidSoftInputView, if your form is rendered inside modal or you don't want to apply padding, or translation to React root view.

Props

Extends View props

PropTypeDefault value
avoidOffsetnumber0
easingeaseIn or easeInOut or easeOut or linearlinear
enabledbooleantrue
hideAnimationDelaynumber0
hideAnimationDurationnumber220
onSoftInputAppliedOffsetChangefunction(e: { nativeEvent: { appliedOffset: number }})undefined
onSoftInputHeightChangefunction(e: { nativeEvent: { softInputHeight: number }})undefined
onSoftInputHiddenfunction(e: { nativeEvent: { softInputHeight: number }})undefined
onSoftInputShownfunction(e: { nativeEvent: { softInputHeight: number }})undefined
showAnimationDelaynumber300/0 (iOS/Android)
showAnimationDurationnumber660

Example

import { AvoidSoftInput } from "react-native-avoid-softinput";

<AvoidSoftInputView
avoidOffset={10}
easing="easeIn"
enabled={true}
hideAnimationDelay={100}
hideAnimationDuration={300}
onSoftInputShown={onSoftInputShown}
onSoftInputHidden={onSoftInputHidden}
onSoftInputHeightChange={onSoftInputHeightChange}
showAnimationDelay={100}
showAnimationDuration={800}
style={styles.avoidSoftInputView}
>
{/** Content that should be pushed above the keyboard */}
</AvoidSoftInputView>;