I have used react-native-parallax-header npm for the parallax effect. Inside parallax, I have used flatlist.
Every time When I add a new category flatlist should reload the items fetched from API but in my case, it does not list all items. it shows only the last two items of the array. My array values contain 10 items but it shows only 2 items.
Here is the code for flatlist:
const renderContent = (label) => (
<View style={{ backgroundColor: '#FBFCFF', top: -10 }}>
<CategoryListView>
{this.state.categories && <FlatList
horizontal={false}
data={this.state.categories}
contentContainerStyle={{ paddingBottom: 20 }}
refreshControl={
<RefreshControl refreshing={refreshing} onRefresh={this.loadCategories} />
}
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={true}
renderItem={({ item }) => { return <CardActivity gotoCategoryDetail={this.gotoCategoryDetail} key={item._id} category={item}></CardActivity> }}
keyExtractor={(item) => item._id}
/>}
</CategoryListView>
</View>
)
Here is the code for the get category list
loadCategories = async () => {
this.setState({ refreshing: true });
let categories = await this.props.getCategories();
console.log(categories)
this.setState({ categories, lastFetchCategoriesTime: new Date() });
};
Here is the constructor code
constructor(props) {
super(props);
this.state = {
categories: [],
refreshing: false,
scrollEnd: false,
}
this.loadCategories();
const { navigation } = this.props;
this.focusListener = navigation.addListener("focus", () => {
// Call ur function here.. or add logic.
console.log(':::this will fire every time Page 1 receives navigation focus:::');
this.loadCategories();
});
};
Any help is much appreciated pls...