Menu
I am fetching products list and then displaying using a FlatList, my list contains 5 items and as you can see FlatList row height is variable because of varying description text. So the issue is my last item card is not completely visible maybe this is some kind of flat list issue or layout issue. Any help would be highly appreciated
renderProducts() { if (this.props.loading === true) { return ( <View style={Styles.spinnerStyle}> <ActivityIndicator size='large' /> </View> ); } return ( <FlatList data={this.props.myProducts} keyExtractor={(item) => item.id} renderItem={({ item }) => ( <Card title={item.title} image={{ uri: item.image !== null ? item.image.src :'../resImage.jpg' }} > <Text style={{ marginBottom: 10 }}> {item.body_html} </Text> <Button icon={{ name: 'code' }} backgroundColor='#03A9F4' fontFamily='Lato' buttonStyle={{ borderRadius: 0, marginLeft: 0, marginRight: 0, marginBottom: 0 }} title='VIEW NOW' /> </Card> )} /> ); } render() { return ( <View> <View style={Styles.viewStyle}> <Text style {Styles.textStyle}>ProductsList</Text> </View> { this.renderProducts() } </View> ); } 
216
You can use FlatList's ListFooterComponent prop to render some JSX or a component at the end of the list. If you need to know that you are at the end of the list within renderItem , you can check the index in the metadata provided to renderItem against the length of data . Thanks for the detailed answer.
keyExtractor (item: object, index: number) => string; Used to extract a unique key for a given item at the specified index. Key is used for caching and as the react key to track item re-ordering. The default extractor checks item. key , then item.id , and then falls back to using the index, like React does.
To implement pull to refresh FlatList with React Native, we can set the refreshing and onRefresh props. to set the refreshing prop to isFetching , which is true when we're getting data for the FlatList . And we set onRefresh to the onRefresh which sets refreshing to true and then set it back to false after 2 seconds.
In 2020, onEndReachedThreshold represents the number of screen lengths you should be from the bottom before it fires the event. I use onEndReachedThreshold={2} to fire onEndReached when I'm two full screen lengths away. Follow this answer to receive notifications.
Set bottom padding to the <FlatList> content container:
<FlatList contentContainerStyle={{ paddingBottom: 20 }} /> Add {flex: 1} to the View tag housing the Flatlist component.
In my case,
const App = () => { return ( <Provider store={createStore(reducers)}> <View style={{ flex: 1 }}> <Header headerText={'My App'} /> <ScreenTabs /> // this is my content with FlatList </View> </Provider> ); }; export default App; If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With