@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

``bash
npm install @egintegrations/mobile-header
`

or

`bash
yarn add @egintegrations/mobile-header
`

Basic Usage

$3

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

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

$3

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

$3

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

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

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

$3

`tsx
centerContent={

My App Name

}
backgroundColor="#059669"
/>
`

$3

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

logo={require('./assets/logo.png')}
rightContent={
alert('Notifications')}>
🔔

}
/>
`

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

$3

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

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

$3

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

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

Complete Example

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

export default function ProfileScreen({ navigation }) {
return (

// Logo
logo={require('./assets/company-logo.png')}
logoWidth={140}
logoHeight={45}

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

// Right side - Settings button
rightContent={
navigation.navigate('Settings')}>
⚙️

}

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

{/ Your screen content /}

);
}
`

Styling Tips

$3

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

$3

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

$3

`tsx
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