Why FlatList is not updating dynamically in React Native

Question

I'm very new to react native and I'm trying to update list dynamically.

Below is my code:

import React, { Component } from "react";
import { View, Text, StyleSheet, FlatList } from "react-native";
import { Tile, ListItem, List } from "react-native-elements";


export default class JoinSession extends Component {

    constructor() {
        super();

        this.state = {
            dataToRender: [{ "id": "0", "name": "name0", "des": "des0" }]
        }
    }

    componentDidMount() {   
        var counter = 0;
        const interval = setInterval(() => {
            try {
                var temp = {
                    "id": ++counter + "",
                    "name": "name" + counter,
                    "des": "des" + counter
                }

                let tempArray = this.state.dataToRender;
                tempArray.push(temp);

                this.setState({
                    dataToRender: tempArray
                });

                console.log(this.state.dataToRender);

                if(counter === 10) {
                    clearInterval(interval);
                }
            } catch (e) {
                console.log(e.message);
            }
        }, 2000);
    }

    renderList(item) {
        console.log(item);

        return (
            <ListItem
                roundAvatar
                title={item.name}
                subtitle={item.des}
            />
        );
    }

    render() {
        return (
            <View style={{ flex: 1, alignItems: "stretch", backgroundColor: "skyblue" }}>
                <List>

                    <FlatList
                        data={this.state.dataToRender}
                        renderItem={({ item }) => this.renderList(item)}
                        keyExtractor={item => item.id}
                    />
                </List>
            </View>
        );
    }
}

I am only able to get first element which I've declared in the constructor but data which I'm appending in serInterval is not showing up on the page.

Please help me to resolve it or if there is any other way to do it, please let me know.

Thanks in advance.

Answer 1

Hi try to have a look on the extraData parameter you can use on a FlatList:

By passing extraData={this.state} to FlatList we make sure FlatList itself will re-render when the state.selected changes. Without setting this prop, FlatList would not know it needs to re-render any items because it is also a PureComponent and the prop comparison will not show any changes.

<FlatList
 ...
 extraData={this.state}
/>

More info on the FlatList documentation: https://facebook.github.io/react-native/docs/flatlist.html

Also you shouldn't need this <List> from react native element here the list behaviour is totally handle by your FlatList.