wibu/hipmi-mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix styles dan feature component text

Browse Source
This commit is contained in:
Bagasbanuna02
2025-07-02 14:55:12 +08:00
parent 9667065bb3
commit e2744f0344
20 changed files with 258 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/(application)/_layout.tsx
View File

@@ -1,5 +1,5 @@
import { AccentColor, MainColor } from "@/constants/color-palet";
import { Styles } from "@/styles/global-styles";
import { GStyles } from "@/styles/global-styles";
import { Ionicons } from "@expo/vector-icons";
import { router, Stack } from "expo-router";
@@ -8,8 +8,8 @@ export default function ApplicationLayout() {
<>
<Stack
screenOptions={{
headerStyle: Styles.headerStyle,
headerTitleStyle: Styles.headerTitleStyle,
headerStyle: GStyles.headerStyle,
headerTitleStyle: GStyles.headerTitleStyle,
headerTitleAlign: "center",
contentStyle: {
borderBottomColor: AccentColor.blue,

4
app/(application)/event/(tabs)/index.tsx
View File

@@ -1,6 +1,6 @@
import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
import { AccentColor, MainColor } from "@/constants/color-palet";
import { Styles } from "@/styles/global-styles";
import { GStyles } from "@/styles/global-styles";
import { router } from "expo-router";
import { Text, TouchableHighlight, View } from "react-native";
@@ -17,7 +17,7 @@ export default function Event() {
borderWidth: 1,
}}
>
<Text style={Styles.textLabel}>Event</Text>
<Text style={GStyles.textLabel}>Event</Text>
</View>
</TouchableHighlight>
</ViewWrapper>

4
app/(application)/event/(tabs)/kontribusi.tsx
View File

@@ -1,11 +1,11 @@
import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
import { Styles } from "@/styles/global-styles";
import { GStyles } from "@/styles/global-styles";
import { Text } from "react-native";
export default function Kontribusi() {
return (
<ViewWrapper>
<Text style={Styles.textLabel}>Kontribusi</Text>
<Text style={GStyles.textLabel}>Kontribusi</Text>
</ViewWrapper>
);
}

4
app/(application)/event/(tabs)/riwayat.tsx
View File

@@ -1,11 +1,11 @@
import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
import { Styles } from "@/styles/global-styles";
import { GStyles } from "@/styles/global-styles";
import { Text } from "react-native";
export default function Riwayat() {
return (
<ViewWrapper>
<Text style={Styles.textLabel}>Riwayat</Text>
<Text style={GStyles.textLabel}>Riwayat</Text>
</ViewWrapper>
);
}

4
app/(application)/event/(tabs)/status.tsx
View File

@@ -1,11 +1,11 @@
import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
import { Styles } from "@/styles/global-styles";
import { GStyles } from "@/styles/global-styles";
import { Text } from "react-native";
export default function Status() {
return (
<ViewWrapper>
<Text style={Styles.textLabel}>Status</Text>
<Text style={GStyles.textLabel}>Status</Text>
</ViewWrapper>
);
}

4
app/(application)/event/detail/[id].tsx
View File

@@ -1,5 +1,5 @@
import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
import { Styles } from "@/styles/global-styles";
import { GStyles } from "@/styles/global-styles";
import { useLocalSearchParams } from "expo-router";
import { Text } from "react-native";
@@ -8,7 +8,7 @@ export default function DetailEvent() {
console.log("id event >", id);
return (
<ViewWrapper>
<Text style={Styles.textLabel}>Detail Event {id}</Text>
<Text style={GStyles.textLabel}>Detail Event {id}</Text>
</ViewWrapper>
);
}

8
app/(application)/portofolio/[id]/index.tsx
View File

@@ -1,6 +1,6 @@
import BackButton from "@/components/Button/BackButton";
import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
import { Styles } from "@/styles/global-styles";
import { GStyles } from "@/styles/global-styles";
import { Stack, useLocalSearchParams } from "expo-router";
import { Text } from "react-native";
@@ -22,11 +22,11 @@ export default function Portofolio() {
// />
// </TouchableOpacity>
// ),
headerStyle: Styles.headerStyle,
headerTitleStyle: Styles.headerTitleStyle,
headerStyle: GStyles.headerStyle,
headerTitleStyle: GStyles.headerTitleStyle,
}}
/>
<Text style={Styles.textLabel}>Portofolio {id}</Text>
<Text style={GStyles.textLabel}>Portofolio {id}</Text>
</ViewWrapper>
);
}

6
app/(application)/portofolio/_layout.tsx
View File

@@ -1,6 +1,6 @@
import BackButton from "@/components/Button/BackButton";
import { Styles } from "@/styles/global-styles";
import { GStyles } from "@/styles/global-styles";
import { Stack } from "expo-router";
export default function PortofolioLayout() {
@@ -8,8 +8,8 @@ export default function PortofolioLayout() {
<>
<Stack
screenOptions={{
headerStyle: Styles.headerStyle,
headerTitleStyle: Styles.headerTitleStyle,
headerStyle: GStyles.headerStyle,
headerTitleStyle: GStyles.headerTitleStyle,
headerTitleAlign: "center",
headerBackButtonDisplayMode: "minimal",
headerLeft: () => <BackButton />,

26
app/(application)/profile/[id]/index.tsx
View File

@@ -6,11 +6,12 @@ import DrawerCustom from "@/components/Drawer/DrawerCustom";
import { MainColor } from "@/constants/color-palet";
import { DRAWER_HEIGHT } from "@/constants/constans-value";
import Profile_MenuDrawerSection from "@/screens/Profile/menuDrawerSection";
import { Styles } from "@/styles/global-styles";
import ProfilSection from "@/screens/Profile/profilSection";
import { GStyles } from "@/styles/global-styles";
import { Ionicons } from "@expo/vector-icons";
import { router, Stack, useLocalSearchParams } from "expo-router";
import React, { useRef, useState } from "react";
import { Animated, InteractionManager, Text, TouchableHighlight, TouchableOpacity, View } from "react-native";
import { Animated, InteractionManager, TouchableOpacity } from "react-native";
export default function Profile() {
const { id } = useLocalSearchParams();
@@ -93,25 +94,12 @@ export default function Profile() {
/>
</TouchableOpacity>
),
headerStyle: Styles.headerStyle,
headerTitleStyle: Styles.headerTitleStyle,
headerStyle: GStyles.headerStyle,
headerTitleStyle: GStyles.headerTitleStyle,
}}
/>
<Text style={Styles.textLabel}>Profile {id}</Text>
<TouchableHighlight
onPress={() => router.push(`/(application)/portofolio/${id}`)}
>
<View
style={{
backgroundColor: MainColor.white,
padding: 10,
borderRadius: 10,
marginTop: 10,
}}
>
<Text>Portofolio</Text>
</View>
</TouchableHighlight>
<ProfilSection />
</ViewWrapper>
{/* Drawer Komponen Eksternal */}

6
app/(application)/profile/_layout.tsx
View File

@@ -1,5 +1,5 @@
import { MainColor } from "@/constants/color-palet";
import { Styles } from "@/styles/global-styles";
import { GStyles } from "@/styles/global-styles";
import { Ionicons } from "@expo/vector-icons";
import { router, Stack } from "expo-router";
@@ -8,8 +8,8 @@ export default function ProfileLayout() {
<>
<Stack
screenOptions={{
headerStyle: Styles.headerStyle,
headerTitleStyle: Styles.headerTitleStyle,
headerStyle: GStyles.headerStyle,
headerTitleStyle: GStyles.headerTitleStyle,
headerTitleAlign: "center",
headerBackButtonDisplayMode: "minimal",
headerLeft: () => (

82
components/Text/TextCustom.tsx Normal file
View File

@@ -0,0 +1,82 @@
import { MainColor } from "@/constants/color-palet";
import {
TEXT_SIZE_LARGE,
TEXT_SIZE_MEDIUM,
TEXT_SIZE_SMALL,
} from "@/constants/constans-value";
import React from "react";
import { StyleProp, Text as RNText, TextStyle, StyleSheet } from "react-native";
interface TextCustomProps {
children: string;
style?: StyleProp<TextStyle>;
bold?: boolean;
semiBold?: boolean;
size?: "default" | "large" | "small";
color?: "default" | "primary" | "secondary";
}
const TextCustom: React.FC<TextCustomProps> = ({
children,
style,
bold = false,
semiBold = false,
size = "default",
color = "default",
}) => {
const getStyle = () => {
let selectedStyles = [];
// Base style
selectedStyles.push(styles.default);
// Font weight
if (bold) selectedStyles.push(styles.bold);
else if (semiBold) selectedStyles.push(styles.semiBold);
// Size
if (size === "large") selectedStyles.push(styles.large);
else if (size === "small") selectedStyles.push(styles.small);
// Color
if (color === "primary") selectedStyles.push(styles.primaryColor);
else if (color === "secondary") selectedStyles.push(styles.secondaryColor);
// Override with passed style
if (style) selectedStyles.push(style);
return selectedStyles;
};
return <RNText style={getStyle()}>{children}</RNText>;
};
export default TextCustom;
export const styles = StyleSheet.create({
default: {
// fontFamily: "Poppins-Regular", // Ganti dengan font yang kamu gunakan
fontSize: TEXT_SIZE_MEDIUM,
color: MainColor.white,
},
bold: {
fontFamily: "Poppins-Bold",
fontWeight: "700",
},
semiBold: {
fontFamily: "Poppins-SemiBold",
fontWeight: "500",
},
large: {
fontSize: TEXT_SIZE_LARGE,
},
small: {
fontSize: TEXT_SIZE_SMALL,
},
primaryColor: {
color: "#007AFF", // Warna utama aplikasi kamu
},
secondaryColor: {
color: "#666",
},
});

8
components/_ShareComponent/ViewWrapper.tsx
View File

@@ -1,5 +1,5 @@
import { MainColor } from "@/constants/color-palet";
import { Styles } from "@/styles/global-styles";
import { GStyles } from "@/styles/global-styles";
import { ImageBackground, ScrollView, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
@@ -34,12 +34,12 @@ const ViewWrapper = ({
<ImageBackground
source={assetBackground}
resizeMode="cover"
style={Styles.imageBackground}
style={GStyles.imageBackground}
>
<View style={Styles.containerWithBackground}>{children}</View>
<View style={GStyles.containerWithBackground}>{children}</View>
</ImageBackground>
) : (
<View style={Styles.container}>{children}</View>
<View style={GStyles.container}>{children}</View>
)}
</ScrollView>
{tabBarComponent}

4
components/index.ts
View File

@@ -10,6 +10,8 @@ import MenuDrawerDynamicGrid from "./Drawer/MenuDrawerDynamicGird";
import ViewWrapper from "./_ShareComponent/ViewWrapper";
import TruncatedText from "./_ShareComponent/TruncatedText";
import Spacing from "./_ShareComponent/Spacing";
// Text
import TextCustom from "./Text/TextCustom";
// TextInput
import { TextInputCustom } from "./TextInput/TextInputCustom";
@@ -25,6 +27,8 @@ export {
Spacing,
TruncatedText,
ViewWrapper,
// Text
TextCustom,
// TextInput
TextInputCustom,
};

18
screens/Authentication/LoginView.tsx
View File

@@ -1,12 +1,12 @@
import ButtonCustom from "@/components/Button/ButtonCustom";
import Spacing from "@/components/_ShareComponent/Spacing";
import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
import { MainColor } from "@/constants/color-palet";
import { Styles } from "@/styles/global-styles";
import { GStyles } from "@/styles/global-styles";
import { router } from "expo-router";
import { useState } from "react";
import { Text, View } from "react-native";
import PhoneInput, { ICountry } from "react-native-international-phone-number";
import ButtonCustom from "@/components/Button/ButtonCustom";
import Spacing from "@/components/_ShareComponent/Spacing";
import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
export default function LoginView() {
@@ -25,17 +25,17 @@ export default function LoginView() {
const callingCode = selectedCountry?.callingCode.replace(/^\+/, "") || "";
const fixNumber = callingCode + inputValue;
console.log(fixNumber);
router.push("/verification");
router.navigate("/(application)/profile/1");
}
return (
<ViewWrapper withBackground>
<View style={Styles.authContainer}>
<View style={GStyles.authContainer}>
<View>
<View style={Styles.authContainerTitle}>
<Text style={Styles.authSubTitle}>WELCOME TO</Text>
<View style={GStyles.authContainerTitle}>
<Text style={GStyles.authSubTitle}>WELCOME TO</Text>
<Spacing height={5} />
<Text style={Styles.authTitle}>HIPMI BADUNG APPS</Text>
<Text style={GStyles.authTitle}>HIPMI BADUNG APPS</Text>
<Spacing height={5} />
</View>
<Spacing height={50} />

12
screens/Authentication/RegisterView.tsx
View File

@@ -3,7 +3,7 @@ import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
import ButtonCustom from "@/components/Button/ButtonCustom";
import { TextInputCustom } from "@/components/TextInput/TextInputCustom";
import { MainColor } from "@/constants/color-palet";
import { Styles } from "@/styles/global-styles";
import { GStyles } from "@/styles/global-styles";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { router } from "expo-router";
import { Text, View } from "react-native";
@@ -12,10 +12,10 @@ export default function RegisterView() {
return (
<>
<ViewWrapper withBackground>
<View style={Styles.authContainer}>
<View style={GStyles.authContainer}>
<View>
<View style={Styles.authContainerTitle}>
<Text style={Styles.authTitle}>REGISTRASI</Text>
<View style={GStyles.authContainerTitle}>
<Text style={GStyles.authTitle}>REGISTRASI</Text>
<Spacing />
<MaterialCommunityIcons
name="account"
@@ -24,10 +24,10 @@ export default function RegisterView() {
/>
<Spacing />
<Text style={Styles.textLabel}>
<Text style={GStyles.textLabel}>
Anda akan terdaftar dengan nomor
</Text>
<Text style={Styles.textLabel}>+6282xxxxxxxxx</Text>
<Text style={GStyles.textLabel}>+6282xxxxxxxxx</Text>
<Spacing />
</View>
<TextInputCustom placeholder="Masukkan username" />

16
screens/Authentication/VerificationView.tsx
View File

@@ -2,7 +2,7 @@ import Spacing from "@/components/_ShareComponent/Spacing";
import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
import ButtonCustom from "@/components/Button/ButtonCustom";
import { MainColor } from "@/constants/color-palet";
import { Styles } from "@/styles/global-styles";
import { GStyles } from "@/styles/global-styles";
import { router } from "expo-router";
import { Text, View } from "react-native";
import { OtpInput } from "react-native-otp-entry";
@@ -11,13 +11,13 @@ export default function VerificationView() {
return (
<>
<ViewWrapper withBackground>
<View style={Styles.authContainer}>
<View style={GStyles.authContainer}>
<View>
<View style={Styles.authContainerTitle}>
<Text style={Styles.authTitle}>Verifikasi KOde OTP</Text>
<View style={GStyles.authContainerTitle}>
<Text style={GStyles.authTitle}>Verifikasi KOde OTP</Text>
<Spacing height={30} />
<Text style={Styles.textLabel}>Masukan 4 digit kode otp</Text>
<Text style={Styles.textLabel}>
<Text style={GStyles.textLabel}>Masukan 4 digit kode otp</Text>
<Text style={GStyles.textLabel}>
Yang di kirim ke +6282xxxxxxxxx
</Text>
<Spacing height={30} />
@@ -39,9 +39,9 @@ export default function VerificationView() {
}}
/>
<Spacing height={30} />
<Text style={Styles.textLabel}>
<Text style={GStyles.textLabel}>
Tidak menerima kode ?{" "}
<Text style={Styles.textLabel}>Kirim Ulang</Text>
<Text style={GStyles.textLabel}>Kirim Ulang</Text>
</Text>
</View>
<Spacing height={30} />

6
screens/Home/HomeView.tsx
View File

@@ -1,18 +1,18 @@
import Spacing from "@/components/_ShareComponent/Spacing";
import { Styles } from "@/styles/global-styles";
import DynamicTruncatedText from "@/components/_ShareComponent/TruncatedText";
import { GStyles } from "@/styles/global-styles";
import { Ionicons } from "@expo/vector-icons";
import { Image } from "expo-image";
import { router } from "expo-router";
import { ScrollView, Text, TouchableOpacity, View } from "react-native";
import Icon from "react-native-vector-icons/FontAwesome";
import DynamicTruncatedText from "@/components/_ShareComponent/TruncatedText";
import { stylesHome } from "./homeViewStyle";
export default function HomeView() {
return (
<>
<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
<View style={Styles.homeContainer}>
<View style={GStyles.homeContainer}>
<Spacing height={20} />
<View
style={{

12
screens/Home/tabSection.tsx
View File

@@ -1,5 +1,5 @@
import { ICustomTab, ITabs } from "@/components/_Interface/types";
import { Styles } from "@/styles/global-styles";
import { GStyles } from "@/styles/global-styles";
import { Ionicons } from "@expo/vector-icons";
import { router } from "expo-router";
import React from "react";
@@ -8,12 +8,12 @@ import { Text, TouchableOpacity, View } from "react-native";
const CustomTab = ({ icon, label, isActive, onPress }: ICustomTab) => (
<TouchableOpacity
style={[Styles.tabItem, isActive && Styles.activeTab]}
style={[GStyles.tabItem, isActive && GStyles.activeTab]}
onPress={onPress}
activeOpacity={0.7}
>
<View
style={[Styles.iconContainer, isActive && Styles.activeIconContainer]}
style={[GStyles.iconContainer, isActive && GStyles.activeIconContainer]}
>
<Ionicons
name={icon as any}
@@ -21,7 +21,7 @@ const CustomTab = ({ icon, label, isActive, onPress }: ICustomTab) => (
color={isActive ? "#fff" : "#666"}
/>
</View>
<Text style={[Styles.tabLabel, isActive && Styles.activeTabLabel]}>
<Text style={[GStyles.tabLabel, isActive && GStyles.activeTabLabel]}>
{label}
</Text>
</TouchableOpacity>
@@ -30,8 +30,8 @@ const CustomTab = ({ icon, label, isActive, onPress }: ICustomTab) => (
export default function TabSection({ tabs }: { tabs: ITabs[] }) {
return (
<>
<View style={Styles.tabBar}>
<View style={Styles.tabContainer}>
<View style={GStyles.tabBar}>
<View style={GStyles.tabContainer}>
{tabs.map((e) => (
<CustomTab
key={e.id}

104
screens/Profile/profilSection.tsx Normal file
View File

@@ -0,0 +1,104 @@
import { Spacing, TextCustom } from "@/components";
import { AccentColor, MainColor } from "@/constants/color-palet";
import { ICON_SIZE_SMALL } from "@/constants/constans-value";
import { FontAwesome5, Ionicons } from "@expo/vector-icons";
import { router, useLocalSearchParams } from "expo-router";
import { Text, TouchableHighlight, View } from "react-native";
export default function ProfilSection() {
const { id } = useLocalSearchParams();
const listData = [
{
icon: (
<Ionicons name="call-outline" size={ICON_SIZE_SMALL} color="white" />
),
label: "+6282340374412",
},
{
icon: (
<Ionicons name="mail-outline" size={ICON_SIZE_SMALL} color="white" />
),
label: "bagasbanuna@gmail.com",
},
{
icon: (
<Ionicons
name="location-outline"
size={ICON_SIZE_SMALL}
color="white"
/>
),
label: "Jalan Raya Sesetan No. 123, Bandung, Indonesia",
},
{
icon: (
<FontAwesome5 name="transgender" size={ICON_SIZE_SMALL} color="white" />
),
label: "Laki-laki",
},
];
return (
<>
<View
style={{
backgroundColor: MainColor.soft_darkblue,
borderColor: AccentColor.blue,
borderWidth: 1,
padding: 10,
borderRadius: 6,
marginTop: 10,
}}
>
<View
style={{
flexDirection: "row",
alignItems: "center",
flexWrap: "wrap",
// backgroundColor: MainColor.red,
}}
>
{listData.map((item, index) => (
<View
key={index}
style={{
flexDirection: "row",
alignItems: "center",
marginBottom: 20,
// flexWrap: "wrap",
// backgroundColor: "gray",
}}
>
{item.icon}
<Spacing />
<TextCustom bold style={{ backgroundColor: "" }}>
{`${item.label} Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis dolorem ipsam velit culpa consequuntur porro esse asperiores, debitis, qui numquam excepturi tempora fuga dolor totam quam, provident ipsum repellat hic.`}
</TextCustom>
{/* <View style={{ flexDirection: "row", alignItems: "center" }}>
{item.icon}
<Spacing />
</View> */}
</View>
))}
</View>
</View>
<TouchableHighlight
onPress={() => router.push(`/(application)/portofolio/${id}`)}
>
<View
style={{
backgroundColor: MainColor.white,
padding: 10,
borderRadius: 10,
marginTop: 10,
}}
>
<Text>Portofolio</Text>
</View>
</TouchableHighlight>
</>
);
}

4
styles/global-styles.ts
View File

@@ -1,10 +1,10 @@
import { TEXT_SIZE_MEDIUM } from "@/constants/constans-value";
import { Dimensions, StyleSheet } from "react-native";
import { AccentColor, MainColor } from "../constants/color-palet";
import { TEXT_SIZE_MEDIUM } from "@/constants/constans-value";
const { width } = Dimensions.get("window");
export const Styles = StyleSheet.create({
export const GStyles = StyleSheet.create({
container: {
flex: 1,
paddingInline: 20,