VirtualizedLists никогда не должны быть вложены в обычные ScrollViews

Question

Я довольно долго пытался избавиться от предупреждения, которое появляется всякий раз, когда FlatList используется внутри ScrollView. После проб и ошибок я нашел возможное исправление, но не был полностью удовлетворен.

Здесь мой компонент возвращает ScrollView:

<ScrollView>
    <History />
    <Card title="Corporate Leadership">
        <FlatList
            data={this.props.leaders.leaders}
            renderItem={renderLeader}
            keyExtractor={(item) => item.id.toString()}
        />
    </Card>
</ScrollView>

Это вызывает раздражающее предупреждение не использовать VirtualizedList внутри ScrollView. Это понятно, так как ScrollView и FlatList имеют схожую функцию. Тем не менее, я поискал в Интернете различные решения и попробовал большинство из них, но они не помогли. Ближайшим возможным исправлением было полное удаление ScrollView и размещение всего в одном компоненте FlatList (с использованием атрибутов ListHeaderComponent или ListFooterComponent). В моем случае это тоже не вариант, потому что <History /> возвращает представление карты с заголовком и текстовым абзацем, тогда как мой FlatList вложен в отдельное представление карты с собственным заголовком. Вот что в итоге сработало:

<FlatList
    ListHeaderComponent={<History />}
    ListFooterComponent={
        <Card title="Corporate Leadership">
            <FlatList
                data={this.props.leaders.leaders}
                renderItem={renderLeader}
                keyExtractor={(item) => item.id.toString()}
            />
        </Card>
    }
/>

Как видите, я использовал FlatList внутри FlatList, используя два атрибута (ListHeaderComponent и ListFooterComponent), чтобы отделить каждое представление Card от его собственного заглавие. Я не понимаю, почему, когда я использую этот подход, нет предупреждения. Это хороший подход? Если так, надеюсь, другие могут извлечь из этого пользу, поскольку я не видел этого решения больше нигде.