Skip to content

Commit 6577959

Browse files
kuraydevkuraydev
committed
AppleHeader: It is completely customizable now
1 parent 7d74f5b commit 6577959

4 files changed

Lines changed: 119 additions & 30 deletions

File tree

‎README.md‎

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -118,13 +118,30 @@ npm i @freakycoder/react-native-header-view
118118

119119
#### Apple Header Props
120120

121+
avatarStyle,
122+
containerStyle,
123+
124+
125+
126+
| Property | Type | Default | Description |
127+
| -------------------- | :------: | :-----------------: | ------------------------------------------------------------------------------------- |
128+
| dateTitle | string | MONDAY, 27 NOVEMBER | set your own string instead of date title |
129+
| largeTitle | string | For You | set your own large title |
130+
| imageSource | image | image | set your own image |
131+
| onPress | function | null | use this to set onPress functionality |
132+
| backgroundColor | color | transparent | use this to change the main container's background color |
133+
| borderColor | color | #EFEFF4 | use this to change the bottom border color |
134+
| dateTitleFontColor | color | #8E8E93 | use this to change the date title's font color |
135+
| dateTitleFontSize | number | 13 | use this to set the date title's font size |
136+
| dateTitleFontWeight | string | "600" | use this to set the date title's font weight |
137+
| largeTitleFontColor | color | default color | use this to change the large title's font color |
138+
| largeTitleFontSize | number | 34 | use this to set the large title's font size |
139+
| largeTitleFontWeight | string | "bold" | use this to set the large title's font weight |
140+
| dateTitleStyle | style | default style | use this to set your own style for date title (DO NOT RECOMMENDED!) |
141+
| largeTitleStyle | style | default style | use this to set your own style for large title (DO NOT RECOMMENDED!) |
142+
| containerStyle | style | default style | use this to set your own style for whole container (DO NOT RECOMMENDED!) |
143+
| avatarStyle | style | default style | use this to set your own style for avatar style (DO NOT FORGET TO ADD BORDER-RADIUS!) |
121144

122-
| Property | Type | Default | Description |
123-
| ----------- | :------: | :-----------------: | ----------------------------------------- |
124-
| dateTitle | string | MONDAY, 27 NOVEMBER | set your own string instead of date title |
125-
| largeTitle | string | For You | set your own large title |
126-
| imageSource | image | image | set your own image |
127-
| onPress | function | null | use this to set onPress functionality |
128145

129146
#### Modern Header Props
130147

‎lib/src/components/AppleHeader/AppleHeader.js‎

Lines changed: 69 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,92 @@
11
import React from "react";
22
import PropTypes from "prop-types";
33
import { Text, View, Image, TouchableOpacity } from "react-native";
4-
import styles from "./AppleHeader.style";
4+
import styles, {
5+
container,
6+
_dateTitleStyle,
7+
_largeTitleStyle
8+
} from "./AppleHeader.style";
59

610
const AppleHeader = props => {
7-
const { dateTitle, largeTitle, imageSource, onPress } = props;
11+
const {
12+
onPress,
13+
dateTitle,
14+
largeTitle,
15+
avatarStyle,
16+
imageSource,
17+
containerStyle,
18+
dateTitleStyle,
19+
largeTitleStyle,
20+
borderColor,
21+
backgroundColor,
22+
dateTitleFontSize,
23+
dateTitleFontColor,
24+
dateTitleFontWeight,
25+
largeTitleFontSize,
26+
largeTitleFontColor,
27+
largeTitleFontWeight
28+
} = props;
829
return (
9-
<View style={styles.container} {...props}>
30+
<View style={containerStyle || container(backgroundColor, borderColor)}>
1031
<View>
11-
<Text style={styles.date}>{dateTitle}</Text>
12-
<Text style={styles.largeTitleStyle}>{largeTitle}</Text>
32+
<Text
33+
style={
34+
dateTitleStyle ||
35+
_dateTitleStyle(
36+
dateTitleFontColor,
37+
dateTitleFontSize,
38+
dateTitleFontWeight
39+
)
40+
}
41+
>
42+
{dateTitle}
43+
</Text>
44+
<Text
45+
style={
46+
largeTitleStyle ||
47+
_largeTitleStyle(
48+
largeTitleFontColor,
49+
largeTitleFontSize,
50+
largeTitleFontWeight
51+
)
52+
}
53+
>
54+
{largeTitle}
55+
</Text>
1356
</View>
1457
<TouchableOpacity style={styles.avatarContainerStyle} onPress={onPress}>
15-
<Image style={styles.avatar} source={imageSource} {...props} />
58+
<Image style={avatarStyle} source={imageSource} {...props} />
1659
</TouchableOpacity>
1760
</View>
1861
);
1962
};
2063

2164
AppleHeader.propTypes = {
2265
dateTitle: PropTypes.string,
23-
largeTitle: PropTypes.string
66+
largeTitle: PropTypes.string,
67+
dateTitleFontSize: PropTypes.number,
68+
dateTitleFontColor: PropTypes.string,
69+
dateTitleFontWeight: PropTypes.string,
70+
backgroundColor: PropTypes.string,
71+
largeTitleFontSize: PropTypes.number,
72+
largeTitleFontColor: PropTypes.string,
73+
largeTitleFontWeight: PropTypes.string
2474
};
2575

2676
AppleHeader.defaultProps = {
27-
dateTitle: "MONDAY, 27 NOVEMBER",
77+
dateTitleFontSize: 13,
2878
largeTitle: "For You",
79+
dateTitleFontWeight: "600",
80+
largeTitleFontSize: 34,
81+
borderColor: "#EFEFF4",
82+
dateTitleFontColor: "#8E8E93",
83+
avatarStyle: styles.avatar,
84+
dateTitleStyle: styles.date,
85+
largeTitleFontWeight: "bold",
86+
backgroundColor: "transparent",
87+
dateTitle: "MONDAY, 27 NOVEMBER",
88+
containerStyle: styles.container,
89+
largeTitleStyle: styles.largeTitleStyle,
2990
imageSource: require("../../../../assets/temp/joshua-rawson-harris-NdZtmw_jlMk-unsplash.jpg")
3091
};
3192

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

Lines changed: 26 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,39 @@
11
import { Platform } from "react-native";
22

3-
export default {
4-
container: {
3+
export const container = (backgroundColor, borderColor) => {
4+
return {
5+
borderColor,
6+
backgroundColor,
57
paddingBottom: 8,
68
flexDirection: "row",
79
marginHorizontal: 16,
810
borderBottomWidth: 1,
9-
borderColor: "#EFEFF4",
1011
alignItems: "flex-start",
1112
justifyContent: "space-between"
12-
},
13-
largeTitleStyle: {
14-
fontSize: 34,
15-
lineHeight: 41,
16-
fontWeight: "bold",
17-
letterSpacing: Platform.OS === "ios" ? 0.41 : undefined
18-
},
19-
date: {
20-
color: "#8E8E93",
21-
fontWeight: "600",
22-
fontSize: 13,
13+
};
14+
};
15+
16+
export const _dateTitleStyle = (fontColor, fontSize, fontWeight) => {
17+
return {
18+
fontSize,
19+
fontWeight,
2320
lineHeight: 18,
21+
color: fontColor,
2422
letterSpacing: Platform.OS === "ios" ? -0.08 : undefined
25-
},
23+
};
24+
};
25+
26+
export const _largeTitleStyle = (fontColor, fontSize, fontWeight) => {
27+
return {
28+
fontSize,
29+
fontWeight,
30+
lineHeight: 41,
31+
color: fontColor,
32+
letterSpacing: Platform.OS === "ios" ? 0.41 : undefined
33+
};
34+
};
35+
36+
export default {
2637
avatar: {
2738
height: 43,
2839
width: 43,

‎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.5",
3+
"version": "0.4.6",
44
"description": "Fully customizable Header View for React Native.",
55
"keywords": [
66
"apple",

0 commit comments

Comments
 (0)