React-native-paper: FlatList renders only 10 items when in BottomNavigation

[funkyfourier]

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

[satya164]

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

[funkyfourier]

@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.

[satya164]

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

[funkyfourier]

@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?

[funkyfourier]

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.

[funkyfourier]

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...

[satya164]

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

[satya164]

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: https://github.com/facebook/react/issues/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: https://github.com/facebook/react-native/issues/18351

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

[Andersonfrfilho]

<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}