Hands-On Design Patterns with React Native

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" ...