FlatList renders only 10 items when in BottomNavigation

Current behaviour

When one of the items in renderScene is a FlatList, only the first 10 (or initialNumToRender) items are rendered.

Expected behaviour

The same number of items rendered by the FlatList as if the FlatList is rendered outside of BottomNavigation.

Code sample

import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    FlatList
} from 'react-native';
import { BottomNavigation } from 'react-native-paper';

export default class RouteSelectorTabs extends Component {

    constructor(props) {
        super(props);
        this.state = {
            index: 0,
            routes: [
                { key: 'flatlist', title: 'FlatList', icon: 'list' },
            ],
            itemsList: [
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
                "Item",
            ]
        }
    }

    handleIndexChange(index) {
        this.setState({ index });
    }

    renderScene({ route, jumpTo }) {
        return <FlatList
            data={this.state.itemsList}
            //initialNumToRender={20}
            renderItem={({ item, index }) => {
                return <Text key={item.code}>{"item " + index}</Text>;
            }}
            keyExtractor={(item, index) => "key" + index}
        />
    }

    render() {
        return (
            <BottomNavigation
                style={{}}
                shifting={false}
                navigationState={this.state}
                onIndexChange={this.handleIndexChange.bind(this)}
                renderScene={this.renderScene.bind(this)}
            />
        );
    }
}

Your Environment

software	version
ios	11.2
react-native	0.54.0
react-native-paper	1.1.0

Try adding style={{ flex: 1 }} in your FlatList

@satya164

@satya164 I did. Didn't work.

I checked that the container the FlatList was in was tall enough, and it was. So I do not think that the issue is caused by the height of the container.

I just tried the code you posted on snack and it renders everything (on both iOS and Android). Is it the same code you're using?

https://snack.expo.io/H140Sextf

@satya164

@satya164 Thanks for trying that in the snack, and yeah it works here too. I also tried to put it in a React Navigation StackNavigator, in case that was the issue, but it still works:

https://snack.expo.io/Bk_HhgeFG

I tried again in my project, and the FlatList will still only render the 10 items as long as it is in the BottomNavigation, even if the BottomNavigation is the only component.

Could it be due to the React Native version? In my project I'm on 0.54. Surely, Expo must be on an earlier version?

Now I discovered that if I export the component with the FlatList in with withTheme(), the FlatList will only show 10 items. Again, only in my project, not in Expo.

Ok, so I downgraded React Native to 0.52, and guess what: It works! The FlatList now renders all items. Also, if the FlatList is in a component exported with withTheme().

Wether this is a bug in React Native or Paper I have no idea...

It's probably a regression in React Native. We had a different issue regarding absolute position in React Navigation too.

Can you try changing StyleSheet.absoluteFill to { position: 'absolute', top: 0, left: 0, height: '100%', width: '100%' } and see if it fixes your issue?
https://github.com/callstack/react-native-paper/blob/master/src/components/BottomNavigation.js#L470

I was debugging it with latest React Native version. The issue happens because of a bug in the alpha version of React that React Native uses: react/react#12218

Basically, we use the context API for theming, and the consumer keeps getting updated repeatedly after we call setState in the component, which eventually causes a stack overflow.

The workaround is to use PureComponent (just use BottomNavigation.SceneMap to have it automatically).

I opened an issue with React Native here: react/react-native#18351

Closing this since it's not a bug in Paper.

<FlatList
      data={data}
     initialNumToRender={data.length}
      renderItem={({item}) => {
      console.tron.log(item.id);
      }}
/>

solved for me but I don't know why this problem is happening
adding in her attributes.
initialNumToRender={data.length}

you have to change :

initialNumToRender={data.length}

https://reactnative.dev/docs/optimizing-flatlist-configuration

initialNumToRender={data.length}

Love You!

initialNumToRender={data.length

it worked!! Can't belive it

<FlatList
      data={data}
     initialNumToRender={data.length}
      renderItem={({item}) => {
      console.tron.log(item.id);
      }}
/>
solved for me but I don't know why this problem is happening adding in her attributes. initialNumToRender={data.length}

Isn't the problem with this that flatlist is no longer as performant as it should be? If I have 250 items in my flatlist, isn't the idea that the initalNumToRender should be, maybe, 20, and as the user scrolls down, it renders more?

This is the same issue that I'm having, my flatlist items are heavy components (videos, photos, text layers, etc) so if I use data.length then it starts lagging a lot.

Navigation Menu

Repository navigation

FlatList renders only 10 items when in BottomNavigation #272

Current behaviour

Expected behaviour

Code sample

Your Environment

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

FlatList renders only 10 items when in BottomNavigation #272

Description

Current behaviour

Expected behaviour

Code sample

Your Environment

Activity

satya164 commented on Mar 9, 2018

funkyfourier commented on Mar 9, 2018

satya164 commented on Mar 9, 2018

funkyfourier commented on Mar 9, 2018

funkyfourier commented on Mar 9, 2018

funkyfourier commented on Mar 9, 2018

satya164 commented on Mar 10, 2018

satya164 commented on Mar 13, 2018

Andersonfrfilho commented on Sep 27, 2019

David-Kristek commented on Jul 21, 2021

BartoszHor commented on Mar 24, 2022

gabriel761 commented on Mar 6, 2023

andreweinhorn commented on Dec 13, 2023

coderpr0grammer commented on Mar 5, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions