react native - render big FlatList with numColumns

FlatList is having issues, when I render many cells on the screen.

Please take a look at the below image first.

Let's say we have:

• A map with row x column = 80 x 80 = 6400 cells
• A button to enable and disable scroll feature

The issues:

1. The map render super slow, initial view, app has to call renderItem around 2000 times before it allows users to continue their actions
2. I am trying to change the windowSize and initialNumToRender but it doesn't help
3. When users press on Enable/Disable Scroll, the app has to call renderItem around 2000 times again even I set the extraData to only cellList

Question is:

• If you guys know any solution or work around for this case, please let me know. Any idea would be more than welcome.

Thank you in advance, guys!

Below is the code:

Map using FlatList

/** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow strict-local */import React, {useCallback, useState} from 'react';import {FlatList, StyleSheet, Text, TouchableOpacity, View,} from 'react-native';import Stack from "./src/Stack";const generateCell = (cellNumber: number): Array<string> => {    let table = [];    for (let j = 0; j < cellNumber; ++j) {        table.push(String(j));    }    return table;};const App = () => {    const [cellList] = useState(generateCell(6400));    const [scrollable, setScrollable] = useState(true);    const keyExtractorHorizontal = useCallback((item, index) => item.stackId +'-'+ index.toString(), []);    const keyExtractorVertical = useCallback((item, index) => item.stackId +'-'+ index.toString(), []);    // BUTTON    const onPress = () => {        setScrollable(!scrollable);    }    // RENDER    const renderCell = ({index}: { index: number }) => {        console.log('renderCell called', index);        return (<Stack index={index}/>        )    };    return (<View style={styles.container}><TouchableOpacity                style={styles.buttonContainer}                onPress={onPress}><Text>                    Enable/Disable Scroll</Text></TouchableOpacity><FlatList                scrollEnabled={scrollable}                horizontal={true}                showsHorizontalScrollIndicator={false}                showsVerticalScrollIndicator={false}                keyExtractor={keyExtractorHorizontal}                data={[0]}                extraData={cellList}                windowSize={100}                renderItem={() => {                    return (<FlatList                            scrollEnabled={scrollable}                            removeClippedSubviews={false}                            showsHorizontalScrollIndicator={false}                            showsVerticalScrollIndicator={false}                            keyExtractor={keyExtractorVertical}                            data={cellList}                            extraData={cellList}                            renderItem={renderCell}                            windowSize={3}                            numColumns={80}                            initialNumToRender={10}                        />                    );                }}            /></View>    );};const styles = StyleSheet.create({    container: {        flex: 1,    },    buttonContainer: {        width: '100%',        height: 80,        justifyContent: 'center',        alignItems: 'center',    }});export default App;

Cell inside map, I call it "Stack"

/** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow strict-local */import React from 'react';import {View} from 'react-native';const Stack = (props: {    index: number}) => {    console.log('truly render stack', props.index);    return (<View style={            {                height: 60,                width: 60,                borderColor: 'black',                borderWidth: 1,            }        }/>    );};export default React.memo(Stack);