It’s great to be able to build functional applications, but if you can’t style them effectively, you won’t get very far! In Chapter 3, we built a simple weather application with some basic styles. While this gave us an overview of how to style React Native components, we glossed over many of the details. In this chapter, we will take a closer look at how styles work in React Native. We’ll cover how to create and manage your stylesheets, as well as the details of React Native’s implementation of CSS rules. By the end of this chapter, you should feel comfortable creating and styling your own React Native components and applications.
If you want to share styles between your React Native and web applications, the React Style project on GitHub provides a version of React Native’s style system for the Web.
To understand the design of React Native’s styles, first we need to consider some of the headaches associated with traditional CSS stylesheets.1 CSS has a number of problems. All CSS rules and class names ...