Reusable Header component for React Native

Hola hola,

A Header should be consistent across your React Native application - both look and feel.

Therefore, it makes sense to have a reusable <Header /> component to use throughout your applications.

We can create a Header easily with React Native and TypeScript.

Here's the component:

import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { StyleSheet } from 'react-native';

type HeaderButton = {
  child: JSX.Element;
  onPress?: () => void;
};

type Props = {
  leftButton?: HeaderButton;
  rightButton?: HeaderButton;
};

export const Header = (props: Props) => {
  const {leftButton, rightButton} = props;

  return (
    <View style={styles.container}>
      <View style={styles.leftContainer}>
        {leftButton && (
          <TouchableOpacity onPress={leftButton.onPress}>
            {leftButton.child}
          </TouchableOpacity>
        )}
      </View>
      <View style={styles.middleContainer}>
        {/* Logo/Title/etc goes here */}
      </View>
      <View style={styles.rightContainer}>
        {rightButton && (
          <TouchableOpacity onPress={rightButton.onPress}>
            {rightButton.child}
          </TouchableOpacity>
        )}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingVertical: 16,
    paddingHorizontal: 20,
    backgroundColor: 'white',
  },
  leftContainer: {
    flex: 1,
    alignItems: 'flex-start',
  },
  rightContainer: {
    flex: 1,
    alignItems: 'flex-end',
  },
  middleContainer: {
    flex: 1,
    alignItems: 'center',
  },
});

Here's an example of the <Header /> component being used:

import React from 'react';
import { View, Text } from 'react-native';
import Header from './components/Header';

const App = () => {
  return (
    <View>
      <Header
        leftButton={{
          child: <Text>Back</Text>,
          onPress: () => {},
        }}
        rightButton={{
          child: <MenuSVG />,
          onPress: () => {},
        }}
      />
      <View>
        {/* Rest of your scren content goes here */}
      </View>
    </View>
  );
};

export default App;

We pass in the leftButton and rightButton props to customize the buttons inside the header. You can replace the child elements with your own custom icons or text and provide onPress event handlers to handle button clicks.

Feel free to experiment with different styles and configurations to make it suit your app's design as needed.

I've been working with React Native for the last 4 years and will continue documenting common React Native errors that we come across at TroutHouseTech.

-Matt