React Native horizontal FlatList with multiple rows

Question

I'm trying to implement a horizontal scrolling list that has two rows. Using FlatList, the vertical scrolling list involves setting numColumns but there is no equivalent for using rows with horizontal.

I was successfully able to make it render properly, and it works flawlessly. However, a warning gets thrown saying setting flexWrap is not supported in VirtualizedList or FlatList, and to use numColumns. I cannot use numColumns as that is not meant for horizontal lists.

<FlatList
    horizontal={true}
    contentContainerStyle={{
        flexDirection: 'column',
        flexWrap: 'wrap'
    }}
    {...otherProps}
/>

I found the commit where this warning was added, but cannot find the reasoning behind it. There seems to be no way to make this work without a warning being thrown, at least without ditching FlatList entirely. Is there a more appropriate solution for horizontal lists with rows?

References:

Commit adding warning: https://github.com/facebook/react-native/commit/eac399b
FlatList Documentation: https://facebook.github.io/react-native/docs/flatlist.html

did you find any good solution for horizontal FlatList with multiple rows? — Lucky_girl, Commented Apr 26, 2018 at 15:13
This was great, thanks for sharing! I also added a height to the container (that contained the FlatList) and was able to force it into only 2 rows that way. — Sara Inés Calderón, Commented Sep 13, 2018 at 17:29

tuanngocptn · Accepted Answer · 2023-03-29 15:02:30Z

29

Please do not use horizontal={true}. For this case you should use numColumns equal to the length of data / 2, and add a <ScrollView> tag. Forcing the number of columns to be half the total will force the list to wrap to the next line.

<ScrollView
  horizontal
  showsHorizontalScrollIndicator={false}
  directionalLockEnabled={true}
  alwaysBounceVertical={false}
>
  <FlatList
    contentContainerStyle={{alignSelf: 'flex-start'}}
    numColumns={Math.ceil(listData.length / 2)}
    showsVerticalScrollIndicator={false}
    showsHorizontalScrollIndicator={false}
    data={listData}
    renderItem={({item, index}) => {
      //push your code
    }}
  />
</ScrollView>

Update 1: edit listData.length / 2 -> Math.ceil(listData.length / 2) following Alex Aung comment. Thanks @alex-aung

Update 2: edit add directionalLockEnabled={true} and alwaysBounceVertical={false} for stoping dragged vertically while dragging. following @amer-nm, Thanks Amer NM

edited Mar 29, 2023 at 15:02

answered Oct 17, 2018 at 7:31

tuanngocptn

1,46915 silver badges22 bronze badges

5

<ScrollView horizontal={true} showsVerticalScrollIndicator={false} showsHorizontalScrollIndicator={false} > numColumns={Math.ceil(featuredCategories.length / 2)}
– Alex Aung
Commented Oct 4, 2019 at 19:52
1

numColumns={listData.length / 2} error cannot execute on the spot.
– ggDeGreat
Commented Dec 6, 2019 at 3:05
This is only working if you don't care about the order or it's fine that each row is ordered from start to end. In my case I need the order from top to bottom column by column. I still like how easy your solution is, even though it's not fulfilling my requirement.
– Mo W.
Commented Apr 7 at 15:39

Add a comment |

Abdelhalim Ahmed · Accepted Answer · 2020-11-17 12:07:58Z

enhancement the first answer, that's what I did:

const listData = props.data ?? [];
const numColumns = Math.ceil(listData.length / 2);
        <ScrollView
          horizontal
          showsVerticalScrollIndicator={false}
          showsHorizontalScrollIndicator={false}
          contentContainerStyle={{ paddingVertical: 20 }}>
          <FlatList
            scrollEnabled={false}
            contentContainerStyle={{
              alignSelf: 'flex-start',
            }}
            numColumns={numColumns}
            showsVerticalScrollIndicator={false}
            showsHorizontalScrollIndicator={false}
            data={listData}
            renderItem={renderItem}
          />
        </ScrollView>

Community · Accepted Answer · 2020-06-20 09:12:55Z

I use simple logic see

<ScrollView
    horizontal
    showsHorizontalScrollIndicator={false}
    contentContainerStyle={{
        justifyContent: 'center',
        paddingHorizontal: 20,
        paddingBottom: 70,
    }}>
    <View>
        <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
            {this.state.interest.length
                ? this.state.interest.map((d, i) => {
                    if (i % 2 == 0) {
                        return null;
                    }
                    return (
                        <Intrest
                            style={{
                                height: 40,
                                paddingHorizontal: 20,
                                alignItems: 'center',
                                justifyContent: 'center',
                                borderRadius: 30,
                                margin: 2.5,
                            }}
                            key={i}
                            data={d}
                            add={data => {
                                this._handleAddtoSelection(data);
                            }}
                            remove={data => {
                                this._handleRemoveFromSelection(data);
                            }}
                            active={this._isSelectedTopic(d)}
                        />
                    );
                })
                : null}
        </View>
        <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
            {this.state.interest.length
                ? this.state.interest.map((d, i) => {
                    if (i % 2 != 0) {
                        return null;
                    }
                    return (
                        <Intrest
                            style={{
                                height: 40,
                                paddingHorizontal: 20,
                                alignItems: 'center',
                                justifyContent: 'center',
                                borderRadius: 30,
                                margin: 2.5,
                            }}
                            key={i}
                            data={d}
                            add={data => {
                                this._handleAddtoSelection(data);
                            }}
                            remove={data => {
                                this._handleRemoveFromSelection(data);
                            }}
                            active={this._isSelectedTopic(d)}
                        />
                    );
                })
                : null}
        </View>
    </View>
</ScrollView>

Output : Output

if I want 3 rows in this what I have to change.Can you please tell me this ? @ronak — Kartik Shah, Commented Nov 3, 2020 at 7:16
There is a lot of duplicate code in your approach. Also as @KartikShah said it's not easy to increase the number of rows. — Mo W., Commented Apr 7 at 15:35
This is base logic. For your working you have to add your own logic. — Ronak Dholariya, Commented Apr 9 at 8:47

Shai · Accepted Answer · 2018-07-15 18:32:26Z

1

I had the same problem with a list of items (a few hundred) that is not that long and i managed to overcome it by going over my list mapping them to multiple views each one with 2 items one after the other (column using flex)

If your list is not too long you can also use ScrollView and it supports flexWrap

answered Jul 15, 2018 at 18:32

Shai

516 bronze badges

Add a comment |

Jeremy Caney · Accepted Answer · 2021-12-17 00:17:40Z

With some pre-processing work to slice each ROWS_COUNT into a column

const ROWS_COUNT = 5;
const len = Math.ceil(data.length / ROWS_COUNT );
const cols = () => {
    let colsArr = Array(len);
    for (let i = 0; i < len; i++) {
        colsArr[i] = 
            <View style={styles.col}>
                {Array(ROWS_COUNT ).fill(0).map((_, j) => {
                    let index = i * ROWS_COUNT + j;
                    return (index < data.length) ? <NumSquare key={index} num={index} active={index < 23} color={"#44afff"}/> : <></>
                })}
            </View>
                    
    }
    return colsArr;
}
const colsArr = cols();

..................................

<FlatList
    horizontal
    data={colsArr}
    contentContainerStyle={styles.contentContainerStyle}
    showsVerticalScrollIndicator={false}
    showsHorizontalScrollIndicator={false}
    renderItem={({ item, index }) => item}/>

..................................

const styles = StyleSheet.create({
    col:{
        flexDirection:"column",
    }
});

Result:

result

Amer NM · Accepted Answer · 2022-06-02 06:41:02Z

0

tuanngocptn's answer works. However, the two rows horizontal list can also be dragged vertically while dragging it horizontaly which is not that great of a UX.

Adding directionalLockEnabled={true} and alwaysBounceVertical={false} to the ScrollView will solve this issue

<ScrollView
horizontal
showsHorizontalScrollIndicator={false}
directionalLockEnabled={true}
alwaysBounceVertical={false}
>
    <FlatList
        ...
    />
</ScrollView>

edited Jun 2, 2022 at 6:41

answered Jun 2, 2022 at 3:41

Amer NM

1772 silver badges7 bronze badges

Thanks AmerNM. I just updated my answer.
– tuanngocptn
Commented Mar 29, 2023 at 14:58

Add a comment |

Lilly Sharples · Accepted Answer · 2022-08-10 17:04:44Z

0

Easiest way I found (if you wanted x columns, change numColumns to divide data length by x):

return (
    <ScrollView horizontal={true} showsVerticalScrollIndicator={false} showsHorizontalScrollIndicator={false} >
      <FlatList
        data = {yourData}
        renderItem={renderFunction}
        numColumns={Math.ceil(yourData.length / 2)}
        scrollEnabled={false}
        />
    </ScrollView>
  )

answered Aug 10, 2022 at 17:04

Lilly Sharples

1

Add a comment |

James Trickey · Accepted Answer · 2022-08-22 08:27:52Z

0

I created a wrapper for the FlatList with a numRows prop.

This solution does not use a FlatList inside a ScrollView, as that may nullify some of the FlatList's performance optimisations. Instead it chunks the data and adds column components which can also be styled.

https://www.npmjs.com/package/@idiosync/horizontal-flatlist

edited Aug 22, 2022 at 8:27

answered Aug 21, 2022 at 23:15

James Trickey

1,44715 silver badges22 bronze badges

Add a comment |

Le Gia Quan · Accepted Answer · 2022-12-30 03:06:12Z

Let check it: https://snack.expo.dev/@legiaquan/flatlist-extra-expo?platform=android

FlatListExtra : https://www.npmjs.com/package/flatlist-extra

import { Text, View, StyleSheet } from 'react-native';
import { FlatListExtra } from 'flatlist-extra';

export default function App() {
  const data = [
    { idItem: 1, name: 'one' },
    { idItem: 2, name: 'two' },
    { idItem: 3, name: 'three' },
    { idItem: 4, name: 'four' },
    { idItem: 5, name: 'five' },
    { idItem: 6, name: 'six' },
    { idItem: 7, name: 'seven' },
    { idItem: 8, name: 'eight' },
    { idItem: 9, name: 'nine' },
  ];
  const renderItem = ({ item }) => (
    <View style={{ width: 100, height: 100, borderWidth: 1 }}>
      <Text
        style={{
          alignSelf: 'center',
        }}>
        {item.name}
      </Text>
    </View>
  );
  return (
    <FlatListExtra
      data={data}
      renderItem={renderItem}
      showsHorizontalScrollIndicator={false}
      horizontal
      numRows={2}
      id={'idItem'}
    />
  );
}

Alexander · Accepted Answer · 2024-02-10 12:58:43Z

0

if still relevant, you could try something like this.

<FlatList
    inverted={true}
    contentContainerStyle={{
        flexDirection: 'row',
        flexWrap: 'wrap-reverse'
    }}
    {...otherProps}
/>

I don't know why but, when we use flexWrap: 'wrap-reverse', warning is not shown :)

answered Feb 10, 2024 at 12:58

Alexander

1011 silver badge6 bronze badges

Add a comment |

Collectives™ on Stack Overflow

React Native horizontal FlatList with multiple rows

10 Answers 10

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

Linked

Related