From ac9b2247dc7453dd7cbc4c0b7f0ca4cfb1fce653 Mon Sep 17 00:00:00 2001 From: FreakyCoder Date: Sat, 23 Feb 2019 12:12:06 +0300 Subject: [PATCH 1/9] README is updated: ChangeLog is added. --- CHANGELOG.md | 5 ----- README.md | 3 +++ 2 files changed, 3 insertions(+), 5 deletions(-) delete mode 100644 CHANGELOG.md diff --git a/CHANGELOG.md b/CHANGELOG.md deleted file mode 100644 index 59664f1..0000000 --- a/CHANGELOG.md +++ /dev/null @@ -1,5 +0,0 @@ -# Change Log - - - -\* *This Change Log was automatically generated by [github_changelog_generator](https://github.com/skywinder/Github-Changelog-Generator)* \ No newline at end of file diff --git a/README.md b/README.md index 9a5b891..860088d 100644 --- a/README.md +++ b/README.md @@ -95,6 +95,9 @@ npm i @freakycoder/react-native-header-view | centerComponent | component | Icon | set the center component | | centerComponentStyle | style | style | set the center component's style | +# Change Log + +## [0.2.0](https://github.com/wrathchaos/react-native-header-view/tree/0.2.0) (2019-02-23) ## Author From 95b9f537864304c6c636ad417174620d84192949 Mon Sep 17 00:00:00 2001 From: FreakyCoder Date: Sat, 23 Feb 2019 12:19:09 +0300 Subject: [PATCH 2/9] #example package.json is updated --- examples/package-lock.json | 6 +++--- examples/package.json | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/examples/package-lock.json b/examples/package-lock.json index 11f12c6..c8be0a0 100644 --- a/examples/package-lock.json +++ b/examples/package-lock.json @@ -798,9 +798,9 @@ } }, "@freakycoder/react-native-header-view": { - "version": "0.1.17", - "resolved": "https://registry.npmjs.org/@freakycoder/react-native-header-view/-/react-native-header-view-0.1.17.tgz", - "integrity": "sha512-49tUy76savgU21jsZbAJbCIv83QBrmVxlX3Mc4O22UnxKZkAQqtNzP0p7m3WcZbpvMn4VU1bfZXFl+2I3vkXeQ==" + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@freakycoder/react-native-header-view/-/react-native-header-view-0.2.0.tgz", + "integrity": "sha512-l3wlyjze+oM9nLDAA1/8THbZIw2tj6fLE4DfSrnOHlFUvsG8fG8I7/lqhq5J1SMhdc261Ko1+5QKOr0K6AYMbA==" }, "abab": { "version": "2.0.0", diff --git a/examples/package.json b/examples/package.json index d6f8bb1..b79fc04 100644 --- a/examples/package.json +++ b/examples/package.json @@ -12,7 +12,7 @@ "react-native-vector-icons": "^6.3.0", "react-native-iphone-x-helper": "^1.2.0", "react-native-dynamic-vector-icons": "0.0.3", - "@freakycoder/react-native-header-view": "0.1.17" + "@freakycoder/react-native-header-view": "0.2.0" }, "devDependencies": { "babel-core": "^7.0.0-bridge.0", From 1fb0cf5a45075c6f148bef22aacea014fb28f2f9 Mon Sep 17 00:00:00 2001 From: FreakyCoder Date: Sat, 23 Feb 2019 14:03:12 +0300 Subject: [PATCH 3/9] README updated. --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 860088d..0dff2df 100644 --- a/README.md +++ b/README.md @@ -2,8 +2,8 @@ Fully customizable Header View for React Native. -[![npm version](https://img.shields.io/npm/v/react-native-header-view.svg)](https://www.npmjs.com/package/react-native-header-view) -[![npm downloads](https://img.shields.io/npm/dm/react-native-header-view.svg)](https://www.npmjs.com/package/react-native-header-view) +[![npm version](https://img.shields.io/npm/v/@freakycoder/react-native-header-view.svg)](https://www.npmjs.com/package/@freakycoder/react-native-header-view) +[![npm downloads](https://img.shields.io/npm/dm/@freakycoder/react-native-header-view.svg)](https://www.npmjs.com/package/@freakycoder/react-native-header-view) [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT)

From 5f93125f85b3addcecbcb7059c035054bc9253e3 Mon Sep 17 00:00:00 2001 From: FreakyCoder Date: Tue, 26 Feb 2019 16:57:53 +0300 Subject: [PATCH 4/9] ReadME is updated. --- README.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 0dff2df..91e154e 100644 --- a/README.md +++ b/README.md @@ -2,9 +2,13 @@ Fully customizable Header View for React Native. -[![npm version](https://img.shields.io/npm/v/@freakycoder/react-native-header-view.svg)](https://www.npmjs.com/package/@freakycoder/react-native-header-view) +[[![npm version](https://img.shields.io/npm/v/@freakycoder/react-native-header-view.svg)](https://www.npmjs.com/package/@freakycoder/react-native-header-view) [![npm downloads](https://img.shields.io/npm/dm/@freakycoder/react-native-header-view.svg)](https://www.npmjs.com/package/@freakycoder/react-native-header-view) +[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT)]([![npm version](https://img.shields.io/npm/v/@freakycoder/react-native-header-view.svg)](https://www.npmjs.com/package/@freakycoder/react-native-header-view) +[![npm](https://img.shields.io/npm/dt/@freakycoder/react-native-header-view.svg)](https://www.npmjs.org/package/@freakycoder/react-native-header-view) [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT) +![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-yellow.svg) +[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier))

React Native Header View From 61e119e011e9440a9c7d8459fa838b17ec1542fc Mon Sep 17 00:00:00 2001 From: FreakyCoder Date: Tue, 26 Feb 2019 17:03:15 +0300 Subject: [PATCH 5/9] README is updated --- README.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 91e154e..46ab755 100644 --- a/README.md +++ b/README.md @@ -2,13 +2,11 @@ Fully customizable Header View for React Native. -[[![npm version](https://img.shields.io/npm/v/@freakycoder/react-native-header-view.svg)](https://www.npmjs.com/package/@freakycoder/react-native-header-view) -[![npm downloads](https://img.shields.io/npm/dm/@freakycoder/react-native-header-view.svg)](https://www.npmjs.com/package/@freakycoder/react-native-header-view) -[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT)]([![npm version](https://img.shields.io/npm/v/@freakycoder/react-native-header-view.svg)](https://www.npmjs.com/package/@freakycoder/react-native-header-view) +[![npm version](https://img.shields.io/npm/v/@freakycoder/react-native-header-view.svg)](https://www.npmjs.com/package/@freakycoder/react-native-header-view) [![npm](https://img.shields.io/npm/dt/@freakycoder/react-native-header-view.svg)](https://www.npmjs.org/package/@freakycoder/react-native-header-view) [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT) ![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-yellow.svg) -[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)) +[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

React Native Header View From f73fd1ae158fde9d84ed88b6fb1015e6762ca9cb Mon Sep 17 00:00:00 2001 From: FreakyCoder Date: Tue, 26 Feb 2019 17:03:44 +0300 Subject: [PATCH 6/9] README is updated --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 46ab755..f0927f0 100644 --- a/README.md +++ b/README.md @@ -4,8 +4,8 @@ Fully customizable Header View for React Native. [![npm version](https://img.shields.io/npm/v/@freakycoder/react-native-header-view.svg)](https://www.npmjs.com/package/@freakycoder/react-native-header-view) [![npm](https://img.shields.io/npm/dt/@freakycoder/react-native-header-view.svg)](https://www.npmjs.org/package/@freakycoder/react-native-header-view) -[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT) ![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-yellow.svg) +[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT) [![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

From 69bc68fb028af83bf9a693ffa890b0fe46cdd295 Mon Sep 17 00:00:00 2001 From: FreakyCoder Date: Tue, 26 Feb 2019 17:04:06 +0300 Subject: [PATCH 7/9] README is updated --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index f0927f0..b6f739f 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ Fully customizable Header View for React Native. [![npm version](https://img.shields.io/npm/v/@freakycoder/react-native-header-view.svg)](https://www.npmjs.com/package/@freakycoder/react-native-header-view) [![npm](https://img.shields.io/npm/dt/@freakycoder/react-native-header-view.svg)](https://www.npmjs.org/package/@freakycoder/react-native-header-view) -![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-yellow.svg) +![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg) [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT) [![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier) From e9a7d06c17345d2d0822f34c8786cd87b28a305f Mon Sep 17 00:00:00 2001 From: FreakyCoder Date: Fri, 1 Mar 2019 16:56:49 +0300 Subject: [PATCH 8/9] #New Version 0.2.1: Android UI Hot fixes. --- examples/package.json | 2 +- lib/components/Header.js | 224 +++++++++++++++++---------------- lib/components/Header.style.js | 30 +++-- package.json | 2 +- 4 files changed, 140 insertions(+), 118 deletions(-) diff --git a/examples/package.json b/examples/package.json index b79fc04..67e7482 100644 --- a/examples/package.json +++ b/examples/package.json @@ -12,7 +12,7 @@ "react-native-vector-icons": "^6.3.0", "react-native-iphone-x-helper": "^1.2.0", "react-native-dynamic-vector-icons": "0.0.3", - "@freakycoder/react-native-header-view": "0.2.0" + "@freakycoder/react-native-header-view": "0.2.1" }, "devDependencies": { "babel-core": "^7.0.0-bridge.0", diff --git a/lib/components/Header.js b/lib/components/Header.js index f45202c..2cb6fdf 100644 --- a/lib/components/Header.js +++ b/lib/components/Header.js @@ -1,121 +1,131 @@ import React from "react"; -import PropTypes from 'prop-types'; -import { - Dimensions, - View, - Text, - TouchableOpacity -} from "react-native"; -import Icon from "react-native-dynamic-vector-icons" +import PropTypes from "prop-types"; +import { Dimensions, View, Text, TouchableOpacity } from "react-native"; +import Icon from "react-native-dynamic-vector-icons"; // Styles import _styles, { - container, - _shadowStyle, - hitSlop, - ifIPhoneXHeader -} from './Header.style'; -import colors from './colors.style'; + container, + _shadowStyle, + hitSlop, + ifIPhoneXHeader +} from "./Header.style"; +import colors from "./colors.style"; const { width } = Dimensions.get("window"); -const Header = (props) => { - const { - styles, - hitSlops, - shadowStyle, - headerTitle, - leftComponent, - leftComponentStyle, - leftComponentDisable, - leftComponentOnPress, - rightComponent, - rightComponentStyle, - rightComponentDisable, - rightComponentOnPress, - centerComponent, - centerComponentStyle - } = props; +const Header = props => { + const { + styles, + hitSlops, + shadowStyle, + headerTitle, + leftComponent, + leftComponentStyle, + leftComponentDisable, + leftComponentOnPress, + rightComponent, + rightComponentStyle, + rightComponentDisable, + rightComponentOnPress, + centerComponent, + centerComponentStyle + } = props; - return ( - - - {leftComponent - || - - } - {centerComponent - || - {headerTitle} - } - {rightComponent - || - - } - - - ); -} + return ( + + + {leftComponent || ( + + + + )} + {centerComponent || ( + + {headerTitle} + + )} + {rightComponent || ( + + + + )} + + + ); +}; Header.propTypes = { - styles: PropTypes.object, - height: PropTypes.number, - width: PropTypes.number, - hitSlops: PropTypes.object, - bottomStick: PropTypes.bool, - shadowStyle: PropTypes.object, - headerTitle: PropTypes.string, - backgroundColor: PropTypes.string, - leftComponent: PropTypes.element, - leftComponentStyle: PropTypes.object, - leftComponentDisable: PropTypes.bool, - leftComponentOnPress: PropTypes.func, - rightComponent: PropTypes.element, - rightComponentStyle: PropTypes.object, - rightComponentDisable: PropTypes.bool, - rightComponentOnPress: PropTypes.func, - centerComponent: PropTypes.element, - centerComponentStyle: PropTypes.object, + styles: PropTypes.object, + width: PropTypes.number, + hitSlops: PropTypes.object, + bottomStick: PropTypes.bool, + shadowStyle: PropTypes.object, + headerTitle: PropTypes.string, + backgroundColor: PropTypes.string, + leftComponent: PropTypes.element, + leftComponentStyle: PropTypes.object, + leftComponentDisable: PropTypes.bool, + leftComponentOnPress: PropTypes.func, + rightComponent: PropTypes.element, + rightComponentStyle: PropTypes.object, + rightComponentDisable: PropTypes.bool, + rightComponentOnPress: PropTypes.func, + centerComponent: PropTypes.element, + centerComponentStyle: PropTypes.object }; Header.defaultProps = { - styles: null, - height: 50, - width: width, - hitSlops: hitSlop, - bottomStick: false, - shadowStyle: _shadowStyle, - headerTitle: '', - backgroundColor: "#fff", - leftComponent: null, - leftComponentStyle: null, - leftComponentDisable: true, - leftComponentOnPress: () => { }, - rightComponent: null, - rightComponentStyle: null, - rightComponentDisable: true, - rightComponentOnPress: () => { }, - centerComponent: null, - centerComponentStyle: null, + styles: null, + width: width, + hitSlops: hitSlop, + bottomStick: false, + shadowStyle: _shadowStyle, + headerTitle: "", + backgroundColor: "#fff", + leftComponent: null, + leftComponentStyle: null, + leftComponentDisable: true, + leftComponentOnPress: () => {}, + rightComponent: null, + rightComponentStyle: null, + rightComponentDisable: true, + rightComponentOnPress: () => {}, + centerComponent: null, + centerComponentStyle: null }; -export default Header; \ No newline at end of file +export default Header; diff --git a/lib/components/Header.style.js b/lib/components/Header.style.js index fab25aa..2001233 100644 --- a/lib/components/Header.style.js +++ b/lib/components/Header.style.js @@ -7,8 +7,8 @@ export const ifIPhoneXHeader = { marginTop: 44, marginBottom: 44, }, { - marginTop: 16, - }), + marginTop: 16, + }), }; export const hitSlop = { @@ -30,19 +30,31 @@ export const _shadowStyle = { } export function container(props) { - const {backgroundColor, height, width, bottomStick} = props; + const { backgroundColor, height, width, bottomStick } = props; return ({ - backgroundColor: backgroundColor || colors.theme.light.white, - height: height || 50, - width: width || "100%", - top: bottomStick ? null : 0, - bottom: bottomStick ? 0 : null + ...Platform.select({ + ios: { + backgroundColor: backgroundColor || colors.theme.light.white, + height: height || 50, + width: width || "100%", + top: bottomStick ? null : 0, + bottom: bottomStick ? 0 : null + }, + android: { + backgroundColor: backgroundColor || colors.theme.light.primary, + height: height || 60, + width: width || "100%", + top: bottomStick ? null : -16, + bottom: bottomStick ? 0 : null + }, + }) + }) } export default { innerContainer: { - top: 8, + top: 16, flexDirection: 'row', alignItems: 'flex-end', justifyContent: 'space-between', diff --git a/package.json b/package.json index 01a38c4..234fd07 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@freakycoder/react-native-header-view", - "version": "0.2.0", + "version": "0.2.1", "description": "Fully customizable Header View for React Native.", "keywords": [ "react-native", From 41e52c7996e326107952c7cc50f0a032dd4d02be Mon Sep 17 00:00:00 2001 From: FreakyCoder Date: Tue, 5 Mar 2019 15:58:41 +0300 Subject: [PATCH 9/9] New version : 0.2.2: Now fully functional with Android and iOS. New feature: statusBarHidden; it re-arrange itself if you do not use status bar or not. --- README.md | 110 ++++++++++++++++++++++++++++- examples/App.js | 33 ++++++--- examples/package.json | 2 +- lib/components/Header.js | 92 +++++++----------------- lib/components/Header.style.js | 123 ++++++++++++++++----------------- lib/components/shared.style.js | 10 +++ 6 files changed, 226 insertions(+), 144 deletions(-) create mode 100644 lib/components/shared.style.js diff --git a/README.md b/README.md index b6f739f..ec10ea2 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -React Native Bottom Bar +[React Native Bottom Bar Fully customizable Header View for React Native. @@ -108,3 +108,111 @@ FreakyCoder, kurayogun@gmail.com ## License React Native Header View Library is available under the MIT license. See the LICENSE file for more info. +](React Native Header View + +Fully customizable Header View for React Native. + +[![npm version](https://img.shields.io/npm/v/@freakycoder/react-native-header-view.svg)](https://www.npmjs.com/package/@freakycoder/react-native-header-view) +[![npm downloads](https://img.shields.io/npm/dm/@freakycoder/react-native-header-view.svg)](https://www.npmjs.com/package/@freakycoder/react-native-header-view) +[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT) + +

+React Native Header View +

+ +## Installation + +Add the dependency: + +### Pure React Native: + +```ruby +npm i @freakycoder/react-native-header-view +``` + +## Peer Dependencies + +##### IMPORTANT! You need install them. + +``` +"react": ">= 16.x", +"react-native": ">= 0.55.x", +"react-native-iphone-x-helper": ">= 1.2.x", +"react-native-dynamic-vector-icons": ">= x.x.x" +``` + +## Basic Usage + +```ruby +
{}} + hitSlops={ + top: 30, + bottom: 30, + left: 30, + right: 30 + } +/> +``` + + +## Advanced Usage + +```ruby +
{}}> + + + } + hideRightComponent +/> +``` + +### Example Application + +- [check the code](examples/App.js), and yes! :) all of the images, screenshots are directly taken + from the this example. Of course, you can simply clone the project and run the example on your own environment. + +### Configuration - Props + + +| Property | Type | Default | Description | +| --------------------- | :-------: | :--------: | ---------------------------------------------------------------------------- | +| styles | styles | styles | use this to change main style of the header | +| height | number | 50 | use this to change the header's height | +| width | number | 100% | use this to change the header's width | +| statusBarHidden | boolean | false | use this to let Header Component itself re-arrange depends on the status bar | +| hitSlops | object | object: 30 | use this to change the header's left and right components' hitSlots | +| bottomStick | boolean | false | stick the header to bottom side | +| headerTitle | string | "" | use this to set header's title | +| backgroundColor | color | #ffffff | use this to change the header's background color | +| leftComponent | component | Icon | set the left component | +| leftComponentStyle | style | style | set the left component's style | +| leftComponentDisable | boolean | false | disable the left component | +| leftComponentOnPress | function | null | set the left component's onPress function | +| rightComponent | component | Icon | set the right component | +| rightComponentStyle | style | style | set the right component's style | +| rightComponentDisable | boolean | false | disable the right component | +| rightComponentOnPress | function | null | set the right component's onPress function | +| centerComponent | component | Icon | set the center component | +| centerComponentStyle | style | style | set the center component's style | + +# Change Log + +## [0.2.0](https://github.com/wrathchaos/react-native-header-view/tree/0.2.0) (2019-02-23) + + +## Author + +FreakyCoder, kurayogun@gmail.com + +## License + +React Native Header View Library is available under the MIT license. See the LICENSE file for more info. +) \ No newline at end of file diff --git a/examples/App.js b/examples/App.js index fd71874..8e90824 100644 --- a/examples/App.js +++ b/examples/App.js @@ -1,34 +1,37 @@ -import React from 'react'; +import React from "react"; import { + StatusBar, StyleSheet, Linking, Text, View, TouchableOpacity -} from 'react-native'; -import Header from '@freakycoder/react-native-header-view'; -import Icon from "react-native-dynamic-vector-icons" +} from "react-native"; +import Header from "@freakycoder/react-native-header-view"; +import Icon from "react-native-dynamic-vector-icons"; export default class App extends React.Component { render() { return ( +