In a recentopen source React Native app I had to build a grid of cards to fill the screen. After having a handful of conversations regarding Flexbox recently I thought this would be a nice quick exercise to get some practice.

The app is based on the following reference. All we'll be doing today is the grid layout. The rest (animations, custom hooks, etc.) will be covered later.

You can quickly do the exercise viaExpo Snack.

The requirements are:

• Equally fill the remainder of the screen with cards (after other UI elements like stats or buttons)
• Resize for changing screen sizes (such as on web)
• Automatically adjust layout based on number of cards in a row

Flexbox is the perfect tool for this in React Native. Though it can take some time to get used to, this is a good exercise to start getting more comfortable with it.

Our end goal, for this exercise, is the following:

Let's start with the following code.

import*asReactfrom"react"import{Text,View,StyleSheet}from"react-native"importConstantsfrom"expo-constants"constCard=()=><Viewstyle={styles.card}/>exportdefaultfunctionApp(){return(<Viewstyle={styles.container}><Text>This is top filler</Text><Viewstyle={styles.row}><Card/><Card/><Card/></View><Viewstyle={styles.row}><Card/><Card/><Card/></View><Viewstyle={styles.row}><Card/><Card/><Card/></View><Text>This is bottom filler</Text></View>)}conststyles=StyleSheet.create({container:{paddingTop:Constants.statusBarHeight,},row:{},card:{backgroundColor:"#7ca1b4",},})

We want each of our rows to equally fill the vertical space and each of our cards to fill that row vertically and to evenly split the space horizontally.

First we want our container to fill up the entire screen. We can do this by settingflex: 1 on ourcontainer styles. This is best visualized by temporarily setting a background color.

// ...conststyles=StyleSheet.create({container:{paddingTop:Constants.statusBarHeight,flex:1,backgroundColor:"green",},row:{},card:{backgroundColor:"#7ca1b4",},})

Now, we need to tell therow to evenly split the remainder of the screen (viaflex: 1).

// ...conststyles=StyleSheet.create({container:{paddingTop:Constants.statusBarHeight,flex:1,backgroundColor:"green",},row:{flex:1,backgroundColor:"blue",marginVertical:5,},card:{backgroundColor:"#7ca1b4",},})

Because each row has aflex: 1 on it the rendering engine knows that each row should take up 1/3 of the available space. If one row hadflex: 2 on it, then aflex: 1 would take up 1/5 and aflex: 2 would take up 2/5 of the area.

Next we want our cards to fill the remaining space, sharing it equally. Again we'll leverageflex: 1.

// ...conststyles=StyleSheet.create({container:{paddingTop:Constants.statusBarHeight,flex:1,backgroundColor:"green",},row:{flex:1,backgroundColor:"blue",marginVertical:5,},card:{backgroundColor:"#7ca1b4",flex:1,margin:5,},})

Now, with this, the cards aren't rendered correctly. We want them rendered horizontally, but still split the space equally. We can accomplish this withflexDirection: 'row' on ourrow style. By default Flexbox in React Native sets the flex direction to column. We'll also remove our placeholder background colors.

// ...conststyles=StyleSheet.create({container:{paddingTop:Constants.statusBarHeight,flex:1,},row:{flex:1,marginVertical:5,flexDirection:"row",},card:{backgroundColor:"#7ca1b4",flex:1,margin:5,},})

Since we're using flexbox to manage our layout we can be confident that it will fill the screen correctly no matter what size the screen is and that it will also automatically resize if the screen size changes.

This was a super brief exercise into practicing layout with Flexbox. If you'd like to learn more I wrote a morein depth article on Flexbox over on LogRocket.