I have always been interested in writing about higher-level functions and higher-level components in JavaScript but lacked the ability to create meaningful ones in my projects. A higher-order function takes a function as an argument or returns a function as a function. A higher-order component is a function that takes a component and returns a new component. In my pursuit of building React Native applications, I stumbled upon the need to create reusable components to scale my applications appropriately.
My experience with React Native has been with the plain bare CLI and the EXPO CLI versions. In Bare React Native, there are two separate folders to manage components for Android and IOS. In EXPO, the application manages both applications for you. A problem that arises is that components will render differently based on the screens of an Android phone and an iPhone. To create an application that will work across both operating systems means to account for the whims of both.
The notch on the iPhone X and the status bar on top of many Androids will cause the rendering components to be at different positions. The more screens I create in my applications, the more styling I will need to do to fix my components to accommodate for the differences… if I do not utilize higher-order components to unified my screens.
import { SafeAreaView } from 'react-native';
import Constants from 'expo-constants';I need the SafeAreaView component from the react-native library to account for the notch spacing on the top of an iPhone X. This will ensure my components do not render in the none-safe notch area. I will need Constants from the expo-constants library and retrieve the statusBarHeight component to account for the “safe” spacing for the top of my Andriod screen. I needed to create a higher-order component that can account for both spacing problems and utilized the created component across screens that need to render content from the top viewable area. I created the following SafeScreen higher-order component to help my screens render appropriately.
import React from 'react'
import Constants from 'expo-constants';
import { SafeAreaView, StyleSheet, View } from 'react-native';const SafeScreen =({ children, style })=>{
return(
<SafeAreaView style= {[styles.container, style ]}>
<View style={[styles.view], style}>
{children}
</View>
</SafeAreaView>
)
}export default SafeScreenconst styles = StyleSheet.create({
container:{
flex:1,
paddingTop:Constants.statusBarHeight
}
})
This SafeScreen component when imported to other components will convert the children props and render it into a viewable screen area. Because I implemented both Andriod and iPhone fixes in this component, any screen that utilizes this component will render children safely. This component will is reusable and will save me from having to rewrite my SafeScreen code. This SafeScreen container may take in a style prop as well. With the style prop, my components that utilized this screen can be customized and style as much as they need/want. The StyleSheet in this component will only govern the viewability area, but this StyleSheet may be utilized to make overarching changes to my viewing screens. Having reusable code means reducing the need to create more wasteful code and recycle my code meaningfully.
Writing reusable code makes it easier to build new components or parts of the application. Reusable code also makes it easier to make changes across components that use this piece.
My higher-order component code is not perfect, but I will be able to upgrade this code and scale better when as I code more. I hope I can gain more insight on creating components and functions as I implement more applications. I hope my lessons can alleviate the pains that others are going thru.
Until next time, Cheers!
James Wu
References:
