React Native Cookbook

Chapter 2. Living in the React Native Ecosystem

The smallest logical unit in a React application is the component: a function that transforms input into a nested set of views rendered based on a set of parameters. The React ecosystem is overflowing with these components; oftentimes we import them from external libraries.

This chapter will introduce you to the mechanics involved in importing components, building your own components, and using JavaScript libraries that support the React approach to building complex applications.

2.1 Stop Repeating Yourself: Implement Custom Components

React applications with lots of components that do one thing are easier to compose, organize, and maintain.

Problem

Your application has a <Header /> on every screen. With over a dozen screens, how do you avoid writing a haiku of configuration every time you build a new part of the application?

Solution

Cut down the repetition by implementing your own <ScreenHeader /> component.

In this example, I’m using the react-native-elements component library to render a <Header /> component. See Recipe 2.3 for an example of how to import a custom component.

Global Styles

You will notice in this example the references to colors and globalStyles. These were imported from an external file at the top of the file: import { colors, globalStyles } from '../styles';.

See Chapter 3 for more details on defining global colors and styles.

A Home screen has the following JSX inside the render() function:

<View