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

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

[satya164]

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