Hands-On Design Patterns with React Native

Examples of useful HOCs

Do you need a quick logger that will show you how your app behaves? Or maybe you are preparing a live presentation and you want to show some dynamic information on a screen? Here we go:

// src/ Chapter_1/ Example_16_Useful_HOCs/ App.jsconst logPropChanges = Component => props => {    console.log('[Actual props]:', props);    return <Component {...props} />;};// Use: makeExpandable(logPropChanges(mapPropNames(SomeSection)));

Okay, good. Now, let's suppose that you are waiting on some data to load. Here comes the spinner:

// src/ Chapter_1/ Example_16_Useful_HOCs/ App.jsimport {ActivityIndicator} from 'react-native';const withSpinner = Component => props => (    props.shouldSpin        ? <View style={styles.container}>            <Text>Your fav ...