@egintegrations/mobile-header

A flexible, customizable header component for React Native applications with interchangeable logo support.

Features

• ✅ Interchangeable Logo: Easily swap logos via props
• ✅ Three-Section Layout: Left, center, and right content slots
• ✅ Safe Area Support: Automatic iOS status bar padding
• ✅ Customizable Styling: Colors, heights, shadows
• ✅ TypeScript: Full type safety
• ✅ Zero Dependencies: Only requires React Native core
• ✅ Helper Components: Includes BackButton and MenuButton

Installation

npm install @egintegrations/mobile-header

or

yarn add @egintegrations/mobile-header

Basic Usage

Simple Logo Header

import { Header } from '@egintegrations/mobile-header';

function App() {
  return (
    <Header
      logo={require('./assets/logo.png')}
    />
  );
}

With Remote Logo

<Header
  logo={{ uri: 'https://example.com/logo.png' }}
  logoWidth={150}
  logoHeight={50}
/>

With Navigation Controls

import { Header, BackButton, MenuButton } from '@egintegrations/mobile-header';
import { useNavigation } from '@react-navigation/native';

function Screen() {
  const navigation = useNavigation();

  return (
    <Header
      logo={require('./assets/logo.png')}
      leftContent={<BackButton onPress={() => navigation.goBack()} />}
      rightContent={<MenuButton onPress={() => navigation.openDrawer()} />}
      backgroundColor="#1E40AF"
    />
  );
}

Custom Center Content

<Header
  centerContent={
    <Text style={{ color: 'white', fontSize: 20, fontWeight: 'bold' }}>
      My App Name
    </Text>
  }
  backgroundColor="#059669"
/>

With Custom Actions

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

<Header
  logo={require('./assets/logo.png')}
  rightContent={
    <TouchableOpacity onPress={() => alert('Notifications')}>
      <Text style={{ fontSize: 24 }}>🔔</Text>
    </TouchableOpacity>
  }
/>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | logo | ImageSourcePropType | undefined | Logo image source (local or remote) | | logoWidth | number | 120 | Width of the logo image | | logoHeight | number | 40 | Height of the logo image | | centerContent | React.ReactNode | undefined | Custom content for center (replaces logo) | | leftContent | React.ReactNode | undefined | Content for left side (back button, menu, etc.) | | rightContent | React.ReactNode | undefined | Content for right side (profile, notifications, etc.) | | backgroundColor | string | '#FFFFFF' | Background color of the header | | height | number | 60 | Height of the header (excluding status bar) | | includeStatusBarPadding | boolean | true | Add padding for iOS status bar | | showShadow | boolean | true | Show bottom shadow/elevation | | style | ViewStyle | undefined | Custom style for container | | logoStyle | ImageStyle | undefined | Custom style for logo image |

Helper Components

BackButton

import { BackButton } from '@egintegrations/mobile-header';

<BackButton
  onPress={() => navigation.goBack()}
  color="#000000"
/>

MenuButton

import { MenuButton } from '@egintegrations/mobile-header';

<MenuButton
  onPress={() => navigation.openDrawer()}
  color="#000000"
/>

Complete Example

import React from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
import { Header, BackButton } from '@egintegrations/mobile-header';

export default function ProfileScreen({ navigation }) {
  return (
    <View style={{ flex: 1 }}>
      <Header
        // Logo
        logo={require('./assets/company-logo.png')}
        logoWidth={140}
        logoHeight={45}

        // Left side - Back button
        leftContent={
          <BackButton
            onPress={() => navigation.goBack()}
            color="#1F2937"
          />
        }

        // Right side - Settings button
        rightContent={
          <TouchableOpacity onPress={() => navigation.navigate('Settings')}>
            <Text style={{ fontSize: 24 }}>⚙️</Text>
          </TouchableOpacity>
        }

        // Styling
        backgroundColor="#F3F4F6"
        height={65}
        showShadow={true}
      />

      {/* Your screen content */}
    </View>
  );
}

Styling Tips

Transparent Header

<Header
  logo={require('./logo.png')}
  backgroundColor="transparent"
  showShadow={false}
/>

Colored Header

<Header
  logo={{ uri: 'https://example.com/white-logo.png' }}
  backgroundColor="#1E3A8A"
  showShadow={true}
/>

Tall Header

<Header
  logo={require('./logo.png')}
  height={80}
  logoHeight={60}
/>

Platform Differences

• iOS: Automatically includes status bar padding
• Android: No status bar padding (controlled by includeStatusBarPadding)
• Shadows: Uses shadowColor on iOS, elevation on Android

License

MIT

Contributing

See CONTRIBUTING.md

Support

• 📚 Documentation
• 🐛 Report Issues
• 💬 Discussions