How to Avoid Keyboard Pushing Layout Up on Android React-Native

How do I prevent keyboard from pushing overlay view up?

My solution to this problem :

import React , {Component} from 'react';
import {View , Dimensions,ScrollView} from 'react-native';

const windowHeight = Dimensions.get('window').height;

export default class Items extends Component {
render(){
return(
<View style={{flex:1}}>
<ScrollView style={{flex:1}}>
<View style={{width:'100%', height:windowHeight }}>
/*Every thing inside this will shift up with out changing style */
</View>
</ScrollView>
</View>
)
}
}

How to avoid Soft Keyboard from pushing Buttons up in Android (iOS is OK)

This worked for me,

setting

 android:windowSoftInputMode="adjustResize"

and using KeyboardAvoidingView component from react-native to automatically adjust the views to keyboard

 <KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
style={{flex: 1}}>
<ScrollView
keyboardShouldPersistTaps="handled">
...
<TextInput />
...
</ScrollView>
<Button>Save</Button>
</KeyboardAvoidingView>


Related Topics



Leave a reply



Submit