[SOLVED] Render Item left and right combination

Render Item left and right combination

I would like to render the item left and right in tablet. I have tried many ways. but nothing worked. Can anyone please help me to sort out this issue.

for example, array having some data. array = [firstname: 'aaaa',lastname: 'bbb', age: 15]. now i want to show the firstname in leftside, and lastname in rightside. then age will show the next line. if more data available, show left right combination.

Firstname           Lastname
aaa                 bbb

age                 Address
15                  cccc

 <View style={{ flexDirection: 'row',}}>
    {data.map((item, index) => (
        <View style={{ flexDirection: 'row'}}>
            <View style={{ flexDirection: 'row', }}>
                <Text style={[commonStyles.darkBlack16,{ marginBottom: 8 }]}>{item.data</Text>
            </View>
        </View>
    ))}
</View>
    ```

Solution

You can use this structure:

<View style={{ flexDirection: "row", flexWrap: "wrap" }}>
  {data.map((item, index) => (
    <View style={{ width: "50%" }}>
      <Text>Text</Text>
      <Text>Text</Text>
    </View>
  ))}
</View>