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.


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?


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:


Get React Native Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.