react-native-back-with-title-menu

A React Native header component with back button, title and menu support.

Installation

npm install react-native-back-with-title-menu

Required Dependencies

npm install react-native-paper react-native-feather

Preview

Usage

import { BackButtonWithTitle } from 'react-native-back-with-title-menu';

export default function Screen() {
  return (
    <BackButtonWithTitle
      title="Screen Title"
      onPress={() => navigation.goBack()} // optional
      backColor="#000" // optional
      withMenu={true} // optional
      menuItems={[
        {
          title: 'Option 1',
          onPress: () => console.log('Option 1'),
        },
      ]} // optional, required if withMenu is true
    />
  );
}

Props

• title: The title of the screen.
• onPress: The function to call when the back button is pressed.
• backColor: The background color of the back button.
• withMenu: Whether to show the menu button.
• menuItems: The items to show in the menu.

Menu Items

• title: The title of the menu item.
• onPress: The function to call when the menu item is pressed.

Example (on SCREENSHOT)

import { BackButtonWithTitle } from 'react-native-back-with-title-menu';

        <BackButtonWithTitle
          onPress={() => router.back()}
          title="Example 1 (default)"
        />
        <BackButtonWithTitle
          onPress={() => router.back()}
          title="Example 2 (custom back color)"
          backColor={'#f48a71'}
        />
        <BackButtonWithTitle
          onPress={() => router.back()}
          title="Example 3 (custom title color)"
          titleColor={'#e8bae2'}
        />
        <BackButtonWithTitle
          onPress={() => router.back()}
          title="Example 4 (custom back and title color)"
          backColor={'#f48a71'}
          titleColor={'#e8bae2'}
        />
        <BackButtonWithTitle
          onPress={() => router.back()}
          title="Example 5 (with menu)"
          withMenu={true}
          menuItems={[
            {
              title: 'Item 1',
              onPress: () => console.log('Item 1 pressed'),
            },
            {
              title: 'Item 2',
              onPress: () => console.log('Item 2 pressed'),
            },
            {
              title: 'Item 3',
              onPress: () => console.log('Item 3 pressed'),
            },
          ]}
        />

        <BackButtonWithTitle
          onPress={() => router.back()}
          title="Example 6 (all custom)"
          backColor={'#f48a71'}
          titleColor={'#e8bae2'}
          withMenu={true}
          menuItems={[
            {
              title: 'Item 1',
              onPress: () => console.log('Item 1 pressed'),
            },
            {
              title: 'Item 2',
              onPress: () => console.log('Item 2 pressed'),
            },
            {
              title: 'Item 3',
              onPress: () => console.log('Item 3 pressed'),
            },
          ]}
        />