react-native-apple-header

Fully customizable Apple Header View for React Native

Usage no npm install needed!

<script type="module">
  import reactNativeAppleHeader from 'https://cdn.skypack.dev/react-native-apple-header';
</script>

README

React Native Apple Header

Battle Tested ✅

React Native Apple Header

npm version npm Platform - Android and iOS License: MIT styled with prettier

React Native Apple Header

Installation

Add the dependency:

npm i react-native-apple-header

Peer Dependencies

IMPORTANT! You need install them

"react": ">= 16.x.x",
"react-native": ">= 0.55.x",

Usage

Import

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

Fundamental Usage

<AppleHeader
  imageSource={{
    uri: profileImageSource,
  }}
/>

Configuration - Props

AppleHeader Props

Property Type Default Description
dateTitle string MONDAY, 27 NOVEMBER set your own string instead of date title
largeTitle string For You set your own large title
imageSource image image set your own image
onPress function null use this to set onPress functionality
backgroundColor color transparent use this to change the main container's background color
borderColor color #EFEFF4 use this to change the bottom border color
dateTitleFontColor color #8E8E93 use this to change the date title's font color
dateTitleFontSize number 13 use this to set the date title's font size
dateTitleFontWeight string "600" use this to set the date title's font weight
largeTitleFontColor color default color use this to change the large title's font color
largeTitleFontSize number 34 use this to set the large title's font size
largeTitleFontWeight string "bold" use this to set the large title's font weight
dateTitleStyle style default style use this to set your own style for date title (DO NOT RECOMMENDED!)
largeTitleStyle style default style use this to set your own style for large title (DO NOT RECOMMENDED!)
containerStyle style default style use this to set your own style for whole container (DO NOT RECOMMENDED!)
avatarStyle style default style use this to set your own style for avatar style (DO NOT FORGET TO ADD BORDER-RADIUS!)

Future Plans

  • LICENSE
  • Write an article about the lib on Medium

Credits

Thank you so much for the image Unsplash

Author

FreakyCoder, kurayogun@gmail.com

License

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