Tackling HOC in React Native

Higher Order Component or HOC is a very simple concept with an incredible power. I will start out with some high level overview, and follow that with how to apply HOC to the real life examples.

What is Higher Order Component or HOC?

HOC is a function that takes React Component as input and outputs a new React Component.

Simple example of HOC

function HOC(Comp) {
return class NewComp extends Component {
render() {
return <Comp />
}
}
}

Which can be simplified using Stateless Functional Component and ES6 arrow functions

const HOC = Comp => props => <Comp />

Let’s make our HOC complete better by passing down all the props.

const HOC = Comp => props => <Comp {...props} />

Equivalently you can also write it as following to have more control over the placement of the children.

const HOC = Comp => ({children, ...props}) => (
<Comp {...props}>
{children}
</Comp>
)

Ok, so what about ref?

const HOC = Comp => ({newRef, children, ...props}) => (
<Comp ref={newRef} {...props}>
{children}
</Comp>
)

As you can see, ref isn’t passed down automatically, and has to be done manually using props, but luckily this does not increase the coupling nor complexity of our application.

When should you use HOC?

HOC is useful when you want to inject additional behaviours to the existing Component. You can use HOC to inject:

  • React Lifecycle (eg. execute code in componentWillMount)
  • State (eg. react-redux’s connect)
  • Component (Parent Component, Child Component, Sibling Component)
  • Style

Real Life Example

In this blog post, I am going to create a Login page and try to fix problems that arise one by one using HOC.

https://freebiesupply.com/free-sketch-mobile-design/login-page-with-onboarding-illustration-sketch-resource/

I am not going to waste your time with react-native stuff so here is the complete code for my super simple Login page.

Problem 1: There is no indicator that you are currently logging in.
Solution: Full Screen Blocking Spinner HOC

When you press SIGN IN button you want a large view that blocks the entire screen with a spinner in the middle.

What is going on?

Here, we are injecting 1 Parent View Component.
We are also injecting 1 Sibling View Component but only when ‘spinner’ props is true.
The Sibling View Component has style that fills up the entire screen with semi-transparent black background and has a ActivityIndicator in the centre.

Applying FullScreenSpinnerHOC to your Login Page Component

Problem 2: When keyboard appears, you cannot dismiss the keyboard by tapping outside of it.
Solution: DismissKeyboard HOC

Here, you can see I am injecting one Parent TouchableWithoutFeedback Component.

Problem 3: When keyboard appears, it blocks TextInput and SIGN IN button.

Keyboard blocks TextInput

Solution: Here, most people use KeyboardAvoidingView but it is very limiting on its own. Let’s create a HOC that injects new style when keyboard is visible. Now combine that with KeyboardAvoidingView padding. 👍

Here you can see I am injecting a React lifecycle method as well as apply a new style to our Component.🎉

I even included LayoutAnimation for you as a bonus 🤗

Now you can simply use this code to add/modify styles, or even completely hide a Component when the keyboard is visible. Oh and I forgot to mention, you can also HOC a HOC. 😂

KeyboardAwareHOC makes the image half transparent and padding below it go from 40 pts to 10 pts

If you want the full source code for this login page, here is the link
https://github.com/bosung90/HOCExample

If you found my blog post helpful please press 💚 and 🐦

Also check out Facebook’s official doc here.

Now go crazy on HOC!! 🙌