Hands-On Design Patterns with React Native

Workaround for limited inheritance

Imagine a situation where you would like to reuse the same font across the whole application. Given the mentioned inheritance limitations, how would you do that?

The solution is a mechanism that we have learned already: component composition. Let's create a component that satisfies our requirements:

// src/ Chapter_3/ Example_3/ src/ AppText.jsconst AppText = ({ children, ...props }) => (    <Text style={styles.appText} {...props}>        {children}    </Text>);// ... propTypes and defaultProps omitted for clarityconst styles = StyleSheet.create({    appText: {        fontFamily: 'Verdana'    }});export default AppText;

The AppText component just wraps the Text component and specifies its styles. In this simple example, it's just ...