Sweet HOCs: withBoxShadow

A wildly simple way to visually enhance your components.

In all of our apps at Hexient Labs, we try hard to ensure visual consistency among each component library. Managing this on a per-component basis can become very difficult if you’re applying classNames on the web, or inline styles in React Native.

We’re huge fans of functional programming, and as such, love managing visual consistency through composition. One of the easiest ways to grasp this concept is with a Higher-Order Component we use called withBoxShadow. This component can be applied to any class or functional component and wraps it in a div or View with a box shadow applied to it.

Here it is:

// withBoxShadow.js
import React from 'react'
import { View } from 'react-native'
import Colors from './constants/Colors'
const withShadow = BaseComponent => props => (
  <View
    style={{
      shadowColor: Colors.shadow,
      shadowOffset: { width: 2, height: 4 },
      shadowOpacity: 0.1
    }}
  >
    <BaseComponent {...props} />
  </View>
)
export default withShadow

And it can be used just like this:

// NotificationItem.js
import React from 'react'
import { Text, View } from 'react-native'
import withBoxShadow from './withBoxShadow'
const NotificationItem = ({ message }) => <Text>{message}</Text>
export default withBoxShadow(NotificationItem)

…and just like that, we transform our boring text items to have a beautiful box shadow 😃.

This is a bit of a contrived example; however, I hope you can see the potential to manage visual consistency and general styles via composition.

Need help building your mobile or web app? Hexient Labs!