Use Higher Order Components for better code readability in React Native.

Photo by Nadine E on Unsplash

In this article we will talk about how higher order components can make your code more readable.

🚀 What is Higher Order Components ?

If a function takes UI (View) as a parameter or returns UI with some modification is called Higher Order Components.

UI can be Text , View , FlatList etc

Let’s understand by an Example

This is the scoreboard UI , Let’s see how we will make this UI in React Native with the help of Higher Order Components .

First we will break down this UI in the components. The break down results will be →

🔴 SearchBar

🔴 Select Game

🔴 Scoreboard

Now we successfully breakdown the UI.

Let’s create a function, that will accepts the above components.

import {memo, ReactNode} from 'react';
import {ScrollView} from 'react-native';

type Props = {
  searchBar?: ReactNode;
  selectGame?: ReactNode;
  scoreboard?: ReactNode;
}…