Create a two row listView

Question

I want to create a two row list. This is the result I want to achieve

I tried to use flatList with this code

    <FlatList
    style={styles.list}             //<-- This Line
    numColumns={2}                                  //<-- And this one
    data={[{key: 'row1'}, {key: 'row2'},{key: 'row3'},{key: 'row4'}]}
    renderItem={({item}) => 
    <View>
    <Text>{item.key}</Text>
    </View>
  } />

But I got his result

I also tried to put the width of each item to the half of the screen width with this code

<View style={{width: width /2}}>
<Text>{item.key}</Text>
</View>

But it dose not work when the device orientation changes.

What I want to achieve is to create a virtual table that have the width of the screen and put the text in the beginning of each cell. Something like this

+------------------------------+-----------------------------+
| item 1.                      | item 2.                     |
+------------------------------+-----------------------------+
| item 3.                      | item 4                      |
+------------------------------+-----------------------------+
| item5                        | item 6                      |
+------------------------------+-----------------------------+

Do you know how to achieve that?

Had a look at [this](https://stackoverflow.com/questions/29394297/listview-grid-in-react-native) ? — Ryan Turnbull, Nov 03 '17 at 10:31
Yes I alerady saw it but it didin't help me to solve the problem — user567, Nov 03 '17 at 10:45

score 0 · Accepted Answer · answered Nov 03 '17 at 10:52

You simply have to add flex:1 to your parent view inside of your renderItem prop. Like so

<FlatList
   style={{flex: 1}} //whatever style you had          
   numColumns={2}                                  
   data={[{key: 'row1'}, {key: 'row2'},{key: 'row3'},{key: 'row4'}]}
   renderItem={({item}) =>
       <View style = {{flex: 1}}>
           <Text>{item.key}</Text>
       </View>
   } 
/>

Create a two row listView

1 Answers1