Laying out our app

After we've talked about the differences, let's walk through our WhatsApp app clone and see how we can style our app.

First, let's take a look at our Home Screen component render function:

<View style={styles.container }> 
   <Button onPress={ () => this.navigate() } /> 
</View> 

As you can see here, we pass styles.container to style prop. Let's take a look at this object:

const styles = { 
  container: { 
    flex: 1, 
    backgroundColor: 'white', 
    justifyContent: 'center', 
    alignItems: 'center' 
  } 
}

As you can see, it's a plain JavaScript object. We tell our container to expand to the full available width along the Main Axis. Since our Main Axis is a vertical one, our container will take full screen height.

Then, we simply change our background color to white.

The next step is to...