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 animations using the Animated library
• Measuring your application's speed using the Frames Per Second (FPS) metric