Creating a large grid in React Native using the FlatList component with multiple columns

Encountering some difficulties with FlatList as I try to render numerous cells on the screen.

Please refer to the following image first: Image

Let's consider the scenario:

  • A map consisting of 80 rows x 80 columns = 6400 cells
  • A toggle button to enable and disable scroll functionality

The challenges faced are as follows:

  1. The rendering of the map is extremely slow; during the initial view, the app needs to call renderItem approximately 2000 times before users can proceed with their actions
  2. I have attempted to adjust the windowSize and initialNumToRender, but it doesn't seem to alleviate the issue
  3. Upon toggling the Enable/Disable Scroll button, the app once again makes around 2000 renderItem calls, even though I have set the extraData to only include cellList

My question is:

  • If anyone has any solutions or workarounds for this particular case, please share your ideas. Any insight would be greatly appreciated.

Thank you in advance!

Here is a snippet of the code:

Map implementation using Flatlist

[Code sample removed for brevity]

Cells within the map, referred to as "Stack"

[Code sample removed for brevity]
javascripttypescriptreact-native

Answer №1

For those aiming to create a virtualized grid layout, utilizing the Flatlist component in React Native with the numColumns parameter can be incredibly useful. By specifying the number of columns you want for your grid, the list will automatically divide into that configuration. While nesting Flatlists is possible, it may result in slower performance when dealing with larger datasets as each child count within the nested Flatlist must be recalculated for every parent Flatlist, potentially leading to sluggishness.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Make the minimum height of one div equal to the height of another div

My query is somewhat similar to this discussion: Implementing a dynamic min-height on a div using JavaScript but with a slight twist. I am working on a dropdown menu within a WordPress site, integrated with RoyalSlider. The height of the slider div adjust ...

javascriptjquerycsswordpress

The Instagram API seems to be experiencing some technical difficulties

My expertise lies primarily in HTML/CSS, with limited knowledge of using APIs and JavaScript. I have been assigned the task of utilizing an API to retrieve Instagram pictures posted by users with a specific hashtag. Here is the demo shared via JSFiddle: ...

javascriptjsoninstagram-api

What is the most efficient way to check for the presence and truthiness of a nested boolean in Node.js?

There are instances where I must verify the deeply nested boolean value of an object to determine its existence and whether it is set to true or false. For instance, I need to ascertain if payload.options.save is assigned a value of false, yet I am uncert ...

javascriptnode.jstypescriptif-statement

Add content or HTML to a page without changing the structure of the document

UPDATE #2 I found the solution to my question through Google Support, feel free to read my answer below. UPDATE #1 This question leans more towards SEO rather than technical aspects. I will search for an answer elsewhere and share it here once I have th ...

javascriptjqueryhtmldom

Struggling to access the ref object of a Child Component in React JS parent component

I need to access properties like getBoundingClientRect() and scrollTop from the <div> and <span> components in the ChildComponent, but I want to do it in the Parent component. Here's how I attempted it: class Parent extends Component { ...

javascriptreactjsecmascript-6react-componentreact-ref

Redirect based on the geographical location of IP addresses (Geo-IP)

This code displays the page during execution and then initiates a redirect. Unfortunately, the redirection process is not as fast as desired. This application was created on blogspot.com <script> fetch('https://freegeoip.app/ ...

javascriptphpgeoip

Guide on how to incorporate a Wistia Channel video gallery into a Gridsome webpage/template

I'm currently working on a Gridsome website and I'd like to incorporate a Wistia Channel video gallery into one of the pages. Specifically, I want to place it within the "frame" div class on top of the existing image. However, I'm unsure abo ...

javascriptvue.jsgridsomewistia

Ways to stop users from inputting incorrect characters into an input field

I need help with restricting user input in a text field to only allow letters, numbers, and dashes (-). For alphanumerics only - "The alphanumeric character set includes numbers from 0 to 9 and letters from A to Z. In the Perl programming language, the un ...

javascriptjquery

If additional content has been included in the `div`, be sure to scroll all the way down to view it

I have a div that needs to automatically scroll to the bottom when new content is added. This is a common feature in chat applications where the user wants to see the latest messages without having to manually scroll down each time. How can I achieve this ...

javascripthtmlcss

Describing a function in Typescript that takes an array of functions as input, and outputs an array containing the return types of each function

Can the code snippet below be accurately typed? function determineElementTypes(...array: Array<(() => string) | (() => number) | (() => {prop: string}) | (() => number[])>) { /// .. do something /// .. and then return an array ...

javascriptarraystypescripttypescript-generics

The best approach to incorporating interactive animation in next.js

My vision is to develop a character creation application using next js. The app should empower users to customize the character using sliders and gender selection buttons. The ultimate goal is to have a 2D animated version of the character that dynamicall ...

javascriptcssnext.jsfrontendcss-animations

Guide to aligning the orientation of an object with a given normal vector using three.js

Imagine I have a car object where the z-rotation is positioned to face the direction it's moving in. This car is situated on an inclined ground represented by a normalized normal vector (nx, ny, nz). How can I rotate the car's x and y axes so th ...

javascriptvectorthree.js

Steps to resolve the issue: angular/[email protected] - unable to resolve the dependency

Encountering a challenging compiler error, I am determined to find a solution. Despite numerous attempts to install different library versions, the issue persists. It appears that the firebaseui-angular package necessitates an alternative angular/fire ver ...

angulartypescriptionic-frameworknpmcompiler-errors

What is the best way to use the copy files npm module to recursively copy all images from a source folder to a destination folder?

Is there a way to use the copy files command to transfer images (.png, .jpg) from an "src" folder to a "dist" folder while retaining the same filepaths internally and also ensuring it works recursively? https://www.npmjs.com/package/copyfiles I am curren ...

javascriptnode.jsnpmfile-copying

Template7 produces a bizarre outcome referred to as "each this" whenever JSON is utilized

Currently, I am experimenting with dynamically loading content on Framework7/Template7 pages. Everything works perfectly fine when using static "context" in JSON format. However, when attempting to test it with real-world data from an API, I encounter a st ...

javascriptjqueryjsonhtml-framework-7

Would you like to learn how to extract data from a specific textbox using jQuery and save it to a variable when the textbox is in

Below is a textbox that I am working on: <input type="text" name="company" id="company" required /> I am trying to figure out how to use jQuery to capture the values inside the textbox whenever they are typed or selected. Despite my efforts, I hav ...

javascriptphpjquery

I am attempting to incorporate an NPM package as a plugin in my Next.js application in order to prevent the occurrence of a "Module not found: Can't resolve 'child_process'" error

While I have developed nuxt apps in the past, I am new to next.js apps. In my current next.js project, I am encountering difficulties with implementing 'google-auth-library' within a component. Below is the code snippet for the troublesome compon ...

javascriptnode.jsreactjstypescriptnext.js

Determine the conditional type based on the type of another variable

function updateFilterData( mode: 'PaymentType' | 'Origin' | 'Destination', value: string, ) { } I need to modify this function so that when mode is 'Origin' | 'Destination', the value should b ...

typescript

The <iframe> element pulls the src from the <select> tag, yet it requires the

(I found a solution in a previous post that works, but it requires a submit button. I believe using a JavaScript mouseup event might be a better alternative.) Is there a way to address this issue? <script> document.getElementById("dynamic_selection ...

javascriptjqueryiframe

How to target the last child in Flexbox using CSS order property

Is there a way to correctly detect the last child after rearranging divs using flex order? Even though I have set the order in the CSS, it is still recognizing the last child based on the DOM tree. Since the items are dynamic, we can't rely on nth-chi ...

javascriptjquerycss