Hands-On Design Patterns with React Native

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.jsexport 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 ...