React Native FlatList with alternate rows having different number of columns

Question

i want to have a FlatList which renders a single item on odd rows and 2 items on even rows

Is it possible to achieve this layout. I apologize I do not have code for it up yet.

Answer 1

FlatList has a renderItem prop which is a function. That function is called for each item which FlatList draws. You have to pass that function to FlatList. In that function, you return the View to be drawn for each item. So you can return whatever you want to draw for a particular row.

The renderItem function passes the index of the item as the second argument. In your case you can use that argument to draw 1 or two columns (or whatever else you might want to draw).

<FlatList
  data={[{key: 'a', title: 'single column stuff' }, {key: 'b', col1: 'col1 text', col2: 'col2 text'}]}
  renderItem={(item, index) => {
    if(index % 2 === 0) {
      return <View style={{flexDirection: 'row'}}>
        <View style={{flex: 1}}><Text> {item.col1} </Text></View>
        <View style={{flex: 1}}><Text> {item.col2} </Text></View>
      </View>
    } else {
      return <View style={{flex: 1}}><Text> {item.title} </Text></View>
    }
  }}

/>