Styling Patterns

It's time to add some looks to our applications. In this chapter, we will explore unique styling solutions and mechanisms. React Native StyleSheet may resemble web cascading style sheets (CSS); however, Native application styling is different. Similarities in the syntax quickly end and you should spend some time with this chapter to learn the basics of styling. Later on in this book, we will use an external library that provides ready-made styles. It is crucial for you to understand how to make such components yourself, especially if you plan to work professionally in React Native in teams who deliver custom designs.

In this chapter, we will cover the following topics:

• Styling components in the React Native environment
• Dealing with limited style inheritance
• Using density-independent pixels
• Positioning elements with Flexbox
• Handling long text issues
• Making...

Technical requirements

As in the previous chapters, I have separated every example into a standalone application that you can launch on your phone or simulator. To do the examples, you will need the following:

• Simulator or Android/iOS smartphone
• Git to pull the examples: https://github.com/Ajdija/hands-on-design-patterns-with-react-native. Follow the installation instructions from the GitHub page.

How React Native styles work

"The core premise for React is that UIs are simply a projection of data into a different form of data. The same input gives the same output. A simple pure function."

- React library README (https://github.com/reactjs/react-basic/blob/master/README.md).

You will learn about pure functions later in this book. Check out the following example to understand the basics:

// Code example from React readme. Comments added for clarity.

// JavaScript pure function
// for a given input always returns the same output
function NameBox(name) {
    return { fontWeight: 'bold', labelContent: name };
}

// Example with input
'Sebastian Markbåge' ->
{ fontWeight: 'bold', labelContent: 'Sebastian Markbåge' };

Going back to more practical examples, let's see how the preceding premise is implemented in React Native...

Using the Flexible Box pattern

This is one of the greatest patterns that I have learned about when it comes to styling. Flexible Box (Flexbox) literally make your boxes flexible.

Let's see a small example. The goal is to flex your box to fill the whole width of the screen:

// src/ Chapter_3/ Example_8/ App.js
export default () => (
    <View style={{ flex: 1 }}>
        <View
            style={{ backgroundColor: 'powderblue', height: 50 }}
        />
    </View>
);

Here is the result of the preceding code:

Box stretches to the whole screen width because we used flex: 1 styles

It's not too fancy, but you don't need to use Dimensions. It is obviously just a start.

You know already that Views are relative to each other by default, so if you want to make some stripes, it's as easy as stacking three div on top of each other:

// src/ Chapter_3...

React Native animated

As we build our application, we need to focus on the user experience (UX). One part of it is animations that make our screens more vibrant and provide instant feedback on the actions. If you played with our application on your own, you could see that when you click the like/dislike icon, it makes a little blink. That effect comes out of the box with TouchableOpacity. It's time to learn how we can implement such features on our own.

What are animations?

When I first read the Animated library documentation I freaked out. There are so many new words that you will need to get used to. Instead of diving right into them, let's understand what animations really are.

Animation is a change to a component...

Summary

In this chapter, you learned how to style React Native applications. We introduced many different ways of positioning elements and you learned how our designs translate to real devices. In the end, we made a few animations and measured them in terms of FPS.

So far, we know how to create reusable code using React components and how to style them. We worked with limited data stored in the local JSON file. It's time to make our application more complex and talk about different scenarios that impact big applications. In the next chapter, you will learn about Flux, which is an architectural pattern.