React native array of string to align in horizontal (Please see the below image)

Question

I want to create something like this 👇

The data I am getting from backend is like this 👇

[
"C",
"C++",
//So on
]

Answer 1

You can do this by using flexWrap:'wrap'

For Example,

<FlatList
      data={data}
      keyExtractor={(item, index) => index.toString()}
      contentContainerStyle={{ justifyContent: 'flex-start', flexDirection: 
      'row', flexWrap: 'wrap', paddingHorizontal: 20 }}
      renderItem={({ item }) =>
                   <TouchableOpacity style={{ padding: 10 }}>
                   <Text style={{ backgroundColor: '#edf4fa', fontSize: 22, 
                      padding: 10, borderRadius: 10 }}>{item}</Text>
                    </TouchableOpacity>
       }
  />