fln-espranza 0.0.36 → 0.0.37
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.expo/README.md +15 -15
- package/.expo/settings.json +8 -8
- package/components/Avatar.tsx +43 -43
- package/components/BaseLayout.tsx +174 -174
- package/components/Drawer.tsx +116 -116
- package/components/EBadge.tsx +24 -24
- package/components/EButton.tsx +70 -71
- package/components/EDateAndTimeCard.tsx +51 -51
- package/components/EDateInput.tsx +55 -55
- package/components/EEmptyPlaceholder.tsx +21 -21
- package/components/EErrorText.tsx +19 -19
- package/components/EInfoBox.tsx +41 -41
- package/components/EInput.tsx +54 -54
- package/components/ELabel.tsx +15 -15
- package/components/EListPerson.tsx +52 -52
- package/components/EListSchool.tsx +35 -35
- package/components/EOption.tsx +98 -98
- package/components/EOtpInputBox.tsx +49 -49
- package/components/EPageDescription.tsx +19 -19
- package/components/EPillButton.tsx +33 -33
- package/components/EProfile.tsx +62 -62
- package/components/EProfileScreenLayout.tsx +111 -111
- package/components/EProgressBar.tsx +33 -33
- package/components/EQuestionSerialNumberLabel.tsx +17 -17
- package/components/EQuestionText.tsx +14 -14
- package/components/ESegment.tsx +36 -36
- package/components/EText.tsx +41 -41
- package/components/ETextArea.tsx +53 -53
- package/components/ETimeInput.tsx +54 -54
- package/components/ETimeLineCard.tsx +66 -66
- package/components/ListFormView.tsx +36 -36
- package/components/Loader.tsx +31 -31
- package/components/MenuItems.tsx +46 -46
- package/components/PageHeader.tsx +123 -123
- package/components/ProfileHeader.tsx +85 -85
- package/components/SecondaryBaseLayout.tsx +106 -106
- package/components/Timer.tsx +56 -56
- package/components/icons/EIconAdd.jsx +19 -19
- package/components/icons/EIconAddCircle.jsx +21 -21
- package/components/icons/EIconApplicationStatus.jsx +20 -20
- package/components/icons/EIconArrowDown.jsx +20 -20
- package/components/icons/EIconArrowLeft.jsx +21 -21
- package/components/icons/EIconArrowRight.jsx +21 -21
- package/components/icons/EIconArrowUp.jsx +20 -20
- package/components/icons/EIconBadge.jsx +20 -20
- package/components/icons/EIconBell.jsx +19 -19
- package/components/icons/EIconCalendar.jsx +21 -21
- package/components/icons/EIconCalendarCheck.jsx +24 -24
- package/components/icons/EIconCamera.jsx +20 -20
- package/components/icons/EIconCameraRotate.jsx +23 -23
- package/components/icons/EIconCheck.jsx +19 -19
- package/components/icons/EIconCheckCircle.jsx +20 -20
- package/components/icons/EIconCheckFill.jsx +19 -19
- package/components/icons/EIconChevronDown.jsx +19 -19
- package/components/icons/EIconChevronLeft.jsx +19 -19
- package/components/icons/EIconChevronRight.jsx +19 -19
- package/components/icons/EIconChevronUp.jsx +19 -19
- package/components/icons/EIconClock.jsx +19 -19
- package/components/icons/EIconClose.jsx +19 -19
- package/components/icons/EIconDashboard.jsx +20 -20
- package/components/icons/EIconDocumentCheck.jsx +14 -14
- package/components/icons/EIconEdit.jsx +19 -19
- package/components/icons/EIconFemale.jsx +20 -20
- package/components/icons/EIconFile.jsx +21 -21
- package/components/icons/EIconInfo.jsx +20 -20
- package/components/icons/EIconLogout.jsx +19 -19
- package/components/icons/EIconMale.jsx +21 -21
- package/components/icons/EIconMenu.jsx +19 -19
- package/components/icons/EIconMinus.jsx +19 -19
- package/components/icons/EIconPin.jsx +19 -19
- package/components/icons/EIconProfile.jsx +19 -19
- package/components/icons/EIconSchool.jsx +24 -24
- package/components/icons/EIconSearch.jsx +19 -19
- package/components/icons/EIconSettings.jsx +20 -20
- package/components/icons/EIconShare.jsx +21 -21
- package/components/icons/EIconStudent.jsx +23 -23
- package/components/icons/EIconSubject.jsx +21 -21
- package/components/icons/EIconTeach.jsx +21 -21
- package/components/icons/EIconTrash.jsx +19 -19
- package/components/icons/EIconUserCard.jsx +19 -19
- package/components/icons/EIconUserCheck.jsx +20 -20
- package/components/icons/EIconUsers.jsx +19 -19
- package/components/index.tsx +65 -65
- package/index.ts +180 -180
- package/package.json +26 -26
- package/utils/Color.ts +14 -14
package/components/Loader.tsx
CHANGED
|
@@ -1,31 +1,31 @@
|
|
|
1
|
-
import { SCREEN_WIDTH, SCREEN_HEIGHT } from '@gorhom/bottom-sheet'
|
|
2
|
-
// import { Colors, EText } from 'fln-espranza'
|
|
3
|
-
import EText from './EText';
|
|
4
|
-
import React from 'react'
|
|
5
|
-
import { View, ActivityIndicator } from 'react-native'
|
|
6
|
-
import tw from '../lib/tailwind';
|
|
7
|
-
import { Colors } from '../utils/Color';
|
|
8
|
-
|
|
9
|
-
interface IProps{
|
|
10
|
-
show: boolean
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
export default function Loader({show}: IProps) {
|
|
14
|
-
return (
|
|
15
|
-
<>
|
|
16
|
-
{show ? <View style={[tw`absolute justify-center items-center z-10 bg-slate-100 `, {
|
|
17
|
-
opacity: 0.9,
|
|
18
|
-
width: SCREEN_WIDTH,
|
|
19
|
-
height: SCREEN_HEIGHT,
|
|
20
|
-
}]}>
|
|
21
|
-
<View style={[tw`h-24 w-32 bg-white px-2 py-3 justify-center items-center rounded-xl`]}>
|
|
22
|
-
<ActivityIndicator size="large" color={Colors['primary-base']} />
|
|
23
|
-
<EText size="base" style={tw`text-black`}>Loading...</EText>
|
|
24
|
-
</View>
|
|
25
|
-
</View>
|
|
26
|
-
:
|
|
27
|
-
<></>
|
|
28
|
-
}
|
|
29
|
-
</>
|
|
30
|
-
)
|
|
31
|
-
}
|
|
1
|
+
import { SCREEN_WIDTH, SCREEN_HEIGHT } from '@gorhom/bottom-sheet'
|
|
2
|
+
// import { Colors, EText } from 'fln-espranza'
|
|
3
|
+
import EText from './EText';
|
|
4
|
+
import React from 'react'
|
|
5
|
+
import { View, ActivityIndicator } from 'react-native'
|
|
6
|
+
import tw from '../lib/tailwind';
|
|
7
|
+
import { Colors } from '../utils/Color';
|
|
8
|
+
|
|
9
|
+
interface IProps{
|
|
10
|
+
show: boolean
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
export default function Loader({show}: IProps) {
|
|
14
|
+
return (
|
|
15
|
+
<>
|
|
16
|
+
{show ? <View style={[tw`absolute justify-center items-center z-10 bg-slate-100 `, {
|
|
17
|
+
opacity: 0.9,
|
|
18
|
+
width: SCREEN_WIDTH,
|
|
19
|
+
height: SCREEN_HEIGHT,
|
|
20
|
+
}]}>
|
|
21
|
+
<View style={[tw`h-24 w-32 bg-white px-2 py-3 justify-center items-center rounded-xl`]}>
|
|
22
|
+
<ActivityIndicator size="large" color={Colors['primary-base']} />
|
|
23
|
+
<EText size="base" style={tw`text-black`}>Loading...</EText>
|
|
24
|
+
</View>
|
|
25
|
+
</View>
|
|
26
|
+
:
|
|
27
|
+
<></>
|
|
28
|
+
}
|
|
29
|
+
</>
|
|
30
|
+
)
|
|
31
|
+
}
|
package/components/MenuItems.tsx
CHANGED
|
@@ -1,46 +1,46 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { TouchableOpacity, View } from "react-native";
|
|
3
|
-
import { HomeIcon } from "react-native-heroicons/solid";
|
|
4
|
-
import tw from "../lib/tailwind";
|
|
5
|
-
import { Colors } from "../utils/Color";
|
|
6
|
-
import EText from "./EText";
|
|
7
|
-
|
|
8
|
-
interface IProps {
|
|
9
|
-
title?: string;
|
|
10
|
-
icon?: JSX.Element;
|
|
11
|
-
onPress?: () => void;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
export default function MenuItems({ title, icon, onPress }: IProps) {
|
|
15
|
-
return (
|
|
16
|
-
<TouchableOpacity style={tw`flex-row items-center`} onPress={onPress}>
|
|
17
|
-
{/* <HomeIcon style={[tw`w-6 h-6`, { color: Colors["primary-base"] }]} /> */}
|
|
18
|
-
{icon ? (
|
|
19
|
-
icon
|
|
20
|
-
) : (
|
|
21
|
-
<HomeIcon style={[tw`w-6 h-6`, { color: Colors["primary-base"] }]} />
|
|
22
|
-
)}
|
|
23
|
-
<View
|
|
24
|
-
style={[
|
|
25
|
-
tw`py-4 ml-4 mr-8 w-[80%]`,
|
|
26
|
-
{
|
|
27
|
-
borderBottomWidth: 1,
|
|
28
|
-
borderBottomColor: Colors.border,
|
|
29
|
-
},
|
|
30
|
-
]}
|
|
31
|
-
>
|
|
32
|
-
<EText
|
|
33
|
-
size="base"
|
|
34
|
-
style={[
|
|
35
|
-
tw`font-semibold `,
|
|
36
|
-
{
|
|
37
|
-
color: Colors["text-primary"],
|
|
38
|
-
},
|
|
39
|
-
]}
|
|
40
|
-
>
|
|
41
|
-
{title ? title : "Dashboard"}
|
|
42
|
-
</EText>
|
|
43
|
-
</View>
|
|
44
|
-
</TouchableOpacity>
|
|
45
|
-
);
|
|
46
|
-
}
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { TouchableOpacity, View } from "react-native";
|
|
3
|
+
import { HomeIcon } from "react-native-heroicons/solid";
|
|
4
|
+
import tw from "../lib/tailwind";
|
|
5
|
+
import { Colors } from "../utils/Color";
|
|
6
|
+
import EText from "./EText";
|
|
7
|
+
|
|
8
|
+
interface IProps {
|
|
9
|
+
title?: string;
|
|
10
|
+
icon?: JSX.Element;
|
|
11
|
+
onPress?: () => void;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export default function MenuItems({ title, icon, onPress }: IProps) {
|
|
15
|
+
return (
|
|
16
|
+
<TouchableOpacity style={tw`flex-row items-center`} onPress={onPress}>
|
|
17
|
+
{/* <HomeIcon style={[tw`w-6 h-6`, { color: Colors["primary-base"] }]} /> */}
|
|
18
|
+
{icon ? (
|
|
19
|
+
icon
|
|
20
|
+
) : (
|
|
21
|
+
<HomeIcon style={[tw`w-6 h-6`, { color: Colors["primary-base"] }]} />
|
|
22
|
+
)}
|
|
23
|
+
<View
|
|
24
|
+
style={[
|
|
25
|
+
tw`py-4 ml-4 mr-8 w-[80%]`,
|
|
26
|
+
{
|
|
27
|
+
borderBottomWidth: 1,
|
|
28
|
+
borderBottomColor: Colors.border,
|
|
29
|
+
},
|
|
30
|
+
]}
|
|
31
|
+
>
|
|
32
|
+
<EText
|
|
33
|
+
size="base"
|
|
34
|
+
style={[
|
|
35
|
+
tw`font-semibold `,
|
|
36
|
+
{
|
|
37
|
+
color: Colors["text-primary"],
|
|
38
|
+
},
|
|
39
|
+
]}
|
|
40
|
+
>
|
|
41
|
+
{title ? title : "Dashboard"}
|
|
42
|
+
</EText>
|
|
43
|
+
</View>
|
|
44
|
+
</TouchableOpacity>
|
|
45
|
+
);
|
|
46
|
+
}
|
|
@@ -1,123 +1,123 @@
|
|
|
1
|
-
import { View, Animated, Dimensions, TouchableOpacity } from "react-native";
|
|
2
|
-
import React, { useEffect, useRef } from "react";
|
|
3
|
-
import tw from "../lib/tailwind";
|
|
4
|
-
import { useNavigation } from "@react-navigation/native";
|
|
5
|
-
import EText from "./EText";
|
|
6
|
-
import Constants from "expo-constants";
|
|
7
|
-
import EIconArrowLeft from "./icons/EIconArrowLeft";
|
|
8
|
-
import EIconMenu from "./icons/EIconMenu";
|
|
9
|
-
|
|
10
|
-
const SCREEN_WIDTH = Dimensions.get("window").width;
|
|
11
|
-
const HEADER_HEIGHT = 90;
|
|
12
|
-
|
|
13
|
-
interface PageHeaderProps {
|
|
14
|
-
title: string;
|
|
15
|
-
subtitle?: string;
|
|
16
|
-
curved?: boolean;
|
|
17
|
-
children?: JSX.Element;
|
|
18
|
-
iconEnd?: JSX.Element;
|
|
19
|
-
border?: boolean;
|
|
20
|
-
menuButton?: boolean;
|
|
21
|
-
hideBackBtn?: boolean;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
export default function PageHeader({
|
|
25
|
-
title,
|
|
26
|
-
subtitle,
|
|
27
|
-
curved,
|
|
28
|
-
children,
|
|
29
|
-
iconEnd,
|
|
30
|
-
border,
|
|
31
|
-
menuButton,
|
|
32
|
-
hideBackBtn
|
|
33
|
-
}: PageHeaderProps) {
|
|
34
|
-
const navigation = useNavigation();
|
|
35
|
-
|
|
36
|
-
const translateX = useRef(new Animated.Value(60)).current;
|
|
37
|
-
const opacity = useRef(new Animated.Value(0)).current;
|
|
38
|
-
|
|
39
|
-
useEffect(() => {
|
|
40
|
-
Animated.spring(translateX, {
|
|
41
|
-
toValue: 0,
|
|
42
|
-
stiffness: 40,
|
|
43
|
-
damping: 10,
|
|
44
|
-
useNativeDriver: true,
|
|
45
|
-
}).start();
|
|
46
|
-
Animated.spring(opacity, {
|
|
47
|
-
toValue: 1,
|
|
48
|
-
delay: 250,
|
|
49
|
-
useNativeDriver: true,
|
|
50
|
-
}).start();
|
|
51
|
-
});
|
|
52
|
-
return (
|
|
53
|
-
<View style={[tw`${"border-none border-slate-300 bg-white shadow-lg py-3"} `, {}]}>
|
|
54
|
-
<View style={tw`overflow-hidden`}>
|
|
55
|
-
<View
|
|
56
|
-
style={[
|
|
57
|
-
tw`flex-row items-center px-3`,
|
|
58
|
-
{
|
|
59
|
-
paddingTop: Constants.statusBarHeight + 8,
|
|
60
|
-
},
|
|
61
|
-
]}
|
|
62
|
-
>
|
|
63
|
-
{/* LEFT ICON */}
|
|
64
|
-
{hideBackBtn
|
|
65
|
-
? <></>
|
|
66
|
-
:
|
|
67
|
-
<View
|
|
68
|
-
style={[tw``]}
|
|
69
|
-
>
|
|
70
|
-
{menuButton ?
|
|
71
|
-
<TouchableOpacity activeOpacity={0.6}
|
|
72
|
-
onPress={() => navigation?.openDrawer()}>
|
|
73
|
-
<EIconMenu
|
|
74
|
-
size={24}
|
|
75
|
-
style={tw`text-slate-800`}
|
|
76
|
-
/>
|
|
77
|
-
</TouchableOpacity>
|
|
78
|
-
|
|
79
|
-
:
|
|
80
|
-
<TouchableOpacity activeOpacity={0.6}
|
|
81
|
-
onPress={() => navigation.goBack()}>
|
|
82
|
-
<EIconArrowLeft
|
|
83
|
-
iconColor={curved ? "white" : "tint-slate-900"}
|
|
84
|
-
size={24}
|
|
85
|
-
// onPress={() => navigation.navigate("Dashboard")}
|
|
86
|
-
style={tw`text-slate-800`}
|
|
87
|
-
/>
|
|
88
|
-
</TouchableOpacity>
|
|
89
|
-
}
|
|
90
|
-
</View>
|
|
91
|
-
|
|
92
|
-
}
|
|
93
|
-
{/* TITLE */}
|
|
94
|
-
<View style={tw`flex-1 items-start px-3`}>
|
|
95
|
-
<EText
|
|
96
|
-
size="lg"
|
|
97
|
-
style={tw.style("text-slate-800 font-bold")}
|
|
98
|
-
>
|
|
99
|
-
{title}
|
|
100
|
-
</EText>
|
|
101
|
-
{subtitle ? (
|
|
102
|
-
<EText
|
|
103
|
-
style={tw.style(
|
|
104
|
-
"text-slate-800 opacity-40 font-semibold mt-0.25"
|
|
105
|
-
)}
|
|
106
|
-
>
|
|
107
|
-
{subtitle}
|
|
108
|
-
</EText>
|
|
109
|
-
) : null}
|
|
110
|
-
</View>
|
|
111
|
-
|
|
112
|
-
{/* RIGHT ICON */}
|
|
113
|
-
{iconEnd ? (
|
|
114
|
-
<View style={[tw``, {}]}>
|
|
115
|
-
{iconEnd}
|
|
116
|
-
</View>
|
|
117
|
-
) : null}
|
|
118
|
-
</View>
|
|
119
|
-
{children ? <View style={tw.style("pb-6")}>{children}</View> : null}
|
|
120
|
-
</View>
|
|
121
|
-
</View>
|
|
122
|
-
);
|
|
123
|
-
}
|
|
1
|
+
import { View, Animated, Dimensions, TouchableOpacity } from "react-native";
|
|
2
|
+
import React, { useEffect, useRef } from "react";
|
|
3
|
+
import tw from "../lib/tailwind";
|
|
4
|
+
import { useNavigation } from "@react-navigation/native";
|
|
5
|
+
import EText from "./EText";
|
|
6
|
+
import Constants from "expo-constants";
|
|
7
|
+
import EIconArrowLeft from "./icons/EIconArrowLeft";
|
|
8
|
+
import EIconMenu from "./icons/EIconMenu";
|
|
9
|
+
|
|
10
|
+
const SCREEN_WIDTH = Dimensions.get("window").width;
|
|
11
|
+
const HEADER_HEIGHT = 90;
|
|
12
|
+
|
|
13
|
+
interface PageHeaderProps {
|
|
14
|
+
title: string;
|
|
15
|
+
subtitle?: string;
|
|
16
|
+
curved?: boolean;
|
|
17
|
+
children?: JSX.Element;
|
|
18
|
+
iconEnd?: JSX.Element;
|
|
19
|
+
border?: boolean;
|
|
20
|
+
menuButton?: boolean;
|
|
21
|
+
hideBackBtn?: boolean;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export default function PageHeader({
|
|
25
|
+
title,
|
|
26
|
+
subtitle,
|
|
27
|
+
curved,
|
|
28
|
+
children,
|
|
29
|
+
iconEnd,
|
|
30
|
+
border,
|
|
31
|
+
menuButton,
|
|
32
|
+
hideBackBtn
|
|
33
|
+
}: PageHeaderProps) {
|
|
34
|
+
const navigation = useNavigation();
|
|
35
|
+
|
|
36
|
+
const translateX = useRef(new Animated.Value(60)).current;
|
|
37
|
+
const opacity = useRef(new Animated.Value(0)).current;
|
|
38
|
+
|
|
39
|
+
useEffect(() => {
|
|
40
|
+
Animated.spring(translateX, {
|
|
41
|
+
toValue: 0,
|
|
42
|
+
stiffness: 40,
|
|
43
|
+
damping: 10,
|
|
44
|
+
useNativeDriver: true,
|
|
45
|
+
}).start();
|
|
46
|
+
Animated.spring(opacity, {
|
|
47
|
+
toValue: 1,
|
|
48
|
+
delay: 250,
|
|
49
|
+
useNativeDriver: true,
|
|
50
|
+
}).start();
|
|
51
|
+
});
|
|
52
|
+
return (
|
|
53
|
+
<View style={[tw`${"border-none border-slate-300 bg-white shadow-lg py-3"} `, {}]}>
|
|
54
|
+
<View style={tw`overflow-hidden`}>
|
|
55
|
+
<View
|
|
56
|
+
style={[
|
|
57
|
+
tw`flex-row items-center px-3`,
|
|
58
|
+
{
|
|
59
|
+
paddingTop: Constants.statusBarHeight + 8,
|
|
60
|
+
},
|
|
61
|
+
]}
|
|
62
|
+
>
|
|
63
|
+
{/* LEFT ICON */}
|
|
64
|
+
{hideBackBtn
|
|
65
|
+
? <></>
|
|
66
|
+
:
|
|
67
|
+
<View
|
|
68
|
+
style={[tw``]}
|
|
69
|
+
>
|
|
70
|
+
{menuButton ?
|
|
71
|
+
<TouchableOpacity activeOpacity={0.6}
|
|
72
|
+
onPress={() => navigation?.openDrawer()}>
|
|
73
|
+
<EIconMenu
|
|
74
|
+
size={24}
|
|
75
|
+
style={tw`text-slate-800`}
|
|
76
|
+
/>
|
|
77
|
+
</TouchableOpacity>
|
|
78
|
+
|
|
79
|
+
:
|
|
80
|
+
<TouchableOpacity activeOpacity={0.6}
|
|
81
|
+
onPress={() => navigation.goBack()}>
|
|
82
|
+
<EIconArrowLeft
|
|
83
|
+
iconColor={curved ? "white" : "tint-slate-900"}
|
|
84
|
+
size={24}
|
|
85
|
+
// onPress={() => navigation.navigate("Dashboard")}
|
|
86
|
+
style={tw`text-slate-800`}
|
|
87
|
+
/>
|
|
88
|
+
</TouchableOpacity>
|
|
89
|
+
}
|
|
90
|
+
</View>
|
|
91
|
+
|
|
92
|
+
}
|
|
93
|
+
{/* TITLE */}
|
|
94
|
+
<View style={tw`flex-1 items-start px-3`}>
|
|
95
|
+
<EText
|
|
96
|
+
size="lg"
|
|
97
|
+
style={tw.style("text-slate-800 font-bold")}
|
|
98
|
+
>
|
|
99
|
+
{title}
|
|
100
|
+
</EText>
|
|
101
|
+
{subtitle ? (
|
|
102
|
+
<EText
|
|
103
|
+
style={tw.style(
|
|
104
|
+
"text-slate-800 opacity-40 font-semibold mt-0.25"
|
|
105
|
+
)}
|
|
106
|
+
>
|
|
107
|
+
{subtitle}
|
|
108
|
+
</EText>
|
|
109
|
+
) : null}
|
|
110
|
+
</View>
|
|
111
|
+
|
|
112
|
+
{/* RIGHT ICON */}
|
|
113
|
+
{iconEnd ? (
|
|
114
|
+
<View style={[tw``, {}]}>
|
|
115
|
+
{iconEnd}
|
|
116
|
+
</View>
|
|
117
|
+
) : null}
|
|
118
|
+
</View>
|
|
119
|
+
{children ? <View style={tw.style("pb-6")}>{children}</View> : null}
|
|
120
|
+
</View>
|
|
121
|
+
</View>
|
|
122
|
+
);
|
|
123
|
+
}
|
|
@@ -1,85 +1,85 @@
|
|
|
1
|
-
import { useNavigation } from "@react-navigation/native";
|
|
2
|
-
import React, { useRef } from "react";
|
|
3
|
-
import { Animated, ImageBackground, View } from "react-native";
|
|
4
|
-
import EButtonIcon from "./EButtonIcon";
|
|
5
|
-
import Avatar from "./Avatar";
|
|
6
|
-
import EText from "./EText";
|
|
7
|
-
import tw from "../lib/tailwind"
|
|
8
|
-
import Constants from "expo-constants";
|
|
9
|
-
|
|
10
|
-
interface IProps {
|
|
11
|
-
name: string;
|
|
12
|
-
titleText?: string;
|
|
13
|
-
title: string;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
export default function ProfileHeader({ name, title, titleText }: IProps) {
|
|
17
|
-
const translateX = useRef(new Animated.Value(60)).current;
|
|
18
|
-
const opacity = useRef(new Animated.Value(0)).current;
|
|
19
|
-
const navigation = useNavigation();
|
|
20
|
-
|
|
21
|
-
React.useEffect(() => {
|
|
22
|
-
Animated.spring(translateX, {
|
|
23
|
-
toValue: 0,
|
|
24
|
-
stiffness: 40,
|
|
25
|
-
damping: 10,
|
|
26
|
-
useNativeDriver: true,
|
|
27
|
-
}).start();
|
|
28
|
-
Animated.spring(opacity, {
|
|
29
|
-
toValue: 1,
|
|
30
|
-
delay: 250,
|
|
31
|
-
useNativeDriver: true,
|
|
32
|
-
}).start();
|
|
33
|
-
});
|
|
34
|
-
|
|
35
|
-
return (
|
|
36
|
-
<View style={tw`flex-1 overflow-hidden h-full`}>
|
|
37
|
-
<ImageBackground
|
|
38
|
-
style={[tw`h-full w-full`, {}]}
|
|
39
|
-
source={require("../assets/images/bg-profile.jpg")}
|
|
40
|
-
>
|
|
41
|
-
<Animated.View
|
|
42
|
-
style={[
|
|
43
|
-
tw`flex-row pr-4 pl-3 pb-3`,
|
|
44
|
-
{
|
|
45
|
-
paddingTop: Constants.statusBarHeight + 8,
|
|
46
|
-
transform: [{ translateX }],
|
|
47
|
-
opacity,
|
|
48
|
-
},
|
|
49
|
-
]}
|
|
50
|
-
>
|
|
51
|
-
<Animated.View
|
|
52
|
-
style={[
|
|
53
|
-
tw`-mt-2 left-3 absolute `,
|
|
54
|
-
{
|
|
55
|
-
transform: [{ translateX }],
|
|
56
|
-
opacity,
|
|
57
|
-
paddingTop: Constants.statusBarHeight + 8,
|
|
58
|
-
},
|
|
59
|
-
]}
|
|
60
|
-
>
|
|
61
|
-
<EButtonIcon
|
|
62
|
-
iconColor={"tint-white"}
|
|
63
|
-
size={20}
|
|
64
|
-
onPress={() => navigation.goBack()}
|
|
65
|
-
/>
|
|
66
|
-
</Animated.View>
|
|
67
|
-
</Animated.View>
|
|
68
|
-
<View style={[tw`flex items-center mt-5 rounded-4xl `, {}]}>
|
|
69
|
-
<Avatar size="5xl" source={""} nameFirstLetter={name?.split("")[0]} />
|
|
70
|
-
<View style={tw`mt-6 mb-8 items-center`}>
|
|
71
|
-
<EText size="2xl" style={tw`font-bold text-white capitalize`}>
|
|
72
|
-
{name.toLocaleLowerCase().trim()}
|
|
73
|
-
</EText>
|
|
74
|
-
<EText
|
|
75
|
-
size="sm"
|
|
76
|
-
style={tw`mt-0.5 font-normal opacity-50 text-white`}
|
|
77
|
-
>
|
|
78
|
-
{titleText ? titleText : "Unique Code"} : {title}
|
|
79
|
-
</EText>
|
|
80
|
-
</View>
|
|
81
|
-
</View>
|
|
82
|
-
</ImageBackground>
|
|
83
|
-
</View>
|
|
84
|
-
);
|
|
85
|
-
}
|
|
1
|
+
import { useNavigation } from "@react-navigation/native";
|
|
2
|
+
import React, { useRef } from "react";
|
|
3
|
+
import { Animated, ImageBackground, View } from "react-native";
|
|
4
|
+
import EButtonIcon from "./EButtonIcon";
|
|
5
|
+
import Avatar from "./Avatar";
|
|
6
|
+
import EText from "./EText";
|
|
7
|
+
import tw from "../lib/tailwind"
|
|
8
|
+
import Constants from "expo-constants";
|
|
9
|
+
|
|
10
|
+
interface IProps {
|
|
11
|
+
name: string;
|
|
12
|
+
titleText?: string;
|
|
13
|
+
title: string;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export default function ProfileHeader({ name, title, titleText }: IProps) {
|
|
17
|
+
const translateX = useRef(new Animated.Value(60)).current;
|
|
18
|
+
const opacity = useRef(new Animated.Value(0)).current;
|
|
19
|
+
const navigation = useNavigation();
|
|
20
|
+
|
|
21
|
+
React.useEffect(() => {
|
|
22
|
+
Animated.spring(translateX, {
|
|
23
|
+
toValue: 0,
|
|
24
|
+
stiffness: 40,
|
|
25
|
+
damping: 10,
|
|
26
|
+
useNativeDriver: true,
|
|
27
|
+
}).start();
|
|
28
|
+
Animated.spring(opacity, {
|
|
29
|
+
toValue: 1,
|
|
30
|
+
delay: 250,
|
|
31
|
+
useNativeDriver: true,
|
|
32
|
+
}).start();
|
|
33
|
+
});
|
|
34
|
+
|
|
35
|
+
return (
|
|
36
|
+
<View style={tw`flex-1 overflow-hidden h-full`}>
|
|
37
|
+
<ImageBackground
|
|
38
|
+
style={[tw`h-full w-full`, {}]}
|
|
39
|
+
source={require("../assets/images/bg-profile.jpg")}
|
|
40
|
+
>
|
|
41
|
+
<Animated.View
|
|
42
|
+
style={[
|
|
43
|
+
tw`flex-row pr-4 pl-3 pb-3`,
|
|
44
|
+
{
|
|
45
|
+
paddingTop: Constants.statusBarHeight + 8,
|
|
46
|
+
transform: [{ translateX }],
|
|
47
|
+
opacity,
|
|
48
|
+
},
|
|
49
|
+
]}
|
|
50
|
+
>
|
|
51
|
+
<Animated.View
|
|
52
|
+
style={[
|
|
53
|
+
tw`-mt-2 left-3 absolute `,
|
|
54
|
+
{
|
|
55
|
+
transform: [{ translateX }],
|
|
56
|
+
opacity,
|
|
57
|
+
paddingTop: Constants.statusBarHeight + 8,
|
|
58
|
+
},
|
|
59
|
+
]}
|
|
60
|
+
>
|
|
61
|
+
<EButtonIcon
|
|
62
|
+
iconColor={"tint-white"}
|
|
63
|
+
size={20}
|
|
64
|
+
onPress={() => navigation.goBack()}
|
|
65
|
+
/>
|
|
66
|
+
</Animated.View>
|
|
67
|
+
</Animated.View>
|
|
68
|
+
<View style={[tw`flex items-center mt-5 rounded-4xl `, {}]}>
|
|
69
|
+
<Avatar size="5xl" source={""} nameFirstLetter={name?.split("")[0]} />
|
|
70
|
+
<View style={tw`mt-6 mb-8 items-center`}>
|
|
71
|
+
<EText size="2xl" style={tw`font-bold text-white capitalize`}>
|
|
72
|
+
{name.toLocaleLowerCase().trim()}
|
|
73
|
+
</EText>
|
|
74
|
+
<EText
|
|
75
|
+
size="sm"
|
|
76
|
+
style={tw`mt-0.5 font-normal opacity-50 text-white`}
|
|
77
|
+
>
|
|
78
|
+
{titleText ? titleText : "Unique Code"} : {title}
|
|
79
|
+
</EText>
|
|
80
|
+
</View>
|
|
81
|
+
</View>
|
|
82
|
+
</ImageBackground>
|
|
83
|
+
</View>
|
|
84
|
+
);
|
|
85
|
+
}
|