diff --git a/README.md b/README.md index 4118b48..be7568e 100755 --- a/README.md +++ b/README.md @@ -43,18 +43,27 @@ npm i @freakycoder/react-native-header-view # Options +- GorgeousHeader - AppleHeader - ModernHeader - ClassicHeader # Usage +## Gorgeous Header Usage + +```jsx +import { Gorgeous } from "@freakycoder/react-native-header-view"; + + console.log(text)} />; +``` + ## Apple Header Usage ```jsx import { AppleHeader } from "@freakycoder/react-native-header-view"; - +; ``` ## Modern Header Usage @@ -62,7 +71,7 @@ import { AppleHeader } from "@freakycoder/react-native-header-view"; ```jsx import { ModernHeader } from "@freakycoder/react-native-header-view"; - +; ``` #### Advanced Usage @@ -79,7 +88,7 @@ import { ModernHeader } from "@freakycoder/react-native-header-view"; leftIconComponent={your - icon - component} rightIconComponent={your - icon - component} leftIconOnPress={() => NavigationService.back()} -/> +/>; ``` ## Classic Header Usage @@ -119,11 +128,28 @@ import { ClassicHeader } from "@freakycoder/react-native-header-view"; } -/> +/>; ``` # Configuration - Props +## Gorgeous Header Props + +| Property | Type | Default | Description | +| ------------------- | :------: | :----------------------------: | ----------------------------------------------------------------------- | +| title | string | Order | change the title | +| subtitle | string | Healthy food can keep you fit. | change the subtitle | +| searchIcon | asset | default | set your own icon for the search one | +| titleTextStyle | style | default | set your own style for title text | +| subtitleTextStyle | style | default | set your own style for subtitle text | +| searchInputStyle | style | default | set your own style for search text input | +| menuImageStyle | style | default | set your own style for hamburger menu image | +| menuImageSource | asset | default | set your own image instead of default hamburger menu image | +| menuImageOnPress | function | undefined | use this to set your own function for pressing the hamburger menu image | +| profileImageStyle | style | default | set your own style for profile image | +| profileImageSource | asset | undefined | use this to set your own image for profile image | +| profileImageOnPress | function | undefined | use this to set your own function for pressing the profile image | + ## Apple Header Props | Property | Type | Default | Description | diff --git a/example/App.js b/example/App.js index 5ab2bac..bd9f4ba 100644 --- a/example/App.js +++ b/example/App.js @@ -1,19 +1,18 @@ import React, { Fragment } from "react"; import { + Linking, StatusBar, SafeAreaView, TouchableOpacity, - Linking, } from "react-native"; import { AppleHeader, ModernHeader, ClassicHeader, + GorgeousHeader, } from "@freakycoder/react-native-header-view"; import Icon from "react-native-dynamic-vector-icons"; -import GorgeousHeader from "./lib/src/components/GorgeousHeader/GorgeousHeader"; - const App = () => { return ( @@ -33,7 +32,7 @@ const App = () => { /> */} {/* */} {/* */} - + console.log(text)} /> ); diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock index ee445e8..a8a1832 100644 --- a/example/ios/Podfile.lock +++ b/example/ios/Podfile.lock @@ -1,5 +1,7 @@ PODS: - boost-for-react-native (1.63.0) + - BVLinearGradient (2.5.6): + - React - DoubleConversion (1.1.6) - FBLazyVector (0.61.4) - FBReactNativeSpec (0.61.4): @@ -222,6 +224,7 @@ PODS: - Yoga (1.14.0) DEPENDENCIES: + - BVLinearGradient (from `../node_modules/react-native-linear-gradient`) - DoubleConversion (from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`) - FBLazyVector (from `../node_modules/react-native/Libraries/FBLazyVector`) - FBReactNativeSpec (from `../node_modules/react-native/Libraries/FBReactNativeSpec`) @@ -257,6 +260,8 @@ SPEC REPOS: - boost-for-react-native EXTERNAL SOURCES: + BVLinearGradient: + :path: "../node_modules/react-native-linear-gradient" DoubleConversion: :podspec: "../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec" FBLazyVector: @@ -312,6 +317,7 @@ EXTERNAL SOURCES: SPEC CHECKSUMS: boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c + BVLinearGradient: e3aad03778a456d77928f594a649e96995f1c872 DoubleConversion: 5805e889d232975c086db112ece9ed034df7a0b2 FBLazyVector: feb35a6b7f7b50f367be07f34012f34a79282fa3 FBReactNativeSpec: 51477b84b1bf7ab6f9ef307c24e3dd675391be44 diff --git a/example/ios/example.xcodeproj/xcshareddata/xcschemes/example.xcscheme b/example/ios/example.xcodeproj/xcshareddata/xcschemes/example.xcscheme index 1cef262..7ad0109 100644 --- a/example/ios/example.xcodeproj/xcshareddata/xcschemes/example.xcscheme +++ b/example/ios/example.xcodeproj/xcshareddata/xcschemes/example.xcscheme @@ -55,6 +55,15 @@ selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB" selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB" shouldUseLaunchSchemeArgsEnv = "YES"> + + + + @@ -67,17 +76,6 @@ - - - - - - - - { - const { - onPress, - dateTitle, - largeTitle, - avatarStyle, - imageSource, - containerStyle, - dateTitleStyle, - largeTitleStyle, - borderColor, - backgroundColor, - dateTitleFontSize, - dateTitleFontColor, - dateTitleFontWeight, - largeTitleFontSize, - largeTitleFontColor, - largeTitleFontWeight - } = props; - return ( - - - - {dateTitle} - - - {largeTitle} - - - - - - - ); -}; - -AppleHeader.propTypes = { - dateTitle: 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 = { - 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 -}; - -export default AppleHeader; diff --git a/example/lib/src/components/AppleHeader/AppleHeader.style.js b/example/lib/src/components/AppleHeader/AppleHeader.style.js deleted file mode 100644 index e3aa301..0000000 --- a/example/lib/src/components/AppleHeader/AppleHeader.style.js +++ /dev/null @@ -1,46 +0,0 @@ -import { Platform } from "react-native"; - -export const container = (backgroundColor, borderColor) => { - return { - borderColor, - backgroundColor, - paddingBottom: 8, - flexDirection: "row", - marginHorizontal: 16, - borderBottomWidth: 1, - alignItems: "flex-start", - justifyContent: "space-between" - }; -}; - -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, - borderRadius: 43 / 2 - }, - avatarContainerStyle: { - alignSelf: "center", - justifyContent: "center" - } -}; diff --git a/example/lib/src/components/ClassicHeader/ClassicHeader.js b/example/lib/src/components/ClassicHeader/ClassicHeader.js deleted file mode 100755 index cf8509d..0000000 --- a/example/lib/src/components/ClassicHeader/ClassicHeader.js +++ /dev/null @@ -1,103 +0,0 @@ -import React from "react"; -import PropTypes from "prop-types"; -import { SafeAreaView, View, Text, TouchableOpacity } from "react-native"; -import Icon from "react-native-dynamic-vector-icons"; -// Styles -import _styles, { - container, - _shadowStyle, - innerContainer, - _leftComponentStyle, - _rightComponentStyle -} from "./ClassicHeader.style"; - -const hitSlop = { - top: 30, - bottom: 30, - left: 30, - right: 30 -}; - -const ClassicHeader = props => { - const { - styles, - hitSlops, - shadowStyle, - headerTitle, - shadowColor, - leftComponent, - rightComponent, - centerComponent, - statusBarHidden, - leftComponentStyle, - rightComponentStyle, - leftComponentDisable, - leftComponentOnPress, - centerComponentStyle, - rightComponentDisable, - rightComponentOnPress - } = props; - return ( - - - - {leftComponent || ( - - - - )} - {centerComponent || ( - {headerTitle} - )} - {rightComponent || ( - - - - )} - - - - ); -}; - -ClassicHeader.propTypes = { - hitSlops: PropTypes.object, - ratings: PropTypes.string -}; - -ClassicHeader.defaultProps = { - hitSlops: hitSlop, - centerComponentStyle: _styles.centerComponentStyle -}; - -export default ClassicHeader; diff --git a/example/lib/src/components/ClassicHeader/ClassicHeader.style.js b/example/lib/src/components/ClassicHeader/ClassicHeader.style.js deleted file mode 100755 index b4c4ae0..0000000 --- a/example/lib/src/components/ClassicHeader/ClassicHeader.style.js +++ /dev/null @@ -1,80 +0,0 @@ -import { Platform } from "react-native"; -import { isIPhoneXFamily } from "@freakycoder/react-native-helpers"; - -export function container(props) { - const { height, width, backgroundColor, statusBarHidden } = props; - return { - width: width || "100%", - ...Platform.select({ - ios: { - top: 0, - height: isIPhoneXFamily - ? height || 60 - : height || (statusBarHidden ? 50 : 70) - }, - android: { - top: 0, - height: height || (statusBarHidden ? 60 : 70) - } - }), - // height: height || (Platform === "ios" ? 50 : statusBarHidden ? 90 : 120), - backgroundColor: backgroundColor || "white" - }; -} - -export function innerContainer(statusBarHidden) { - return { - flexDirection: "row", - alignItems: "flex-end", - justifyContent: "space-between", - ...Platform.select({ - ios: { - top: isIPhoneXFamily ? 12 : statusBarHidden ? 0 : 24 - }, - android: { - top: statusBarHidden ? 12 : 24 - } - }) - }; -} - -export function _shadowStyle(shadowColor) { - return { - ...Platform.select({ - ios: { - shadowRadius: 5, - shadowOpacity: 0.15, - shadowOffset: { width: 1, height: 7 }, - shadowColor: shadowColor || "#757575" - }, - android: { - elevation: 6 - } - }) - }; -} - -export function _leftComponentStyle(leftComponentDisable) { - return { - marginLeft: 16, - opacity: leftComponentDisable ? 0 : 1 - }; -} - -export function _rightComponentStyle(rightComponentDisable) { - return { - marginRight: 16, - opacity: rightComponentDisable ? 0 : 1 - }; -} - -export default { - centerComponentStyle: { - fontSize: 18, - alignSelf: "center", - textAlign: "center", - alignItems: "center", - justifyContent: "center", - color: "rgba(110, 157, 251, 1.0)" - } -}; diff --git a/example/lib/src/components/GorgeousHeader/GorgeousHeader.js b/example/lib/src/components/GorgeousHeader/GorgeousHeader.js deleted file mode 100644 index 12040ea..0000000 --- a/example/lib/src/components/GorgeousHeader/GorgeousHeader.js +++ /dev/null @@ -1,63 +0,0 @@ -import React, { Component } from "react"; -import { Text, View, Image, TouchableOpacity, TextInput } from "react-native"; -import Icon from "react-native-dynamic-vector-icons"; -/** - * ? Local Imports - */ -import styles from "./GorgeousHeader.style"; - -const menuImg = require("../../../local-assets/menu.png"); - -export default class GorgeousHeader extends Component { - render() { - return ( - - - {}}> - - - - {}}> - - - - - - Order - - - Healthy food can keep you fit. - - - - - - - - ); - } -} diff --git a/example/lib/src/components/GorgeousHeader/GorgeousHeader.style.js b/example/lib/src/components/GorgeousHeader/GorgeousHeader.style.js deleted file mode 100644 index ff8b4c5..0000000 --- a/example/lib/src/components/GorgeousHeader/GorgeousHeader.style.js +++ /dev/null @@ -1 +0,0 @@ -export default {}; diff --git a/example/lib/src/components/ModernHeader/ModernHeader.js b/example/lib/src/components/ModernHeader/ModernHeader.js deleted file mode 100644 index 5cbc10a..0000000 --- a/example/lib/src/components/ModernHeader/ModernHeader.js +++ /dev/null @@ -1,116 +0,0 @@ -import React from "react"; -import PropTypes from "prop-types"; -import { Text, View, TouchableOpacity } from "react-native"; -import Icon from "react-native-dynamic-vector-icons"; -import styles, { - container, - leftCompStyle, - rightCompStyle -} from "./ModernHeader.style"; - -const HITSLOP = 8; -const hitslopObj = { - top: HITSLOP, - left: HITSLOP, - right: HITSLOP, - bottom: HITSLOP -}; - -const ModernHeader = props => { - const { - left, - text, - right, - width, - height, - textStyle, - leftDisable, - leftIconName, - leftIconType, - leftIconSize, - rightDisable, - leftIconColor, - rightIconName, - rightIconType, - rightIconSize, - rightIconColor, - leftIconOnPress, - backgroundColor, - rightIconOnPress, - leftIconComponent, - rightIconComponent - } = props; - return ( - - {!leftDisable && ( - - {leftIconComponent || ( - - )} - - )} - {text} - {!rightDisable && ( - - {rightIconComponent || ( - - )} - - )} - - ); -}; - -ModernHeader.propTypes = { - left: PropTypes.number, - right: PropTypes.number, - text: PropTypes.string, - leftIconName: PropTypes.string, - leftIconType: PropTypes.string, - leftIconColor: PropTypes.string, - rightIconName: PropTypes.string, - rightIconType: PropTypes.string, - rightIconColor: PropTypes.string, - backgroundColor: PropTypes.string, - width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - leftIconSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - rightIconSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]) -}; - -ModernHeader.defaultProps = { - left: 16, - right: 16, - height: 70, - width: "100%", - leftIconSize: 25, - rightIconSize: 25, - text: "Header Title", - rightIconName: "heart", - rightIconType: "Entypo", - backgroundColor: "#fff", - leftIconType: "Ionicons", - leftIconColor: "#bbbabe", - rightIconColor: "#23c4c1", - textStyle: styles.textStyle, - leftIconName: "ios-arrow-back" -}; - -export default ModernHeader; diff --git a/example/lib/src/components/ModernHeader/ModernHeader.style.js b/example/lib/src/components/ModernHeader/ModernHeader.style.js deleted file mode 100644 index acb2e97..0000000 --- a/example/lib/src/components/ModernHeader/ModernHeader.style.js +++ /dev/null @@ -1,25 +0,0 @@ -export const leftCompStyle = left => ({ - left, - position: "absolute" -}); - -export const rightCompStyle = right => ({ - right, - position: "absolute" -}); - -export const container = (height, width, backgroundColor) => ({ - top: 0, - height, - width, - backgroundColor, - flexDirection: "row", - alignItems: "center", - justifyContent: "center" -}); - -export default { - textStyle: { - fontWeight: "800" - } -}; diff --git a/example/lib/src/index.js b/example/lib/src/index.js deleted file mode 100644 index cccbb19..0000000 --- a/example/lib/src/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import ClassicHeader from "./components/ClassicHeader/ClassicHeader"; -import ModernHeader from "./components/ModernHeader/ModernHeader"; -import AppleHeader from "./components/AppleHeader/AppleHeader"; - -export { ClassicHeader, ModernHeader, AppleHeader }; diff --git a/example/package.json b/example/package.json index 270f52c..928b6f6 100644 --- a/example/package.json +++ b/example/package.json @@ -10,7 +10,7 @@ "lint": "eslint ." }, "dependencies": { - "@freakycoder/react-native-header-view": "^0.4.11", + "@freakycoder/react-native-header-view": "^0.5.0", "@freakycoder/react-native-helpers": "0.0.21", "react": "16.12.0", "react-native": "0.61.4", diff --git a/lib/local-assets/menu-1.png b/lib/local-assets/menu-1.png deleted file mode 100644 index ff2d5d9..0000000 Binary files a/lib/local-assets/menu-1.png and /dev/null differ diff --git a/lib/local-assets/omid-armin-unsplash.jpg b/lib/local-assets/omid-armin-unsplash.jpg deleted file mode 100644 index f440325..0000000 Binary files a/lib/local-assets/omid-armin-unsplash.jpg and /dev/null differ diff --git a/lib/src/components/GorgeousHeader/GorgeousHeader.js b/lib/src/components/GorgeousHeader/GorgeousHeader.js index 12040ea..ed41c51 100644 --- a/lib/src/components/GorgeousHeader/GorgeousHeader.js +++ b/lib/src/components/GorgeousHeader/GorgeousHeader.js @@ -1,63 +1,93 @@ import React, { Component } from "react"; +import PropTypes from "prop-types"; import { Text, View, Image, TouchableOpacity, TextInput } from "react-native"; -import Icon from "react-native-dynamic-vector-icons"; /** * ? Local Imports */ import styles from "./GorgeousHeader.style"; const menuImg = require("../../../local-assets/menu.png"); +const searchImage = require("../../../local-assets/search.png"); -export default class GorgeousHeader extends Component { - render() { +class GorgeousHeader extends Component { + renderTopBar = () => { + const { + menuImageStyle, + menuImageSource, + menuImageOnPress, + profileImageStyle, + profileImageSource, + profileImageOnPress, + } = this.props; return ( - - - {}}> - - + + + + + + + + + ); + }; - {}}> - - - - - - Order - - - Healthy food can keep you fit. - - - - - + renderContent = () => { + const { + title, + subtitle, + searchIcon, + titleTextStyle, + searchInputStyle, + subtitleTextStyle, + } = this.props; + return ( + + {title} + + {subtitle} + + + + ); + }; + + render() { + return ( + + {this.renderTopBar()} + {this.renderContent()} + + ); } } + +GorgeousHeader.propTypes = { + title: PropTypes.string, + subtitle: PropTypes.string, +}; + +GorgeousHeader.defaultProps = { + title: "Order", + subtitle: "Healthy food can keep you fit.", +}; + +export default GorgeousHeader; diff --git a/lib/src/components/GorgeousHeader/GorgeousHeader.style.js b/lib/src/components/GorgeousHeader/GorgeousHeader.style.js index ff8b4c5..1b61baf 100644 --- a/lib/src/components/GorgeousHeader/GorgeousHeader.style.js +++ b/lib/src/components/GorgeousHeader/GorgeousHeader.style.js @@ -1 +1,46 @@ -export default {}; +export default { + container: { margin: 32 }, + topBarContainer: { + flexDirection: "row", + }, + floatLeft: { marginRight: "auto" }, + floatRight: { marginLeft: "auto" }, + menuImageStyle: { + width: 20, + height: 20, + }, + profileImageStyle: { + width: 40, + height: 40, + borderRadius: 20, + }, + contentContainer: { + marginTop: 24, + }, + titleTextStyle: { + fontSize: 46, + color: "#2c2305", + fontWeight: "bold", + }, + subtitleTextStyle: { + fontSize: 13, + marginTop: 5, + fontWeight: "400", + color: "#999893", + }, + searchBarStyle: { + padding: 16, + marginTop: 48, + borderRadius: 24, + flexDirection: "row", + backgroundColor: "#f8f8f8", + }, + searchImageStyle: { + width: 20, + height: 20, + }, + searchInputStyle: { + marginLeft: 12, + fontWeight: "500", + }, +}; diff --git a/lib/src/index.js b/lib/src/index.js index cccbb19..de7af12 100644 --- a/lib/src/index.js +++ b/lib/src/index.js @@ -1,5 +1,6 @@ +import GorgeousHeader from "./components/GorgeousHeader/GorgeousHeader"; import ClassicHeader from "./components/ClassicHeader/ClassicHeader"; import ModernHeader from "./components/ModernHeader/ModernHeader"; import AppleHeader from "./components/AppleHeader/AppleHeader"; -export { ClassicHeader, ModernHeader, AppleHeader }; +export { ClassicHeader, ModernHeader, AppleHeader, GorgeousHeader }; diff --git a/package.json b/package.json index 6eccdd9..f6d282d 100755 --- a/package.json +++ b/package.json @@ -1,8 +1,10 @@ { "name": "@freakycoder/react-native-header-view", - "version": "0.4.13", - "description": "Fully customizable Header View for React Native.", + "version": "0.5.0", + "description": "Fully customizable Collection of Header View for React Native.", "keywords": [ + "gorgeous", + "gorgeous-header", "apple", "apple-header", "header",