Create Grid using React native

Create Grid using React native

  1:18 PM    admin

---

After fist post about react native I feel I'm getting familiar with react native, this framework quite easy to use, today I continue with another tutorial about create a simple grid card in react native. Let see the our final result first:

                         

 

Let's start...

Analytics
Assump our data has below structure: We have an array of rows and each row has an array of columns, then I decided to use FlatList to display object in cloumns array in horizontal direction, you can imaging like below image.

Gridcard design

Card Item

each card has a logo and a text. I'm using the Icon from lib react-native-vector-icons To have a flatlist in horizontal we use horizontal={true}property, and to make sure the width of flatlist is same as screen with we use contentContainerStyle={{ flexGrow: 1, justifyContent: 'center' }}

Grid

Now the implementation quite easy now, just need to loop to rows in our data and display FlatList.

Let's enjoy...