How to Scroll Right To Columns in React Native FlatList (2018)

Question

I am seeking a way to scroll a viewport over a table like this, except that every cell is exactly the same size:

I am currently using FlatList's numColumns parameter to make a table and scroll the viewport over that table.

Here is a Snack example - RegularGridExample:

import React from 'react';
import { FlatList, Text, View } from 'react-native';

const numRows = 10,
  numColumns = 10,
  width = 100,
  height = 100,
  cells = [...Array(numRows * numColumns)].map((_, cellIndex) => {
    const rowIndex = Math.floor(cellIndex / numRows),
      colIndex = cellIndex % numColumns;
    return {
      key: `${colIndex},${rowIndex}`,
      rowIndex,
      colIndex,
      styles: {
        width,
        height,
        backgroundColor: 'green',
        borderColor: 'black',
        borderWidth: 1,
      },
    };
  });

export default class RegularGridExample extends React.Component {

  render() {
    return (
      <FlatList
        data={cells}
        renderItem={this.renderItem}
        numColumns={numColumns}
        horizontal={false}
        columnWrapperStyle={{
          borderColor: 'black',
          width: numColumns * width,
        }}
      />
    );
  }

  renderItem = ({ item: { styles, rowIndex, colIndex } }) => {
    return (
      <View style={styles}>
        <Text>r{rowIndex}</Text>
        <Text>c{colIndex}</Text>
      </View>
    );
  };
}

This example will correctly scroll to reveal the rows below the viewport, but it will not scroll to reveal the columns beyond the viewport. How can I enable scrolling the viewport to reveal a FlatList's columns?

Update 1

I do not think this can be easily solved with nested FlatLists, which is the first thing I tried before using the numColumns approach above. The use case here is shifting the viewport over a grid that's larger than the viewport, not just scrolling one row within the viewport.

Update 2

I'm seeking a virtualized solution. While the wireframe above uses text, the use case I'm actually interested in is browsing a tile server navigating over portions of a large 50MB+ image. It will be too slow to load all of them into a scroll view.

Unrelated Stack Overflow Posts

• React Native ScrollView/FlatList not scrolling - this is about adding flex to the viewport to enable scrolling along the major axis of the FlatList, which is already working in the example above. My concern is scrolling along the crossAxis.
• React native flatlist not scrolling - it is unclear what the expected and actual behavior is here
• How can I sync two flatList scroll position in react native - here, the poster is seeking to simulate masonry layout; I'm not doing anything so fancy

Answer 1

This can't be done using the FlatList method, since numColumns is used which explicitly sets horizontal={false}, hence disabling the scrolling horizontal direction.

Here's a workaround by using nested ScrollViews

export default class RegularGridExample extends React.Component {
    render() {
        const generatedArray = [1,2,3,4,5,6]

        return (
            <ScrollView horizontal>
                <ScrollView >
                    {generatedArray.map((data, index) => {
                       return <View style={{flexDirection: 'row'}} >
                           {generatedArray.map((data, index) => {
                              return  <View style={{height: 100, width: 100, backgroundColor: 'red', borderWidth: 1, borderColor: 'black'}} />
                           })}
                       </View>
                    })}
                </ScrollView>
            </ScrollView>
        );
    }
}