I'm having difficulty scrolling the flatlist in react native - react-native

Question

export default class Chat extends Component {
constructor(props) {
super(props);
this.state = {
chatMessage: "",
chatMessages: [],
roomId: props.route.params.roomId,
keyboardHeight: 0
};
}
componentDidMount() {
if (Platform.OS === "ios") {
Keyboard.addListener("keyboardWillShow", (e) => {
this.setState({ keyboardHeight: e.endCoordinates.height + 5 });
});
Keyboard.addListener("keyboardWillHide", () => {
this.setState({ keyboardHeight: 0 });
});
}
// Socket.io code ...
}
componentWillUnmount() {
if (Platform.OS === "ios") {
Keyboard.removeListener("keyboardWillShow", (e) => {
this.setState({ keyboardHeight: e.endCoordinates.height + 5 });
});
Keyboard.removeListener("keyboardWillHide", () => {
this.setState({ keyboardHeight: 0 });
});
}
this.socket.disconnect();
}
submitChatMessage() {
if (this.state.chatMessage.trim()) {
this.socket.emit("chat message", this.state.chatMessage);
this.setState({ chatMessage: "" });
}
}
render() {
return (
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<SafeAreaView style={{flex:1}}>
<View
style={{
flex:1,
width: "100%",
height:"90%"
}}
>
<FlatList
style={{ padding: 10, height:"98%", maxHeight: "98%" }}
data={this.state.chatMessages}
renderItem={(itemData) => (
<View>
<Text>{itemData.item.value}</Text>
</View>
)}
/>
</View>
<View
style={{
height:
Platform.OS === "ios"
? this.state.keyboardHeight + 20
: 20,
position: "absolute",
bottom: 0,
width: "100%",
backgroundColor: "grey"
}}
>
<TextInput
style={{
borderColor: "grey",
borderWidth: 0.75,
borderRadius: 30
}}
autoCorrect={false}
value={this.state.chatMessage}
onSubmitEditing={() => this.submitChatMessage()}
onChangeText={(chatMessage) => {
this.setState({ chatMessage });
}}
/>
</View>
</SafeAreaView>
</TouchableWithoutFeedback>
);
}
}
I was able to scroll through the FlatList easily but when I added event listeners to the keyboard so I can use it instead of a KeyboardAvoidingView component it stopped letting me scroll easily (it still scrolls but you have to try a lot).
I switched to changing the padding on the text input manually because the KeyboardAvoidingView component wasn't working properly.

Answer 1

Replace this :
<View
style={{
flex:1,
width: "100%",
height:"90%"
}}
>
<FlatList
style={{ padding: 10, height:"98%", maxHeight: "98%" }}
data={this.state.chatMessages}
renderItem={(itemData) => (
<View>
<Text>{itemData.item.value}</Text>
</View>
)}
/>
</View>
with that
<FlatList
contentContainerStyle={{padding: 10}}
style={{ height:"90%", alignSelf : "stretch" }}
data={this.state.chatMessages}
renderItem={(itemData) => (
<View>
<Text>{itemData.item.value}</Text>
</View>
)}
/>