JavaScript Everywhere

Chapter 22. Mobile Application Shell

My wife is a photographer, which means that much of her life is based around composing images within a rectangular frame. In photography there are many variables—subject, light, angle—but the proportions of the image remain consistent. With that limitation, incredible things happen, shaping the way that we see and remember the world around us. Mobile application development presents a similar opportunity. Within the constraints of a small rectangular screen, we can build incredibly powerful applications with immersive user experiences.

In this chapter, we’ll begin to build out a shell for our application. To do this, we’ll first take a closer look at some of the key building blocks of React Native components. From there we’ll look at how to apply styles to our application, both with React Native’s built-in style support as well as with our CSS-in-JS library of choice, Styled Components. Once we’ve covered how to apply styles, we’ll take a look at how to integrate routing into our application. Finally, we’ll explore how to easily enhance our app interfaces with icons.

React Native Building Blocks

Let’s begin by taking a look at the basic building blocks of a React Native application. You may have already guessed that a React Native application consists of React components written in JSX. But without an HTML page’s DOM (document object model), what exactly goes within those components? We can start by looking at the “Hello World” component at ...