Skip to content

Commit 21fdc8c

Browse files
WrathChaosWrathChaos
committed
ModernHeader: height, width & backgroundColor props are added. Much more customizable now. README is updated
1 parent b568f0d commit 21fdc8c

File tree

4 files changed

+85
-69
lines changed

4 files changed

+85
-69
lines changed

‎README.md

Lines changed: 46 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,15 @@
11
<img alt="React Native Bottom Bar" src="https://github.com/WrathChaos/react-native-header-view/blob/master/assets/Screenshots/logo.png" width="1050"/>
22

3-
43
[![Battle Tested ✅](https://img.shields.io/badge/-Battle--Tested%20%E2%9C%85-03666e?style=for-the-badge)](https://github.com/WrathChaos/react-native-button)
54

6-
75
[![Fully customizable Header View with multiple design options for React Native.](https://img.shields.io/badge/-Fully%20customizable%20Header%20View%20with%20multiple%20design%20options%20for%20React%20Native.-lightgrey?style=for-the-badge)](https://github.com/WrathChaos/react-native-header-view)
86

9-
10-
117
[![npm version](https://img.shields.io/npm/v/@freakycoder/react-native-header-view.svg?style=for-the-badge)](https://www.npmjs.com/package/@freakycoder/react-native-header-view)
128
[![npm](https://img.shields.io/npm/dt/@freakycoder/react-native-header-view.svg?style=for-the-badge)](https://www.npmjs.org/package/@freakycoder/react-native-header-view)
139
![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg?style=for-the-badge)
1410
[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)
1511
[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier)
1612

17-
1813
<p align="center">
1914
<img alt="React Native Header View" src="assets/Screenshots/ss3.png" width="49.7%"/>
2015
<img alt="React Native Header View" src="assets/Screenshots/ss2.png" width="49.7%" height="420"/>
@@ -24,7 +19,6 @@
2419
<img alt="React Native Header View" src="assets/Screenshots/ss1.png" width="49.7%"/>
2520
</p>
2621

27-
2822
## Installation
2923

3024
Add the dependency:
@@ -46,7 +40,7 @@ npm i @freakycoder/react-native-header-view
4640
"react-native-dynamic-vector-icons": ">= x.x.x"
4741
```
4842

49-
# Options
43+
# Options
5044

5145
- AppleHeader
5246
- ModernHeader
@@ -72,13 +66,15 @@ npm i @freakycoder/react-native-header-view
7266
<ModernHeader
7367
text="Profile"
7468
rightIconType="Ionicons"
69+
backgroundColor="#fdfdfd"
7570
rightIconName="ios-settings"
7671
rightIconColor={colors.light.primary}
77-
leftIconComponent={your-icon-component}
78-
rightIconComponent={your-icon-component}
72+
leftIconComponent={your - icon - component}
73+
rightIconComponent={your - icon - component}
7974
leftIconOnPress={() => NavigationService.back()}
8075
/>
8176
```
77+
8278
## Classic Header Usage
8379

8480
#### Basic Usage
@@ -96,20 +92,19 @@ npm i @freakycoder/react-native-header-view
9692
}
9793
/>
9894
```
95+
9996
#### Advanced Custom Usage
10097

10198
```jsx
10299
<ClassicHeader
103100
headerTitle="Header"
104101
leftComponent={
105-
<TouchableOpacity
106-
onPress={() => {}}>
102+
<TouchableOpacity onPress={() => {}}>
107103
<Icon name="ios-arrow-back" type="Ionicons" size={30} color="blue" />
108104
</TouchableOpacity>
109105
}
110106
rightComponent={
111-
<TouchableOpacity
112-
onPress={() => {}}>
107+
<TouchableOpacity onPress={() => {}}>
113108
<Icon name="github" type="AntDesign" size={30} color="purple" />
114109
</TouchableOpacity>
115110
}
@@ -139,31 +134,32 @@ npm i @freakycoder/react-native-header-view
139134
| containerStyle | style | default style | use this to set your own style for whole container (DO NOT RECOMMENDED!) |
140135
| avatarStyle | style | default style | use this to set your own style for avatar style (DO NOT FORGET TO ADD BORDER-RADIUS!) |
141136

142-
143137
## Modern Header Props
144138

145-
| Property | Type | Default | Description |
146-
| ------------------ | :-------: | :------------: | --------------------------------------------------------------- |
147-
| styles | styles | styles | use this to change main style of the header |
148-
| text | string | Header Title | set the header's title |
149-
| textStyle | style | style | set your own style for the header's text |
150-
| left | number | 16 | use this to set left icon's align |
151-
| right | number | 16 | use this to set right icon's align |
152-
| leftIconName | string | ios-arrow-back | change the left icon depends on the React Native Vector Icons |
153-
| leftIconType | string | Ionicons | change the left icon's type |
154-
| leftIconSize | number | 25 | change the left icon's size |
155-
| leftIconColor | color | #bbbabe | change the left icon's color |
156-
| rightIconName | string | heart | change the right icon depends on the React Native Vector Icons |
157-
| rightIconType | string | Entypo | change the right icon's type |
158-
| rightIconSize | number | 25 | change the right icon's size |
159-
| rightIconColor | color | #23c4c1 | change the right icon's color |
160-
| leftIconComponent | component | Icon | use your own component instead of the integrated Icon component |
161-
| rightIconComponent | component | Icon | use your own component instead of the integrated Icon component |
162-
| leftIconOnPress | function | function | set the function for left icon's onPress |
163-
| rightIconOnPress | function | function | set the function for right icon's onPress |
164-
| leftDisable | boolean | false | disable the left icon component |
165-
| rightDisable | boolean | false | disable the right icon component |
166-
139+
| Property | Type | Default | Description |
140+
| ------------------ | :--------------: | :------------: | --------------------------------------------------------------- |
141+
| height | string OR number | 70 | change the height of the header |
142+
| width | string OR number | "100%" | change the width of the header |
143+
| backgroundColor | string | #fff | change the background color of the header |
144+
| styles | styles | styles | use this to change main style of the header |
145+
| text | string | Header Title | set the header's title |
146+
| textStyle | style | style | set your own style for the header's text |
147+
| left | number | 16 | use this to set left icon's align |
148+
| right | number | 16 | use this to set right icon's align |
149+
| leftIconName | string | ios-arrow-back | change the left icon depends on the React Native Vector Icons |
150+
| leftIconType | string | Ionicons | change the left icon's type |
151+
| leftIconSize | number | 25 | change the left icon's size |
152+
| leftIconColor | color | #bbbabe | change the left icon's color |
153+
| rightIconName | string | heart | change the right icon depends on the React Native Vector Icons |
154+
| rightIconType | string | Entypo | change the right icon's type |
155+
| rightIconSize | number | 25 | change the right icon's size |
156+
| rightIconColor | color | #23c4c1 | change the right icon's color |
157+
| leftIconComponent | component | Icon | use your own component instead of the integrated Icon component |
158+
| rightIconComponent | component | Icon | use your own component instead of the integrated Icon component |
159+
| leftIconOnPress | function | function | set the function for left icon's onPress |
160+
| rightIconOnPress | function | function | set the function for right icon's onPress |
161+
| leftDisable | boolean | false | disable the left icon component |
162+
| rightDisable | boolean | false | disable the right icon component |
167163

168164
## Classic Header Props
169165

@@ -191,19 +187,23 @@ npm i @freakycoder/react-native-header-view
191187
# Change Log
192188

193189
## [0.4.11](https://github.com/WrathChaos/react-native-header-view/tree/0.4.11) (2019-11-13)
190+
194191
[Full Changelog](https://github.com/WrathChaos/react-native-header-view/compare/0.4.10...0.4.11)
195192

196193
## [0.4.10](https://github.com/WrathChaos/react-native-header-view/tree/0.4.10) (2019-11-13)
194+
197195
[Full Changelog](https://github.com/WrathChaos/react-native-header-view/compare/0.4.7...0.4.10)
198196

199197
**Implemented enhancements:**
200198

201-
- Apple header Bg colour options [\#6](https://github.com/WrathChaos/react-native-header-view/issues/6)
199+
- Apple header Bg colour options [\#6](https://github.com/WrathChaos/react-native-header-view/issues/6)
202200

203201
## [0.4.7](https://github.com/WrathChaos/react-native-header-view/tree/0.4.7) (2019-10-04)
202+
204203
[Full Changelog](https://github.com/WrathChaos/react-native-header-view/compare/0.4.6...0.4.7)
205204

206205
## [0.4.6](https://github.com/WrathChaos/react-native-header-view/tree/0.4.6) (2019-10-04)
206+
207207
[Full Changelog](https://github.com/WrathChaos/react-native-header-view/compare/0.4.5...0.4.6)
208208

209209
**Closed issues:**
@@ -215,9 +215,11 @@ npm i @freakycoder/react-native-header-view
215215
- Bump eslint-utils from 1.4.0 to 1.4.2 in /example [\#4](https://github.com/WrathChaos/react-native-header-view/pull/4) ([dependabot[bot]](https://github.com/apps/dependabot))
216216

217217
## [0.4.5](https://github.com/WrathChaos/react-native-header-view/tree/0.4.5) (2019-08-17)
218+
218219
[Full Changelog](https://github.com/WrathChaos/react-native-header-view/compare/0.3.0...0.4.5)
219220

220221
## [0.3.0](https://github.com/WrathChaos/react-native-header-view/tree/0.3.0) (2019-08-12)
222+
221223
[Full Changelog](https://github.com/WrathChaos/react-native-header-view/compare/0.2.61...0.3.0)
222224

223225
**Merged pull requests:**
@@ -227,28 +229,32 @@ npm i @freakycoder/react-native-header-view
227229
- Bump js-yaml from 3.12.1 to 3.13.1 in /examples [\#1](https://github.com/WrathChaos/react-native-header-view/pull/1) ([dependabot[bot]](https://github.com/apps/dependabot))
228230

229231
## [0.2.61](https://github.com/WrathChaos/react-native-header-view/tree/0.2.61) (2019-03-19)
232+
230233
[Full Changelog](https://github.com/WrathChaos/react-native-header-view/compare/0.2.6...0.2.61)
231234

232235
## [0.2.6](https://github.com/WrathChaos/react-native-header-view/tree/0.2.6) (2019-03-05)
236+
233237
[Full Changelog](https://github.com/WrathChaos/react-native-header-view/compare/0.2.5...0.2.6)
234238

235239
## [0.2.5](https://github.com/WrathChaos/react-native-header-view/tree/0.2.5) (2019-03-05)
240+
236241
[Full Changelog](https://github.com/WrathChaos/react-native-header-view/compare/0.2.4...0.2.5)
237242

238243
## [0.2.4](https://github.com/WrathChaos/react-native-header-view/tree/0.2.4) (2019-03-05)
244+
239245
[Full Changelog](https://github.com/WrathChaos/react-native-header-view/compare/0.2.3...0.2.4)
240246

241247
## [0.2.3](https://github.com/WrathChaos/react-native-header-view/tree/0.2.3) (2019-03-05)
248+
242249
[Full Changelog](https://github.com/WrathChaos/react-native-header-view/compare/0.2.2...0.2.3)
243250

244251
## [0.2.2](https://github.com/WrathChaos/react-native-header-view/tree/0.2.2) (2019-03-05)
252+
245253
[Full Changelog](https://github.com/WrathChaos/react-native-header-view/compare/0.2.0...0.2.2)
246254

247255
## [0.2.0](https://github.com/WrathChaos/react-native-header-view/tree/0.2.0) (2019-02-23)
248256

249-
250-
\* *This Change Log was automatically generated by [github_changelog_generator](https://github.com/skywinder/Github-Changelog-Generator)*
251-
257+
\* _This Change Log was automatically generated by [github_changelog_generator](https://github.com/skywinder/Github-Changelog-Generator)_
252258

253259
## Author
254260

‎lib/src/components/ModernHeader/ModernHeader.js

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,11 @@ import React from "react";
22
import PropTypes from "prop-types";
33
import { Text, View, TouchableOpacity } from "react-native";
44
import Icon from "react-native-dynamic-vector-icons";
5-
import styles, { leftCompStyle, rightCompStyle } from "./ModernHeader.style";
5+
import styles, {
6+
container,
7+
leftCompStyle,
8+
rightCompStyle
9+
} from "./ModernHeader.style";
610

711
const HITSLOP = 8;
812
const hitslopObj = {
@@ -15,26 +19,29 @@ const hitslopObj = {
1519
const ModernHeader = props => {
1620
const {
1721
left,
18-
right,
1922
text,
23+
right,
24+
width,
25+
height,
2026
textStyle,
27+
leftDisable,
2128
leftIconName,
2229
leftIconType,
2330
leftIconSize,
31+
rightDisable,
2432
leftIconColor,
2533
rightIconName,
2634
rightIconType,
2735
rightIconSize,
2836
rightIconColor,
29-
leftIconComponent,
30-
rightIconComponent,
3137
leftIconOnPress,
38+
backgroundColor,
3239
rightIconOnPress,
33-
rightDisable,
34-
leftDisable
40+
leftIconComponent,
41+
rightIconComponent
3542
} = props;
3643
return (
37-
<View style={styles.container}>
44+
<View style={container(height, width, backgroundColor)}>
3845
{!leftDisable && (
3946
<TouchableOpacity
4047
style={leftCompStyle(left)}
@@ -81,18 +88,24 @@ ModernHeader.propTypes = {
8188
rightIconName: PropTypes.string,
8289
rightIconType: PropTypes.string,
8390
rightIconColor: PropTypes.string,
91+
backgroundColor: PropTypes.string,
92+
width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
93+
height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
8494
leftIconSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
8595
rightIconSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
8696
};
8797

8898
ModernHeader.defaultProps = {
8999
left: 16,
90100
right: 16,
101+
height: 70,
102+
width: "100%",
91103
leftIconSize: 25,
92104
rightIconSize: 25,
93105
text: "Header Title",
94106
rightIconName: "heart",
95107
rightIconType: "Entypo",
108+
backgroundColor: "#fff",
96109
leftIconType: "Ionicons",
97110
leftIconColor: "#bbbabe",
98111
rightIconColor: "#23c4c1",

‎lib/src/components/ModernHeader/ModernHeader.style.js

Lines changed: 18 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,24 @@
1-
export function leftCompStyle(left) {
2-
return {
3-
position: "absolute",
4-
left
5-
};
6-
}
1+
export const leftCompStyle = left => ({
2+
left,
3+
position: "absolute"
4+
});
75

8-
export function rightCompStyle(right) {
9-
return {
10-
position: "absolute",
11-
right
12-
};
13-
}
6+
export const rightCompStyle = right => ({
7+
right,
8+
position: "absolute"
9+
});
10+
11+
export const container = (height, width, backgroundColor) => ({
12+
top: 0,
13+
height,
14+
width,
15+
backgroundColor,
16+
flexDirection: "row",
17+
alignItems: "center",
18+
justifyContent: "center"
19+
});
1420

1521
export default {
16-
container: {
17-
top: 0,
18-
height: 70,
19-
width: "100%",
20-
flexDirection: "row",
21-
alignItems: "center",
22-
backgroundColor: "white",
23-
justifyContent: "center"
24-
},
2522
textStyle: {
2623
fontWeight: "800"
2724
}

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@freakycoder/react-native-header-view",
3-
"version": "0.4.11",
3+
"version": "0.4.12",
44
"description": "Fully customizable Header View for React Native.",
55
"keywords": [
66
"apple",

0 commit comments

Comments
 (0)