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.

"With React Native, you don't use a special language or syntax for defining styles. You just style your application using JavaScript. All of the core components accept a prop named style. The style names and values usually match how CSS works on the web, except names are written using camel casing, e.g backgroundColor rather than background-color.

The style prop can be a plain old JavaScript object. (...) You can also pass an array of styles - the last style in the array has precedence, so you can use this to inherit styles.

As a component grows in complexity, it is often cleaner to use StyleSheet.create to define several styles in one place."

- React Native official documentation ( https://facebook.github.io/react-native/docs/style.html).

To sum up, we have three ways of defining the component style:

Using style props and passing an object with key-value pairs that represent styles.
Using style props and passing an array of objects. Each object should contain key-value pairs that represent styles. The last style in the array has precedence. Use this mechanism to inherit styles or shadow them as you would shadow functions and variables.
Using the StyleSheet component and its create function to create styles.

In the following example, you can find all three ways of defining styles:

// src/ Chapter_3/ Example_1_three_ways_to_define_styles/ App.js

export default () => (
    <View>
        <Text style={{ color: 'green' }}>inline object green</Text>
        <Text style={styles.green}>styles.green green</Text>
        <Text style={[styles.green, styles.bigred]}>
            [styles.green, styles.bigred] // big red
        </Text>
        <Text style={[styles.bigred, styles.green]}>
            [styles.bigred, styles.green] // big green
        </Text>
    </View>
);

const styles = StyleSheet.create({
    green: {
        color: 'green'
    },
    bigred: {
        color: 'red',
        fontSize: 35
    }
});

Pay attention to the use case with array of objects. You may combine previously-learned tricks to achieve conditional styles:

<View>
    <Text
        style={[
            styles.linkStyle,
            this.props.isActive && styles.activeLink
        ]}
    >
        Some link
    </Text>
</View>

Also, let's discuss why we use the StyleSheet component instead of inline styles:

Code quality:
- By moving styles away from the render function, you're making the code easier to understand.
- Naming the styles is a good way to add meaning to the low-level components in the render function.
Performance:
- Making a stylesheet from a style object makes it possible to refer to it by ID instead of creating a new style object every time.
- It also allows you to send the style only once through the bridge. All subsequent uses are going to refer an ID (not implemented yet).

- React Native official documentation
https://facebook.github.io/react-native/docs/stylesheet.html.

When it comes to the quality and reusability, StyleSheet decouples styles and component markup. You could even extract these styles away to a separate file. Also, as mentioned in the documentation, it allows you to make your markup easier to understand. Instead of a huge styling object, you can see a meaningful name, such as styles.activeLink.

If you undervalue decoupling in your applications, then try to grow your code base beyond 5,000 lines. You will likely see that some tightly-coupled code will need hacks to be reusable. Bad practices will snowball, making the code base very hard to maintain. In backend systems, it usually goes hand-in-hand with monolithic structures. The amazing idea that comes to the rescue is Microservices. Learn more at https://en.wikipedia.org/wiki/Microservices .

官术网_书友最值得收藏!

Hands-On Design Patterns with React Native

How React Native styles work