4 Introduction to styling

It takes talent to build mobile applications, but it takes style to make them great. If you’re a graphic designer, you know this intuitively, deep in your bones. If you’re a developer, you’re probably groaning and rolling your eyes. In either case, understanding the fundamentals of styling Reactive Native components is critical to making an engaging application that others want to use.

In all likelihood, you have some experience with CSS, even if it’s nothing more than seeing the syntax. You can easily understand what a CSS rule like background-color: 'red' is meant to do. As you begin reading this chapter, it may appear as though styling components in React Native is as simple as using camelCase names for CSS rules. For instance, setting the background color on a React Native component uses almost the same syntax, backgroundColor: 'red'—but be forewarned, this is where the similarities end.

Try not to hang on to how you did things in CSS. Embrace the React Native way, and you’ll find that learning how to style components is a much more pleasant experience—even for a developer.

4.1 Applying and organizing styles in React Native

4.1.1 Applying styles in applications

4.1.2 Organizing styles

4.1.3 Styles are code

4.2 Styling view components

4.2.1 Setting the background color

4.2.2 Setting border properties

4.2.3 Specifying margins and padding

4.2.4 Using position to place components

4.2.5 Profile Card positioning

4.3 Styling Text components

4.3.1 Text components vs. View components

4.3.2 Font styles

4.3.3 Using decorative text styles

Summary