React Native List Footer Component does not work

Question

I'm working on React native. I'm using FlatList. I want to show the loading bar as I go down. I wrote the code for that.

I've reviewed the documentation, but it's not working. I guess I'm making a mistake at the await. I don't know how to use it. What is the difference of async? I'm leaving the code sample below.

Thanks in advance for your help.

handleRefresh = () => {
    this.setState({
      offset: 0,
      maxSize: 10,
      isSearch: false,
      isLoading: true,
      isRefreshing: true
    }, () => {
        this.loadData();
    });
};

handleLoadMore = () => {
    this.setState({            
        maxSize: this.state.maxSize + 5,
        isSpinner: true
    }, () => {
        this.loadData();
    });
};

keyExtractor = (item, index) => index.toString();

renderFooter = () => {
    if(this.state.isSpinner === false) { return null; }

    return (
        <View style={{ paddingVertical: 20 }}>
            <ActivityIndicator animating size="small" />
        </View>
    );
};

loadData = async () => {
    try {
        const { offset, maxSize } = this.state;            

        const username = await AsyncStorage.getItem('username');
        const token = await AsyncStorage.getItem('token');

        var credentials = Base64.btoa(username + ':' + token);
        var URL         = `http://demo.espocrm.com/advanced/api/v1/Lead?sortBy=createdAt&asc&offset=${offset}&maxSize=${maxSize}`;            

        axios.get(URL, {headers : { 'Espo-Authorization' : credentials }})
        .then(this.dataSuccess.bind(this))
        .catch(this.dataFail.bind(this));
    } catch (error) {
        Alert.alert(
            'Hata',
            'Bir hata meydana geldi. Lütfen yöneticiye başvurunuz.',
            [
                { text: 'Tamam', onPress: () => null }
            ]
        );
    }
};

dataSuccess(response) {        
    this.setState({ isRefreshing: false, isSpinner: false, isLoading: false, leadList: response.data.list });
}

dataFail(error) {
    this.setState({ isLoading: false });

    Alert.alert(
        'Hata',
        'Beklenmedik bir hata oluştu',
        [
            { text: 'Tamam', onPress: () => null }
        ]
    );
}

render() {
    const { isLoading, isRefreshing, searchText, leadList } = this.state;        
    return(
        <View style={styles.container}>
            <SearchBar 
                placeholder="Bir lead arayın..."
                onChangeText={this.searchLead.bind(this)}
                onClear={this.handleRefresh}
                onCancel={this.loadData}
                value={searchText}
            />
            {
                isLoading ? <ActivityIndicator style={styles.loading} size="large" color="orange" /> :
                        <FlatList
                            data={leadList}
                            ListFooterComponent={this.renderFooter}
                            renderItem={({item}) =>
                                <ListItem
                                    leftAvatar={{ source: { uri: 'https://pbs.twimg.com/profile_images/567081964402790401/p7WTZ0Ef_400x400.png' } }}
                                    title={item.name}
                                    subtitle={item.status}
                                    bottomDivider={true}
                                />
                            }
                            keyExtractor={this.keyExtractor}
                            refreshing={isRefreshing}
                            onRefresh={this.handleRefresh}
                            onEndReached={this.handleLoadMore}
                            onEndReachedThreshold={0.5}
                        />
            }
        </View>
    )
}
}

Answer 1

In your FlatList component, you need to include an attribute called extraData and set that to this.state so the component will update.

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