DEV Community

Matt Ruiz
Matt Ruiz

Posted on

4

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',
  },
});
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

đź‘‹ Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay