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...
Comments
Post a Comment