align 3 items on a row with react-native

Issue

Working on a react native project which there's an array of days of the week, currently trying to display 3 days per row and then break to the next line but I'm having difficulty.

<View style={{ width: '100%', alignItems: 'center' }}>
  {tags.map(item => (
    <Text
      style={{
        width: '30%',
        backgroundColor: ' green',
        color: 'white',
        borderRadius: 20,
        paddingRight: 5,
      }}>
      {item.label}
    </Text>
  ))}
</View>;

I want to achieve something like this:

Monday Tuesday Wednesday
Thursday Friday

Solution

You can check FlatList with numColumns={3}.

Please check following code

 <FlatList  numColumns={3}
                    data={[  
                        {key: 'Android'},{key: 'iOS'}, {key: 'Java'},{key: 'Swift'},  
                        {key: 'Php'},{key: 'Hadoop'},{key: 'Sap'},  
                        {key: 'Python'},{key: 'Ajax'}, {key: 'C++'},  
                        {key: 'Ruby'},{key: 'Rails'},{key: '.Net'},  
                        {key: 'Perl'},{key: 'Sap'},{key: 'Python'},  
                        {key: 'Ajax'}, {key: 'C++'},{key: 'Ruby'},  
                        {key: 'Rails'},{key: '.Net'},{key: 'Perl'}  
                    ]}  
                    renderItem={({item}) =>  
                        <Text style={{  
        padding: 10,  
        fontSize: 18,  
        height: 44
                        }}  
                              >{item.key}</Text>}  

                />

Please check this demo

https://snack.expo.io/@vishal7008/flat-list

Answered By - Vishal Dhanotiya