O'Reilly logo

Hands-On Design Patterns with React Native by Mateusz Grzesiukiewicz

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

Styling content

We have the footer positioned using the direction row. It's time to position the main content and column. In the previous chapters, we created a task list. This is the time to integrate it with our design.

Add the TaskList component into the content box. I also add the ScrollView component to make content scrollable in case tasks take up too much space to display all of them:

import data from './tasks.json';// ... header<ScrollView style={styles.content}>    <TaskList tasks={data.tasks} /></ScrollView>// ... footer

My tasks mock in the JSON file is presented as follows. Later on in this book, we will learn how to fetch tasks from a backend server and how to separate such logic from the markup:

{  "tasks": [    {      "name": "Task 1" ...

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