Question 34147 in React native Question posted in
The official React Native documentation can be found here.

Multi-direction scrolling FlatList (React-Native) – React native

I am facing an issue where I need to render a lot of grid elements on a component, starting out the grid will have 2,500 items(50 horizontally and 50 vertically) and this grid view needs to be scrollable in both directions and diagonally as well, I was able to do this by applying this prop directionalLockEnabled={false} to the regular react-native ScrollView but since I have a lot of items being rendered the ScrollView performance is suffering greatly, I wanted to replace this with a FlatList but couldn’t find a way to make it scrollable in all directions.

My question is if there is a way to make the ScrollView performant or to use FlatList and make it scrollable in all directions? or a better way to implement this?

Tags:

2

Answers


  1. 0

    you can use Flashlist as it is very performant and work in all the directions

    Installation Guide

    Usage

    import React from "react";
import { View, Text, StatusBar } from "react-native";
import { FlashList } from "@shopify/flash-list";

const DATA = [
  {
    title: "First Item",
  },
  {
    title: "Second Item",
  },
];

const MyList = () => {
  return (
    <FlashList
      data={DATA}
      renderItem={({ item }) => <Text>{item.title}</Text>}
      estimatedItemSize={200}
    />
  );
};
    Login or Signup to reply.
  2. 0

    Here is the complete answer

    import React from 'react';
import {FlatList, ScrollView, Text, View} from 'react-native';
import 'react-native-gesture-handler';
const App = () => {
  const data = [...Array(2500).keys()].map(i => i + 30);
  return (
    <ScrollView
      style={{flex: 1}}
      directionalLockEnabled={false}
      horizontal={true}>
      <FlatList
        numColumns={50}
        data={data}
        renderItem={({item, index}) => {
          return (
            <View
              style={{
                width: 50,
                height: 50,
                justifyContent: 'center',
                alignItems: 'center',
                margin: 5,
                backgroundColor: '#0001',
              }}>
              <Text>I am {index}</Text>
            </View>
          );
        }}
      />
    </ScrollView>
  );
};

export default App;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search