Learning Higher-Order Components in React by Building a Loading Screen

A higher-order component in the wild by Gamze Bozkaya on Unsplash

Why?

An InfoScreen that renders Hi when loading is false in React Native

What do I know?

Highly Organized Fruit by Alex Block on Unsplash

First Pass

First pass at a loading indicator higher-order component
export default withLoadingScreen(InfoScreen)
export default connect(mapStateToProps, mapActionCreators)(InfoScreen)

Compose

various compose imports from redux / react-apollo

Does it work?

Second Pass: Hoisting Static Variables

Second pass at LoadingScreen higher-order component

Third Pass: Passing in Options

withNavigationOptions Higher Order Component with additional options
withLoadingScreen('large')(InfoScreen)// or using compose:compose(
withLoadingScreen('large'),
compose(mapStateToProps, mapActionCreators)
)(InfoScreen)

Bonus Round: Naming Your Components

function getDisplayName(WrappedComponent) {
return (
WrappedComponent.displayName || WrappedComponent.name || "LoadingScreen"
);
}
A higher-order component with a display name

Conclusion

Fun things to do:

Just a millennial looking for a feature-free rewrite.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store