Slide up fixed footer with input text when keyboard appears - keyboard

Question

I'm trying to slide up some part of my app.
I searched for some info and I found out this post here in Stackoverflow -> How to auto-slide the window out from behind keyboard when TextInput has focus?
The thing is that my app is a little bit different and I don't know where to put the Scrollview tags.
I got this distribution:
<View style={ styles.container }>
<View style={ styles.header }>
<View style={ styles.headerTextContainer }>
<Text style={ styles.headerText } onPress={() => this.refs.listView.getScrollResponder().scrollTo(0) }>Parte { this.props.partNumber } - { this.state.totalComments } comentarios</Text>
</View>
</View>
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderComment}
style={ styles.content }
ref="listView" />
<View style={ styles.footer }>
<View style={ styles.footerTextInputContainer }>
<TextInput
style={ styles.footerTextInput }
onChangeText={(text) => console.log(text) }
placeholder="Escribe un comentario" />
</View>
<TouchableHighlight onPress={() => console.log("SEND COMMENT") } underlayColor="#ffffff">
<View style={ styles.footerSendButtonContainer }>
<Text style={ styles.footerSendButton }>Enviar</Text>
</View>
</TouchableHighlight>
</View>
</View>
The only thing I want to slide up when keyboard appears is the footer View.
I hope someone can help me out.
Thank you :)

Answer 1

I was be able to do it by using this component: react-native-keyboard-spacer
Thanks!

Answer 2

This is my solution:
const [keyboardHeight, setKeyboardHeight] = useState("10%");
useEffect(() => {
const keyboardDidShowListener = Keyboard.addListener(
'keyboardDidShow',
() => {
setKeyboardHeight("15%"); // or some other action
}
);
const keyboardDidHideListener = Keyboard.addListener(
'keyboardDidHide',
() => {
setKeyboardHeight("10%"); // or some other action
}
);
return () => {
keyboardDidHideListener.remove();
keyboardDidShowListener.remove();
};
}, []);
And in the view:
<View style={[globalStyles.footer, {height: keyboardHeight}]}>
//PUT YOUR VIEW FOOTER HERE
</View>