1

I create a 2 columns FLatlist in react-native-android

1    |    2
------------
3    |    4

I want this

2    |    1
4    |    3

I try these:

<View style={{flex:1,flexDirection:'row-reverse'}}>
        <FlatList
            style={{flex:1,flexDirection:'row-reverse'}}

and in render item I use flexDirection:'row-reverse' too

but no success!

Ali
  • 1,127
  • 1
  • 10
  • 23

2 Answers2

7

You can use flexDirection: 'row-reverse' inside columnWrapperStyle :

<FlatList
  numColumns={2}
  columnWrapperStyle={{ flexDirection: 'row-reverse' }}
  data={data}
  renderItem={yourRenderFunction}
/>
Amirali Esmaeili
  • 223
  • 4
  • 3
1

I would propose to just modify the order of your data:

For example you can introduce a arrayMove function which does the reordering.

Example:

  const data = [
        { 
          'id': 1 
        },
        { 
          'id': 2
        },
        { 
          'id': 3
        },
        { 
          'id': 4
        } 
   ];
  
  
function arrayMove(arr, fromIndex, toIndex) {
  var element = arr[fromIndex];
  arr.splice(fromIndex, 1);
  arr.splice(toIndex, 0, element);
}
console.log('data', data);
arrayMove(data, 1, 0);
arrayMove(data, 3, 2);
console.log('data permutated', data);

Output:

Working Expo:

https://snack.expo.io/ryeNv5S2E

Tim
  • 10,459
  • 4
  • 36
  • 47
  • 1
    I agree with @Tim's solution. Unfortunately, FlatList doesn't support this way of ordering. I have created a demo - https://snack.expo.io/@hristoeftimov/reverse-blocks. It has a property `inverted`, but it reverses the items from bottom to top. `FlexDirection` and `FlexWrap` are not supported from Flatlist. So, the only solution is to change the order of the items :) – Hristo Eftimov May 13 '19 at 10:36
  • 1
    @HristoEftimov thanks for your feedback. In addition, I would appreciate an upvote ;) – Tim May 13 '19 at 10:40
  • 1
    sure. You got it :) – Hristo Eftimov May 13 '19 at 12:07