React Native Flatlist ListHeaderComponent 未在 state 更改上呈现

Question

I have Flatlist with ListHeaderComponent. When state is updated ListHeaderComponent is not updating. Any suggestion would be helpful.

                    <Animated.FlatList data={this.props.store.homeStore.formattedEspeciallyProducts}
                        contentContainerStyle={styles.flatList}
                        ref={(ref) => this.flatList = ref}
                        onScroll={
                            Animated.event(
                                [{nativeEvent: {contentOffset: {y: this.scrollY}}}], 
                                {
                                    useNativeDriver: true
                                }
                            )
                        }
                        renderItem={({ item, index }) => {
                            return(
                                <SpecialProduct product={item} even={(index + 1) % 2 === 0}/>
                            )
                        }}    
                        showsVerticalScrollIndicator={false}
                        keyExtractor={item => item.id}
                        numColumns={2}
                        onEndReached={this._onEndReached}
                        onEndReachedThreshold={0.5}
                        ItemSeparatorComponent={this._itemSeparatorComponent}
                        removeClippedSubviews={true}
                        columnWrapperStyle={{paddingHorizontal: 15}}
                        extraData={language}
                        ListHeaderComponent={
                            <View style={CssHelper['flex']}>
                                <View style={styles.top}>

Answer 1

Since Flatlist is a PureComponent it will not rerender on state changes. Pass your state to the data property to achieve state awareness https://reactnative.dev/docs/flatlist#data