AppleHeader: It is completely customizable now

Author: WrathChaos

README.md

@@ -118,13 +118,30 @@ npm i @freakycoder/react-native-header-view
 
 #### Apple Header Props
 
+    avatarStyle,
+    containerStyle,
+
+
+
+| 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!) |
 
-| 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     |
 
 #### Modern Header Props
 

lib/src/components/AppleHeader/AppleHeader.js

@@ -1,31 +1,92 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { Text, View, Image, TouchableOpacity } from "react-native";
-import styles from "./AppleHeader.style";
+import styles, {
+  container,
+  _dateTitleStyle,
+  _largeTitleStyle
+} from "./AppleHeader.style";
 
 const AppleHeader = props => {
-  const { dateTitle, largeTitle, imageSource, onPress } = props;
+  const {
+    onPress,
+    dateTitle,
+    largeTitle,
+    avatarStyle,
+    imageSource,
+    containerStyle,
+    dateTitleStyle,
+    largeTitleStyle,
+    borderColor,
+    backgroundColor,
+    dateTitleFontSize,
+    dateTitleFontColor,
+    dateTitleFontWeight,
+    largeTitleFontSize,
+    largeTitleFontColor,
+    largeTitleFontWeight
+  } = props;
   return (
-    <View style={styles.container} {...props}>
+    <View style={containerStyle || container(backgroundColor, borderColor)}>
       <View>
-        <Text style={styles.date}>{dateTitle}</Text>
-        <Text style={styles.largeTitleStyle}>{largeTitle}</Text>
+        <Text
+          style={
+            dateTitleStyle ||
+            _dateTitleStyle(
+              dateTitleFontColor,
+              dateTitleFontSize,
+              dateTitleFontWeight
+            )
+          }
+        >
+          {dateTitle}
+        </Text>
+        <Text
+          style={
+            largeTitleStyle ||
+            _largeTitleStyle(
+              largeTitleFontColor,
+              largeTitleFontSize,
+              largeTitleFontWeight
+            )
+          }
+        >
+          {largeTitle}
+        </Text>
       </View>
       <TouchableOpacity style={styles.avatarContainerStyle} onPress={onPress}>
-        <Image style={styles.avatar} source={imageSource} {...props} />
+        <Image style={avatarStyle} source={imageSource} {...props} />
       </TouchableOpacity>
     </View>
   );
 };
 
 AppleHeader.propTypes = {
   dateTitle: PropTypes.string,
-  largeTitle: PropTypes.string
+  largeTitle: PropTypes.string,
+  dateTitleFontSize: PropTypes.number,
+  dateTitleFontColor: PropTypes.string,
+  dateTitleFontWeight: PropTypes.string,
+  backgroundColor: PropTypes.string,
+  largeTitleFontSize: PropTypes.number,
+  largeTitleFontColor: PropTypes.string,
+  largeTitleFontWeight: PropTypes.string
 };
 
 AppleHeader.defaultProps = {
-  dateTitle: "MONDAY, 27 NOVEMBER",
+  dateTitleFontSize: 13,
   largeTitle: "For You",
+  dateTitleFontWeight: "600",
+  largeTitleFontSize: 34,
+  borderColor: "#EFEFF4",
+  dateTitleFontColor: "#8E8E93",
+  avatarStyle: styles.avatar,
+  dateTitleStyle: styles.date,
+  largeTitleFontWeight: "bold",
+  backgroundColor: "transparent",
+  dateTitle: "MONDAY, 27 NOVEMBER",
+  containerStyle: styles.container,
+  largeTitleStyle: styles.largeTitleStyle,
   imageSource: require("../../../../assets/temp/joshua-rawson-harris-NdZtmw_jlMk-unsplash.jpg")
 };
 

lib/src/components/AppleHeader/AppleHeader.style.js

@@ -1,28 +1,39 @@
 import { Platform } from "react-native";
 
-export default {
-  container: {
+export const container = (backgroundColor, borderColor) => {
+  return {
+    borderColor,
+    backgroundColor,
     paddingBottom: 8,
     flexDirection: "row",
     marginHorizontal: 16,
     borderBottomWidth: 1,
-    borderColor: "#EFEFF4",
     alignItems: "flex-start",
     justifyContent: "space-between"
-  },
-  largeTitleStyle: {
-    fontSize: 34,
-    lineHeight: 41,
-    fontWeight: "bold",
-    letterSpacing: Platform.OS === "ios" ? 0.41 : undefined
-  },
-  date: {
-    color: "#8E8E93",
-    fontWeight: "600",
-    fontSize: 13,
+  };
+};
+
+export const _dateTitleStyle = (fontColor, fontSize, fontWeight) => {
+  return {
+    fontSize,
+    fontWeight,
     lineHeight: 18,
+    color: fontColor,
     letterSpacing: Platform.OS === "ios" ? -0.08 : undefined
-  },
+  };
+};
+
+export const _largeTitleStyle = (fontColor, fontSize, fontWeight) => {
+  return {
+    fontSize,
+    fontWeight,
+    lineHeight: 41,
+    color: fontColor,
+    letterSpacing: Platform.OS === "ios" ? 0.41 : undefined
+  };
+};
+
+export default {
   avatar: {
     height: 43,
     width: 43,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@freakycoder/react-native-header-view",
-  "version": "0.4.5",
+  "version": "0.4.6",
   "description": "Fully customizable Header View for React Native.",
   "keywords": [
     "apple",