I'm having difficulty scrolling the flatlist in 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.

question from:https://stackoverflow.com/questions/66058698/im-having-difficulty-scrolling-the-flatlist-in-react-native

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>
                            )}
                        />