Constructing a React Native Screen/Page Header

Hey everyone, in this blog we will be constructing a Screen Header Component.

Well we can call it the Screen or Page header. But basically what we are going to build will look something like this.

So lets get coding !!

Let us create a screen and say it is wrapped with <SafeAreaView/> and the 1st children component would be our `<PageHeader/>`.

Let us now start creating the Page Header Component.

Destructuring for our component :

It contains 3 parts : The Left Node, The Centre Node(Header), and The Right Node.

We will have to consider the many scenarios we will be using so as to decide if these nodes has to be controlled by props or not.

So what I have done is the Left and Right nodes will be controlled by props as JSX.Element and kept Centre Node as always a “Text” component.

So the props for this component for now are :

1. leftNode : JSX.Element
2. headerText : string
3. rightNode: JSX.Element

So the 1st Version of the PageHeader Component code would look something like this:

We will use it like this in our Screen.

<PageHeader headerText="Page Header" />

And the visually we get this :

This was pretty easy. Points to note is that we are using simple Flex to style these components.

Okay now lets add the left and right nodes which completes our header.

For the icon I am using react-native-svg and passing the svg as prop to the PageHeader component.

So now this would give us this, and yay it looks neat. 🎉

Well….

The left and right nodes dont work.

So lets give some life to it.

Let us add two more props to out PageHeader Component:

1. handleOnPressLeftNode
2. handleOnPressRightNode

Let us also change the Left and Right node View wrappers into a Pressable and assign the rightNode to an Image Component.

Hmmm 🤔, I think the size of the Page Header has increased.

So, we will have to control the style of the Left and Right nodes based on what its going to render.

Let us add props for the same:

1. rightContainerStyle
2. leftContainerStyle

And we will assign it to the nodes in a way that it overrides the default styles. The Final <PageHeader/> component would look something like this :

And use it in our screen like this:

With which we will get our original Page Header Height we want.

So now this <PageHeader/> component can be used in different scenarios.

Scenario 1 :

One such scenario can be a Screen which has User Details which can be edited.

The Initial State:

If a user changes any detail in here :

The Changed/Edited State:

On Press of Save while the API request for the Patch of details is been handled it can be changed to :

The API Hit/Patching Details State:

And the Right Node will return back to the Initial State/Edited State depending upon the response of the API request giving the Success/Error Message in a Toast.

Well talking about toast messages, i had previously return a blog about that. You can also check that out. :)

React Native Custom Toast with Zustand

Scenario 2 :

We can use this as a cool “React Native Progress Steps” or “React Native Step Indicator”.

In one of our apps we needed to get a bunch of details from the user as a part of “Onboarding Process” like:

1. User Details (in our case “Host”)
2. Home Details
3. Family Details
4. Preferences

So we used the Page Header something like this :

We also added a progress bar which would look something like this :

Let us look at what we need do to get this.

We will have to include a prop animatingWidthValues which will be an array of length 2 and have the initial and final value to animate.

The value should be between 0 to max-width of the mobile.

You will have to restructure our previous PageHeader Component, and add a view which just has a style of the “gray border”.

Then add an Animated View which will be absolutely placed above the the existing border, but will have a border-width more of the default one.

The code you want to add will look something like this.

The final Page Header Component will look something like this :

The animation will run after the screen transition has finished, we will use the help of InteractionManger over here and call it inside a useEffect.

And now the component can be used as

I am animating the values from 0 to 25% of the window width.

It would look something like this :

This brings us to the rather long breakdown of a Page Header.

Design concept by Fayas fs and Sandeep Prabhakaran.

This is Karthik representing Timeless.

If you find this blog post helpful, do tell me in the comments would love to read some. Thank you :)

If you find any difficulties please feel free to add your comments.

And and and I am now creating videos in Youtube !!! 🎉🍾

Honest Coding

Feel free to check it out and subscribe to my channel to stay updated with my latest videos on learning React Native.