Skip to main content
Version: 6.0.x

Custom config recipe

Applied offset animation can be configured both when using AvoidSoftInput module and AvoidSoftInputView component.

To check how AvoidSoftInput API can be customized, go to CustomAnimationConfigModuleExample

packages/app/src/screens/CustomAnimationConfigModuleExample.tsx
import { useFocusEffect } from '@react-navigation/native';
import * as React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { AvoidSoftInput, useSoftInputState } from 'react-native-avoid-softinput';
import { SafeAreaView } from 'react-native-safe-area-context';

import SingleInput from '../components/SingleInput';

export const CustomAnimationConfigModuleExample: React.FC = () => {
const onFocusEffect = React.useCallback(() => {
AvoidSoftInput.setShouldMimicIOSBehavior(true);
AvoidSoftInput.setEnabled(true);
AvoidSoftInput.setEasing('easeOut');
AvoidSoftInput.setHideAnimationDelay(1000);
AvoidSoftInput.setHideAnimationDuration(600);
AvoidSoftInput.setShowAnimationDelay(1000);
AvoidSoftInput.setShowAnimationDuration(1200);
return () => {
AvoidSoftInput.setEasing('linear');
AvoidSoftInput.setHideAnimationDelay();
AvoidSoftInput.setHideAnimationDuration();
AvoidSoftInput.setShowAnimationDelay();
AvoidSoftInput.setShowAnimationDuration();
AvoidSoftInput.setEnabled(false);
AvoidSoftInput.setShouldMimicIOSBehavior(false);
};
}, []);

useFocusEffect(onFocusEffect);

const softInputState = useSoftInputState();

return <SafeAreaView edges={[ 'left', 'bottom', 'right' ]} style={styles.container}>
<View style={styles.contentContainer}>
<SingleInput placeholder="1" />
<View style={styles.spacer}>
<Text style={styles.label}>isVisible: {JSON.stringify(softInputState.isSoftInputShown)}</Text>
<Text style={styles.label}>height: {softInputState.softInputHeight}</Text>
</View>
</View>
</SafeAreaView>;
};

const styles = StyleSheet.create({
container: {
alignSelf: 'stretch',
flex: 1,
},
contentContainer: {
alignSelf: 'stretch',
flexDirection: 'column-reverse',
flexGrow: 1,
},
label: {
color: 'blue',
fontSize: 18,
fontWeight: 'bold',
},
spacer: {
alignItems: 'center',
backgroundColor: 'pink',
flex: 1,
justifyContent: 'center',
},
});

To check how AvoidSoftInputView props can be used, go to CustomAnimationConfigViewExample

packages/app/src/screens/CustomAnimationConfigViewExample.tsx
import { useFocusEffect } from '@react-navigation/native';
import * as React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { AvoidSoftInput, AvoidSoftInputView } from 'react-native-avoid-softinput';
import { SafeAreaView } from 'react-native-safe-area-context';

import SingleInput from '../components/SingleInput';

export const CustomAnimationConfigViewExample: React.FC = () => {
const onFocusEffect = React.useCallback(() => {
AvoidSoftInput.setShouldMimicIOSBehavior(true);
AvoidSoftInput.setEnabled(true);
return () => {
AvoidSoftInput.setEnabled(false);
AvoidSoftInput.setShouldMimicIOSBehavior(false);
};
}, []);

useFocusEffect(onFocusEffect);

return <SafeAreaView edges={[ 'left', 'bottom', 'right' ]} style={styles.container}>
<AvoidSoftInputView
easing="easeOut"
hideAnimationDelay={1000}
hideAnimationDuration={600}
showAnimationDelay={1000}
showAnimationDuration={1200}
style={styles.contentContainer}>
<SingleInput placeholder="1" />
<View style={styles.spacer}>
<Text style={styles.label}>SPACER</Text>
</View>
</AvoidSoftInputView>
</SafeAreaView>;
};

const styles = StyleSheet.create({
container: {
alignSelf: 'stretch',
flex: 1,
},
contentContainer: {
alignSelf: 'stretch',
flexDirection: 'column-reverse',
flexGrow: 1,
},
label: {
color: 'blue',
fontSize: 18,
fontWeight: 'bold',
},
spacer: {
alignItems: 'center',
backgroundColor: 'pink',
flex: 1,
justifyContent: 'center',
},
});