How to have elements automatically relocate themselves when one element changes its size in react native? - react-native

Question

I currently have a multiline textInput that automatically expands and a button below it. The problem is that the button's location seems to be fixed, it doesn't move down and textInput would just run over it.
Everything is wrapped in a KeyboardAvoidingView:
<KeyboardAvoidingView
style={styles.container}
behavior="padding">
<StatusBar barStyle="light-content"/>
<Text style={styles.title}>{this.state.form.prompt}</Text>
<View style={styles.simpleContainer}>
{this._renderForms()}
<View style={[styles.forwardButtonLocation, styles.indentLeft]}>
<ForwardButton
onButtonPress={this._submitInfo}
/>
</View>
</View>
<View style={{flex: 1, justifyContent: 'flex-end', alignItems: 'flex-end',}}>
<SkipButton
onButtonPress={this._nextState}
/>
</View>
</KeyboardAvoidingView>
this._renderForms() renders the corresponding form for each state, in this case, it renders:
<View style={styles.simpleContainer}>
<AutoExpandingTextInput
style={styles.textContentDark}
placeholder={this.state.form.userInput}
placeholderTextColor={DARK_THEME_CONTENT_COLOR_SECONDARY}
onChangeText={(userInputValue) =>
//TODO: Saving text to nested userInput is causing problem, temporarily save it to userInputValue
//this.setState({form: {...this.state.form, userInput: text}}
this.setState({userInputValue}
)}
/>
</View>
Here is my style sheet:
const styles = StyleSheet.create({
simpleContainer: {
flex:1,
justifyContent: 'center',
},
container: {
flex: 1,
justifyContent: 'space-between',
backgroundColor: THEME_COLOR,
},
title: {
flex: 1,
marginTop: '15%',
marginLeft: '3%',
fontWeight: 'bold',
fontSize: TITLE,
color: DARK_THEME_CONTENT_COLOR_PRIMARY,
},
textContentDimmed: {
fontSize: TITLE_SECONDARY,
color: DARK_THEME_CONTENT_COLOR_SECONDARY,
},
textContentWhite: {
fontSize: TITLE_SECONDARY,
color: DARK_THEME_CONTENT_COLOR_PRIMARY,
},
textContentDark: {
fontSize: TITLE_SECONDARY,
color: LIGHT_THEME_CONTENT_COLOR_SECONDARY,
},
indentLeft: {
marginLeft:'10%',
},
forwardButtonLocation: {
flex: 1,
justifyContent: 'flex-start',
},
whiteLine: {
width: '100%',
height: 1,
marginTop: 4,
marginHorizontal: '6%',
backgroundColor: DARK_THEME_CONTENT_COLOR_PRIMARY,
},
});
Is there any way to automatically relocate the button when the size of the textInput changes?