Skip to content

Commit b043db4

Browse files
kuraydevkuraydev
committed
GorgeousHeader: Top side is here
1 parent 0f68ed4 commit b043db4

File tree

15 files changed

+530
-11
lines changed

15 files changed

+530
-11
lines changed

‎example/.expo/packager-info.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"devToolsPort": 19002,
3+
"expoServerPort": null,
4+
"packagerPort": null,
5+
"packagerPid": null,
6+
"expoServerNgrokUrl": null,
7+
"packagerNgrokUrl": null,
8+
"ngrokPid": null
9+
}

‎example/.expo/settings.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"hostType": "lan",
3+
"lanType": "ip",
4+
"dev": true,
5+
"minify": false,
6+
"urlRandomness": null,
7+
"https": false
8+
}

‎example/App.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,17 @@ import {
33
StatusBar,
44
SafeAreaView,
55
TouchableOpacity,
6-
Linking
6+
Linking,
77
} from "react-native";
88
import {
99
AppleHeader,
1010
ModernHeader,
11-
ClassicHeader
11+
ClassicHeader,
1212
} from "@freakycoder/react-native-header-view";
1313
import Icon from "react-native-dynamic-vector-icons";
1414

15+
import GorgeousHeader from "./lib/src/components/GorgeousHeader/GorgeousHeader";
16+
1517
const App = () => {
1618
return (
1719
<Fragment>
@@ -30,7 +32,8 @@ const App = () => {
3032
}
3133
/> */}
3234
{/* <ModernHeader /> */}
33-
<AppleHeader />
35+
{/* <AppleHeader /> */}
36+
<GorgeousHeader />
3437
</SafeAreaView>
3538
</Fragment>
3639
);

‎example/ios/Podfile.lock‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
PODS:
22
- boost-for-react-native (1.63.0)
3-
- BVLinearGradient (2.5.6):
4-
- React
53
- DoubleConversion (1.1.6)
64
- FBLazyVector (0.61.4)
75
- FBReactNativeSpec (0.61.4):
@@ -224,7 +222,6 @@ PODS:
224222
- Yoga (1.14.0)
225223

226224
DEPENDENCIES:
227-
- BVLinearGradient (from `../node_modules/react-native-linear-gradient`)
228225
- DoubleConversion (from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`)
229226
- FBLazyVector (from `../node_modules/react-native/Libraries/FBLazyVector`)
230227
- FBReactNativeSpec (from `../node_modules/react-native/Libraries/FBReactNativeSpec`)
@@ -256,12 +253,10 @@ DEPENDENCIES:
256253
- Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
257254

258255
SPEC REPOS:
259-
https://github.com/cocoapods/specs.git:
256+
https://github.com/CocoaPods/Specs.git:
260257
- boost-for-react-native
261258

262259
EXTERNAL SOURCES:
263-
BVLinearGradient:
264-
:path: "../node_modules/react-native-linear-gradient"
265260
DoubleConversion:
266261
:podspec: "../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec"
267262
FBLazyVector:
@@ -317,7 +312,6 @@ EXTERNAL SOURCES:
317312

318313
SPEC CHECKSUMS:
319314
boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
320-
BVLinearGradient: e3aad03778a456d77928f594a649e96995f1c872
321315
DoubleConversion: 5805e889d232975c086db112ece9ed034df7a0b2
322316
FBLazyVector: feb35a6b7f7b50f367be07f34012f34a79282fa3
323317
FBReactNativeSpec: 51477b84b1bf7ab6f9ef307c24e3dd675391be44
@@ -347,4 +341,4 @@ SPEC CHECKSUMS:
347341

348342
PODFILE CHECKSUM: 79310af6b976c356911a8a833e9b99c3399fdda3
349343

350-
COCOAPODS: 1.7.4
344+
COCOAPODS: 1.9.0

‎example/lib/local-assets/menu.png‎

3.76 KB
Loading

‎example/lib/local-assets/omid-armin-unsplash.jpg‎

1.41 MB
Loading

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

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import React from "react";
2+
import PropTypes from "prop-types";
3+
import { Text, View, Image, TouchableOpacity } from "react-native";
4+
import styles, {
5+
container,
6+
_dateTitleStyle,
7+
_largeTitleStyle
8+
} from "./AppleHeader.style";
9+
10+
const AppleHeader = 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;
29+
return (
30+
<View style={containerStyle || container(backgroundColor, borderColor)}>
31+
<View>
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>
56+
</View>
57+
<TouchableOpacity style={styles.avatarContainerStyle} onPress={onPress}>
58+
<Image style={avatarStyle} source={imageSource} {...props} />
59+
</TouchableOpacity>
60+
</View>
61+
);
62+
};
63+
64+
AppleHeader.propTypes = {
65+
dateTitle: 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
74+
};
75+
76+
AppleHeader.defaultProps = {
77+
dateTitleFontSize: 13,
78+
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
90+
};
91+
92+
export default AppleHeader;

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

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { Platform } from "react-native";
2+
3+
export const container = (backgroundColor, borderColor) => {
4+
return {
5+
borderColor,
6+
backgroundColor,
7+
paddingBottom: 8,
8+
flexDirection: "row",
9+
marginHorizontal: 16,
10+
borderBottomWidth: 1,
11+
alignItems: "flex-start",
12+
justifyContent: "space-between"
13+
};
14+
};
15+
16+
export const _dateTitleStyle = (fontColor, fontSize, fontWeight) => {
17+
return {
18+
fontSize,
19+
fontWeight,
20+
lineHeight: 18,
21+
color: fontColor,
22+
letterSpacing: Platform.OS === "ios" ? -0.08 : undefined
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 {
37+
avatar: {
38+
height: 43,
39+
width: 43,
40+
borderRadius: 43 / 2
41+
},
42+
avatarContainerStyle: {
43+
alignSelf: "center",
44+
justifyContent: "center"
45+
}
46+
};

‎example/lib/src/components/ClassicHeader/ClassicHeader.js‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import React from "react";
2+
import PropTypes from "prop-types";
3+
import { SafeAreaView, View, Text, TouchableOpacity } from "react-native";
4+
import Icon from "react-native-dynamic-vector-icons";
5+
// Styles
6+
import _styles, {
7+
container,
8+
_shadowStyle,
9+
innerContainer,
10+
_leftComponentStyle,
11+
_rightComponentStyle
12+
} from "./ClassicHeader.style";
13+
14+
const hitSlop = {
15+
top: 30,
16+
bottom: 30,
17+
left: 30,
18+
right: 30
19+
};
20+
21+
const ClassicHeader = props => {
22+
const {
23+
styles,
24+
hitSlops,
25+
shadowStyle,
26+
headerTitle,
27+
shadowColor,
28+
leftComponent,
29+
rightComponent,
30+
centerComponent,
31+
statusBarHidden,
32+
leftComponentStyle,
33+
rightComponentStyle,
34+
leftComponentDisable,
35+
leftComponentOnPress,
36+
centerComponentStyle,
37+
rightComponentDisable,
38+
rightComponentOnPress
39+
} = props;
40+
return (
41+
<SafeAreaView>
42+
<View
43+
style={[
44+
styles || container(props),
45+
shadowStyle || _shadowStyle(shadowColor)
46+
]}
47+
>
48+
<View style={[innerContainer(statusBarHidden)]}>
49+
{leftComponent || (
50+
<TouchableOpacity
51+
style={
52+
leftComponentStyle || _leftComponentStyle(leftComponentDisable)
53+
}
54+
hitSlop={hitSlops}
55+
onPress={leftComponentOnPress}
56+
>
57+
<Icon
58+
size={30}
59+
type="Ionicons"
60+
name="ios-arrow-back"
61+
color="rgba(110, 157, 251, 1.0)"
62+
{...props}
63+
/>
64+
</TouchableOpacity>
65+
)}
66+
{centerComponent || (
67+
<Text style={[centerComponentStyle]}>{headerTitle}</Text>
68+
)}
69+
{rightComponent || (
70+
<TouchableOpacity
71+
style={
72+
rightComponentStyle ||
73+
_rightComponentStyle(rightComponentDisable)
74+
}
75+
hitSlop={hitSlops}
76+
onPress={rightComponentOnPress}
77+
>
78+
<Icon
79+
name="ios-menu"
80+
type="ionicon"
81+
size={30}
82+
color="white"
83+
{...props}
84+
/>
85+
</TouchableOpacity>
86+
)}
87+
</View>
88+
</View>
89+
</SafeAreaView>
90+
);
91+
};
92+
93+
ClassicHeader.propTypes = {
94+
hitSlops: PropTypes.object,
95+
ratings: PropTypes.string
96+
};
97+
98+
ClassicHeader.defaultProps = {
99+
hitSlops: hitSlop,
100+
centerComponentStyle: _styles.centerComponentStyle
101+
};
102+
103+
export default ClassicHeader;

0 commit comments

Comments
 (0)