How React Native styles work

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' };

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:

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.