O'Reilly logo

React and React Native - Second Edition by Adam Boduch

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Flexible rows and columns

In this final section of the chapter, you'll learn how to combine rows and columns to create a sophisticated layout for your app. For example, sometimes you need the ability to nest columns within rows or rows within columns. Let's take a look at the App component of an application that nests columns within rows:

import React from 'react';import { View, StatusBar } from 'react-native';import styles from './styles';import Row from './Row';import Column from './Column';import Box from './Box';export default () => (  <View style={styles.container}>    <StatusBar hidden={false} />    {/* This row contains two columns. The first column        has boxes "#1" and "#2". They will be stacked on top of one another. The next column has boxes ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required