Building Responsive Layouts with Flexbox

In this chapter, you’ll get a feel for what it’s like to lay components out on the screen of mobile devices. Thankfully, React Native polyfills many CSS properties that you might have used in the past to implement page layouts in web applications.

Before you dive into implementing layouts, you’ll get a brief introduction to Flexbox and using CSS style properties in React Native apps: it’s not quite what you’re used to with regular CSS style sheets. Then, you’ll implement several React Native layouts using Flexbox.

We will cover the following topics in this chapter:

• Introducing Flexbox
• Introducing React Native styles
• Using the Styled Components library
• Building Flexbox layouts

Technical requirements

You can find the code files present in this chapter on GitHub at https://github.com/PacktPublishing/React-and-React-Native-5E/tree/main/Chapter18.

Introducing Flexbox

Before the flexible box layout model was introduced to CSS, the various approaches used to build layouts were convoluted and prone to errors. For example, we used floats, which were originally intended for text wrapping around images, for table-based layouts. Flexbox solves this by abstracting many of the properties that you would normally have to provide in order to make the layout work.

In essence, the Flexbox model is what it probably sounds like to you: a box model that’s flexible. That’s the beauty of Flexbox: its simplicity. You have a box that acts as a container, and you have child elements within that box. Both the container and the child elements are flexible in how they’re rendered on the screen, as illustrated here:

Figure 18.1: Flexbox elements

Flexbox containers have a direction, either column (up/down) or row (left/right). This actually confused me when I was first learning about Flexbox; my brain refused to...

Introducing React Native styles

It’s time to implement your first React Native app, beyond the boilerplate that’s generated by Expo. I want to make sure that you feel comfortable using React Native style sheets before you start implementing Flexbox layouts in the next section.

Here’s what a React Native style sheet looks like:

import { Platform, StyleSheet, StatusBar } from "react-native";
export default StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "ghostwhite",
    ...Platform.select({
      ios: { paddingTop: 20 },
      android: { paddingTop: StatusBar.currentHeight },
    }),
  },
  box: {
    width: 100,
    height: 100,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "lightgray",
  },
  boxText: {
    color: "darkslategray",
    fontWeight: "bold",
 ...

Using the Styled Components library

Styled Components is a CSS-in-JS library that styles React Native components using plain CSS. With this approach, you don’t need to define style classes via objects and provide style props. The CSS itself is determined via tagged template literals provided by styled-components.

To install styled-components, run this command in your project:

npm install --save styled-components

Let’s try to rewrite components from the Introducing React Native styles section. This is what our Box component looks like:

import styled from "styled-components/native";
const Box = styled.View'
  width: 100px;
  height: 100px;
  justify-content: center;
  align-items: center;
  background-color: lightgray;
';
const BoxText = styled.Text'
  color: darkslategray;
  font-weight: bold;
';

In this example, we’ve got two components, Box and BoxText. Now we can use them as usual, but without any other additional...

Building Flexbox layouts

In this section, you’ll learn about several potential layouts that you can use in your React Native applications. I want to stay away from the idea that one layout is better than another. Instead, I’ll show you how powerful the Flexbox layout model is for mobile screens so that you can design the kind of layout that best suits your application.

Simple three-column layout

To start things off, let’s implement a simple layout with three sections that flex in the column direction (top to bottom). We’ll look at the result we are aiming for first.

Figure 18.3: Simple three-column layout

The idea, in this example, is that you style and label the three screen sections so that they stand out. In other words, these components wouldn’t necessarily have any styling in a real application since they’re used to arrange other components on the screen.

Now, let’s take a look at the components used to...

Summary

This chapter introduced you to styles in React Native. Though you can use many of the same CSS style properties that you’re used to, the CSS style sheets used in web applications look very different. Namely, they’re composed of plain JavaScript objects.

Then, you learned how to work with the main React Native layout mechanism: Flexbox. This is the preferred way of laying out most web applications these days, so it makes sense to be able to reuse this approach in a Native app. You created several different layouts, and you saw how they looked in portrait and landscape orientation.

In the next chapter, you’ll start implementing navigation for your app.