https://github.com/wrathchaos/react-native-apple-header

React Native Apple Header
https://github.com/wrathchaos/react-native-apple-header

Last synced: 2 months ago
JSON representation

React Native Apple Header

• Host: GitHub
• URL: https://github.com/wrathchaos/react-native-apple-header
• Owner: WrathChaos
• Created: 2020-08-22T18:25:17.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-02-14T07:06:38.000Z (over 2 years ago)
• Last Synced: 2025-07-14T07:57:14.805Z (3 months ago)
• Language: TypeScript
• Homepage:
• Size: 1.15 MB
• Stars: 11
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

          


[![Battle Tested ✅](https://img.shields.io/badge/-Battle--Tested%20%E2%9C%85-03666e?style=for-the-badge)](https://github.com/WrathChaos/react-native-apple-header)

[![React Native Apple Header](https://img.shields.io/badge/-Fully%20customizable%20Apple%20Header%20View%20for%20React%20Native-orange?style=for-the-badge)](https://github.com/WrathChaos/react-native-apple-header)

[![npm version](https://img.shields.io/npm/v/react-native-apple-header.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-apple-header)

[![npm](https://img.shields.io/npm/dt/react-native-apple-header.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-apple-header)

![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg?style=for-the-badge)

[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)

[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier)



  



# Version 1 🥳 🚀

- Better typing support

- Better customization

- Code cleaning

- Breaking CHANGES!

# Installation

Add the dependency:

```bash

npm i react-native-apple-header

```

## Peer Dependencies

Zero Dependencies

# Usage

## Import

```jsx

import AppleHeader from "react-native-apple-header";

```

## Fundamental Usage

```jsx

 {}}

/>

```

# Configuration - Props

## AppleHeader Props

| Property           |   Type    |    Default    | Description                                                                           |

| ------------------ | :-------: | :-----------: | ------------------------------------------------------------------------------------- |

| dateTitle          |  string   |   undefined   | set your own string instead of date title                                             |

| largeTitle         |  string   |   undefined   | set your own large title                                                              |

| imageSource        |   image   |   undefined   | set your own image                                                                    |

| onPress            | function  |   undefined   | use this to set onPress functionality                                                 |

| style              | ViewStyle | default style | use this to set your own style for whole container                                    |

| dateTitleTextStyle | TextStyle | default style | use this to set your own style for date title                                         |

| largeTitleStyle    | TextStyle | default style | use this to set your own style for large title                                        |

| avatarStyle        | ViewStyle | default style | use this to set your own style for avatar style (DO NOT FORGET TO ADD BORDER-RADIUS!) |

## Future Plans

- [x] ~~LICENSE~~

- [ ] Write an article about the lib on Medium

## Credits

Thank you so much for the image [Unsplash](https://images.unsplash.com/photo-1504730030853-eff311f57d3c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80)

## Author

FreakyCoder, kurayogun@gmail.com

## License

React Native Apple Header is available under the MIT license. See the LICENSE file for more info.