AppleHeader is completed and integrated

Author: kuraydev

.DS_Store

@@ -1,27 +1,25 @@
-'use strict';
-
 module.exports = {
-  parser: 'babel-eslint',
-  extends: 'airbnb',
-  plugins: ['react', 'react-native'],
+  parser: "babel-eslint",
+  extends: "airbnb",
+  plugins: ["react", "react-native"],
   env: {
     jest: true,
-    'react-native/react-native': true,
+    "react-native/react-native": true
   },
   rules: {
     // allow js file extension
-    'react/jsx-filename-extension': [
-      'error',
+    "react/jsx-filename-extension": [
+      "error",
       {
-        extensions: ['.js', '.jsx'],
-      },
+        extensions: [".js", ".jsx"]
+      }
     ],
     // for post defining style object in react-native
-    'no-use-before-define': ['error', { variables: false }],
+    "no-use-before-define": ["error", { variables: false }],
     // react-native rules
-    'react-native/no-unused-styles': 2,
-    'react-native/split-platform-components': 2,
-    'react-native/no-inline-styles': 2,
-    'react-native/no-raw-text': 2,
-  },
+    "react-native/no-unused-styles": 2,
+    "react-native/split-platform-components": 2,
+    "react-native/no-inline-styles": 2,
+    "react-native/no-raw-text": 2
+  }
 };

assets/temp/joshua-rawson-harris-NdZtmw_jlMk-unsplash.jpg

@@ -1,6 +1,10 @@
 import React, { Fragment } from "react";
 import { StatusBar, SafeAreaView } from "react-native";
-import { ClassicHeader, ModernHeader } from "@freakycoder/react-native-header-view";
+import {
+  AppleHeader,
+  ModernHeader,
+  ClassicHeader
+} from "@freakycoder/react-native-header-view";
 
 const App = () => {
   return (
@@ -19,7 +23,8 @@ const App = () => {
             </TouchableOpacity>
           }
         /> */}
-        <ModernHeader />
+        {/* <ModernHeader /> */}
+        <AppleHeader />
       </SafeAreaView>
     </Fragment>
   );

example/.eslintrc.js

@@ -8,7 +8,7 @@
     "lint": "eslint ."
   },
   "dependencies": {
-    "@freakycoder/react-native-header-view": "^0.3.11",
+    "@freakycoder/react-native-header-view": "^0.4.0",
     "react": "16.8.6",
     "react-native": "0.60.4",
     "react-native-dynamic-vector-icons": "0.0.4",

example/App.js

@@ -0,0 +1,32 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Text, View, Image, TouchableOpacity } from "react-native";
+import styles from "./AppleHeader.style";
+
+const AppleHeader = props => {
+  const { dateTitle, largeTitle, imageSource, onPress } = props;
+  return (
+    <View style={styles.container} {...props}>
+      <View>
+        <Text style={styles.date}>{dateTitle}</Text>
+        <Text style={styles.largeTitleStyle}>{largeTitle}</Text>
+      </View>
+      <TouchableOpacity style={styles.avatarContainerStyle} onPress={onPress}>
+        <Image style={styles.avatar} source={imageSource} {...props} />
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+AppleHeader.propTypes = {
+  dateTitle: PropTypes.string,
+  largeTitle: PropTypes.string
+};
+
+AppleHeader.defaultProps = {
+  dateTitle: "MONDAY, 27 NOVEMBER",
+  largeTitle: "For You",
+  imageSource: require("../../../../assets/temp/joshua-rawson-harris-NdZtmw_jlMk-unsplash.jpg")
+};
+
+export default AppleHeader;

example/assets/temp/joshua-rawson-harris-NdZtmw_jlMk-unsplash.jpg

@@ -0,0 +1,35 @@
+import { Platform } from "react-native";
+
+export default {
+  container: {
+    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,
+    lineHeight: 18,
+    letterSpacing: Platform.OS === "ios" ? -0.08 : undefined
+  },
+  avatar: {
+    height: 43,
+    width: 43,
+    borderRadius: 43 / 2
+  },
+  avatarContainerStyle: {
+    alignSelf: "center",
+    justifyContent: "center"
+  }
+};

example/package.json

@@ -1,4 +1,5 @@
 import ClassicHeader from "./components/ClassicHeader/ClassicHeader";
 import ModernHeader from "./components/ModernHeader/ModernHeader";
+import AppleHeader from "./components/AppleHeader/AppleHeader";
 
-export { ClassicHeader, ModernHeader };
+export { ClassicHeader, ModernHeader, AppleHeader };

lib/src/components/AppleHeader/AppleHeader.js

@@ -1,8 +1,15 @@
 {
   "name": "@freakycoder/react-native-header-view",
-  "version": "0.3.11",
+  "version": "0.4.0",
   "description": "Fully customizable Header View for React Native.",
   "keywords": [
+    "apple",
+    "apple-header",
+    "header",
+    "classic",
+    "modern",
+    "modern-header",
+    "classic-header",
     "react-native",
     "icons",
     "javascript",