Surprising styles inheritance

As we start to use styles, it is vital to understand that React Native styles do not work as a website's CSS. Especially when it comes to inheritance.

Styles of the parent component are not inherited unless it is a Text component. If it is a Text component, it will inherit from parent, only if parent is another Text component:

// src/ Chapter_3/ Example_2_Inheritance_of_Text_component/ App.js

export default () => (
    <View style={styles.container}>
        <Text style={styles.green}>
            some green text
            <Text style={styles.big}>
                some big green text
            </Text>
        </Text>
    </View>
);

const styles = StyleSheet.create({
    container: {
        marginTop: 40
    },
    green: {
        color: 'green'
    },
    big: {
        fontSize: 35
    }
});

If you run this code, you will see that the displayed text is green and that the later part is also big. Text with a big style inherited the green colour from the parent Text component. Please also note that the whole text is rendered inside of a View component that has a margin top of 40 dp that is density-independent pixels. Jump to the Learning unitless dimensions section to learn more.