How to center a TextInput when the keyboard opens in React Native - react-native

Question

I have a view with 3 textinput and I am trying to center them when the keyboard is opened. I already tried with KeyboardAvoidingView and the result is that all, except the save button disappear. What am I doing wrong?
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet,
TextInput,
ScrollView,
ListView,
KeyboardAvoidingView,
TouchableOpacity,
AsyncStorage,
} from 'react-native';
import Note from './Note.js';
export default class NoteBody extends Component {
static navigationOptions = {
header: null,
};
constructor(props){
super(props);
this.state = {
noteText: '',
noteTitle: '',
callType: '',
};
}
render() {
return (
<View style={styles.container}>
<View style={styles.header1}>
<Text style={styles.title}>New Note</Text>
</View>
<View style={styles.headerDesign}>
</View>
<View style={styles.header2}>
</View>
<View style= {styles.mainPage}>
<View style={styles.noteBody}>
<TextInput
style = {styles.subject}
placeholder='Raport Number/Note Indentifier'
onChangeText={(noteTitle)=> this.setState({noteTitle})}
value={this.state.noteTitle}
placeholderTextColor='grey'
underlineColorAndroid='transparent'>
</TextInput>
<TextInput
style = {styles.calltype}
multiline = {true}
numberOfLines = {5}
placeholder='Call Type/Other Information'
onChangeText={(callType)=> this.setState({callType})}
value={this.state.callType}
placeholderTextColor='grey'
underlineColorAndroid='transparent'>
</TextInput>
<TextInput
multiline = {true}
numberOfLines = {8}
style={styles.textInput}
placeholder='Notes'
onChangeText={(noteText)=> this.setState({noteText})}
value={this.state.noteText}
placeholderTextColor='grey'
underlineColorAndroid='transparent'>
</TextInput>
</View>
<View style= {styles.footer}>
<TouchableOpacity onPress={ this.addNote.bind(this) } style={styles.addButton}>
<Text style={styles.addButtonText}>SAVE</Text>
</TouchableOpacity>
</View>
</View>
</View>
);
}
addNote(){
const { navigate } = this.props.navigation;
if(this.state.noteText && this.state.noteTitle && this.state.callType){
var d = new Date();
this.props.navigation.state.params.noteArray.push({
'noteName':this.state.noteTitle,
'date':(d.getMonth()+1)+
"/"+d.getDate() +
"/"+ d.getFullYear(),
'callType': this.state.callType,
'note': this.state.noteText
});
this.setState({ noteArray: this.props.navigation.state.params.noteArray });
this.setState({noteText:''});
this.setState({noteTitle:''});
this.setState({callType:''});
AsyncStorage.setItem('arr', JSON.stringify(this.props.navigation.state.params.noteArray));
this.props.navigation.state.params.onNavigateBack();
this.props.navigation.goBack();
}
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
mainPage:{
flex: 2,
alignItems: 'center',
justifyContent:'center',
},
header1:{
backgroundColor: '#000',
alignItems: 'center',
height: 40,
justifyContent: 'center',
},
title:{
color: '#fff',
fontSize: 20,
},
header2:{
marginBottom: 10,
backgroundColor: '#000',
alignItems: 'center',
height: 40,
justifyContent: 'center',
},
headerDesign:{
backgroundColor: '#0000FF',
alignItems: 'center',
height: 20,
justifyContent: 'center',
},
noteBody:{
flex: 2,
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
zIndex: 10,
alignItems: 'center',
marginBottom: 100,
},
textInput: {
alignSelf: 'stretch',
textAlignVertical: 'top',
backgroundColor: '#fff',
color: '#000',
padding: 20,
borderTopWidth:1,
borderTopColor: '#D3D3D3',
borderBottomWidth:1,
borderBottomColor: '#000',
},
addButton: {
position: 'absolute',
zIndex: 11,
bottom: 20,
alignItems: 'center',
justifyContent: 'center',
width: 200,
backgroundColor: '#0000FF',
height: 40,
elevation: 8
},
addButtonText: {
color: '#fff',
fontSize: 20,
},
subject:{
alignSelf: 'stretch',
textAlignVertical: 'top',
backgroundColor: '#fff',
padding: 20,
borderTopWidth:1,
borderTopColor: '#000',
borderBottomWidth:1,
borderBottomColor: '#D3D3D3',
},
calltype:{
alignSelf: 'stretch',
textAlignVertical: 'top',
backgroundColor: '#fff',
padding: 20,
},
footer:{
flex: 3,
alignItems: 'center',
justifyContent:'center',
}
});
Please, copy the code in your text editor and give it a try. Just replace the wrapping view with KeyboardAvoidingView like so: https://facebook.github.io/react-native/docs/keyboardavoidingview.html#keyboardverticaloffset and tell me what else can I do?

Answer 1

You must insert the KeyboardAvoidingView in a ScrollView.
Like so:
<ScrollView>
<KeyboardAvoidingView styles={styles.container} behavior = 'padding' enabled>
</KeyboardAvoidingView>
</ScrollView>