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

feature home

Browse Source 
deskripsi:
- tampilan home
This commit is contained in:
Bagasbanuna02
2025-06-26 17:43:47 +08:00
parent f0e0ef4b8b
commit 3849e03a1a
17 changed files with 679 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
app/(application)/(home-tabs)/_layout.tsx
View File

@@ -1,52 +0,0 @@
//app/(application)/(tabs)/_layout.tsx
import { MainColor } from "@/constants/color-palet";
import { Entypo } from "@expo/vector-icons";
import { Tabs } from "expo-router";
export default function TabsLayout() {
return (
<>
<Tabs
screenOptions={{
headerTitleAlign: "center",
tabBarStyle: {
backgroundColor: MainColor.darkblue,
},
tabBarActiveTintColor: MainColor.white,
}}
>
<Tabs.Screen name="index" options={{ href: null }} />
<Tabs.Screen
name="katalog"
options={{
title: "Katalog",
tabBarIcon: () => (
<Entypo name="book" size={20} color={MainColor.white} />
),
}}
/>
<Tabs.Screen
name="maps"
options={{
title: "Maps",
tabBarIcon: () => (
<Entypo name="map" size={20} color={MainColor.white} />
),
}}
/>
<Tabs.Screen
name="forum/index"
options={{
title: "Forum",
tabBarIcon: () => (
<Entypo name="chat" size={20} color={MainColor.white} />
),
}}
/>
</Tabs>
</>
);
}

30
app/(application)/(home-tabs)/index.tsx
View File

@@ -1,30 +0,0 @@
import HomeView from "@/screens/Home/HomeView";
import { Styles } from "@/styles/global-styles";
import { Stack } from "expo-router";
import React from "react";
import { View } from "react-native";
export default function Tabs() {
// const router = useRouter();
// const navigation = useNavigation();
// useEffect(() => {
// navigation.setOptions({
// });
// }, [navigation]);
return (
<>
<View>
<Stack.Screen
options={{
title: "HIPMI",
headerStyle: Styles.headerStyle,
headerTitleStyle: Styles.headerTitleStyle,
}}
/>
<HomeView />
</View>
</>
);
}

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

@@ -20,16 +20,77 @@ export default function ApplicationLayout() {
}}
>
<Stack.Screen
name="(home-tabs)"
name="home"
options={{
headerShown: false,
title: "HIPMI",
headerLeft: () => (
<Ionicons
name="search"
size={20}
color={MainColor.yellow}
onPress={() => router.back()}
/>
),
headerRight: () => (
<Ionicons
name="notifications"
size={20}
color={MainColor.yellow}
onPress={() => router.back()}
/>
),
}}
/>
<Stack.Screen
name="event/index"
name="forum/index"
options={{
title: "Event",
title: "Forum",
headerLeft: () => (
<Ionicons
name="arrow-back"
size={20}
color={MainColor.yellow}
onPress={() => router.back()}
/>
),
}}
/>
<Stack.Screen
name="maps/index"
options={{
title: "Maps",
headerLeft: () => (
<Ionicons
name="arrow-back"
size={20}
color={MainColor.yellow}
onPress={() => router.back()}
/>
),
}}
/>
<Stack.Screen
name="market-place/index"
options={{
title: "Market Place",
headerLeft: () => (
<Ionicons
name="arrow-back"
size={20}
color={MainColor.yellow}
onPress={() => router.back()}
/>
),
}}
/>
<Stack.Screen
name="profile/index"
options={{
title: "Profile",
headerLeft: () => (
<Ionicons
name="arrow-back"

239
app/(application)/coba/index.tsx Normal file
View File

@@ -0,0 +1,239 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
import React from "react";
import {
View,
Text,
TouchableOpacity,
StyleSheet,
Dimensions,
ScrollView,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { router } from "expo-router";
const { width } = Dimensions.get("window");
// Sample Screen Components
const HomeScreen = () => (
<View style={styles.screen}>
<Text style={styles.screenTitle}>Selamat Datang!</Text>
<Text style={styles.screenText}>Ini adalah halaman utama aplikasi Anda</Text>
</View>
);
const SearchScreen = () => (
<View style={styles.screen}>
<Text style={styles.screenTitle}>Search Screen</Text>
<Text style={styles.screenText}>Cari apa yang Anda butuhkan</Text>
</View>
);
const ProfileScreen = () => (
<View style={styles.screen}>
<Text style={styles.screenTitle}>Profile Screen</Text>
<Text style={styles.screenText}>Informasi profil pengguna</Text>
</View>
);
const NotificationScreen = () => (
<View style={styles.screen}>
{Array.from({ length: 10 }).map((_, index) => (
<View key={index}>
<Text style={styles.screenTitle}>Notifications</Text>
<Text style={styles.screenText}>Notifikasi terbaru Anda</Text>
</View>
))}
</View>
);
// Custom Tab Component
const CustomTab = ({ icon, label, isActive, onPress }: any) => (
<TouchableOpacity
style={[styles.tabItem, isActive && styles.activeTab]}
onPress={onPress}
activeOpacity={0.7}
>
<View
style={[styles.iconContainer, isActive && styles.activeIconContainer]}
>
<Ionicons name={icon} size={24} color={isActive ? "#fff" : "#666"} />
</View>
<Text style={[styles.tabLabel, isActive && styles.activeTabLabel]}>
{label}
</Text>
{isActive && <View style={styles.activeIndicator} />}
</TouchableOpacity>
);
// Main Custom Tab Navigator
const CustomTabNavigator = () => {
const [activeTab, setActiveTab] = React.useState(
'home'
);
const [showHome, setShowHome] = React.useState(true);
const tabs = [
{
id: "search",
icon: "search-outline",
activeIcon: "search",
label: "Event",
component: SearchScreen,
path: "/event",
},
{
id: "notifications",
icon: "notifications-outline",
activeIcon: "notifications",
label: "Forum",
component: NotificationScreen,
path: "/(application)/(home-tabs)/forum",
},
{
id: "profile",
icon: "person-outline",
activeIcon: "person",
label: "Katalog",
component: ProfileScreen,
path: "/(application)/(home-tabs)/katalog",
},
];
// Function untuk handle tab press
const handleTabPress = (tabId: string) => {
setActiveTab(tabId);
// setShowHome(false); // Hide home when any tab is pressed
};
// Determine which component to show
const getActiveComponent = () => {
if (showHome || activeTab === "home") {
return HomeScreen;
}
const selectedTab = tabs.find((tab) => tab.id === activeTab);
return selectedTab ? selectedTab.component : HomeScreen;
};
const ActiveComponent = getActiveComponent();
return (
<View style={styles.container}>
{/* Content Area */}
<ScrollView>
<View style={styles.content}>
<ActiveComponent />
</View>
</ScrollView>
{/* Custom Tab Bar */}
<View style={styles.tabBar}>
<View style={styles.tabContainer}>
{tabs.map((e) => (
<CustomTab
key={e.id}
icon={activeTab === e.id ? e.activeIcon : e.icon}
label={e.label}
isActive={activeTab === e.id && !showHome}
onPress={() => {
// handleTabPress(e.id);
router.push(e.path as any);
}}
/>
))}
</View>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#f5f5f5",
},
content: {
flex: 1,
},
screen: {
flex: 1,
justifyContent: "center",
alignItems: "center",
padding: 20,
},
screenTitle: {
fontSize: 28,
fontWeight: "bold",
color: "#333",
marginBottom: 10,
},
screenText: {
fontSize: 16,
color: "#666",
textAlign: "center",
},
tabBar: {
backgroundColor: "#fff",
paddingBottom: 20,
paddingTop: 10,
shadowColor: "#000",
shadowOffset: {
width: 0,
height: -2,
},
shadowOpacity: 0.1,
shadowRadius: 3,
elevation: 5,
},
tabContainer: {
flexDirection: "row",
justifyContent: "space-around",
alignItems: "center",
paddingHorizontal: 20,
},
tabItem: {
alignItems: "center",
justifyContent: "center",
paddingVertical: 8,
paddingHorizontal: 12,
minWidth: width / 5,
position: "relative",
},
activeTab: {
transform: [{ scale: 1.05 }],
},
iconContainer: {
padding: 8,
borderRadius: 20,
marginBottom: 4,
},
activeIconContainer: {
backgroundColor: "#007AFF",
shadowColor: "#007AFF",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.3,
shadowRadius: 4,
elevation: 4,
},
tabLabel: {
fontSize: 12,
color: "#666",
fontWeight: "500",
},
activeTabLabel: {
color: "#007AFF",
fontWeight: "600",
},
activeIndicator: {
position: "absolute",
bottom: -2,
width: 4,
height: 4,
borderRadius: 2,
backgroundColor: "#007AFF",
},
});
export default CustomTabNavigator;

0
app/(application)/(home-tabs)/forum/index.tsx → app/(application)/forum/index.tsx
View File

11
app/(application)/home.tsx
View File

@@ -1,16 +1,9 @@
import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
import HomeView from "@/screens/Home/HomeView";
import { Styles } from "@/styles/global-styles";
import { View } from "react-native";
import NewHomeView from "@/screens/Home/UiHome";
export default function Application() {
return (
<>
<ViewWrapper>
<View style={Styles.container}>
<HomeView />
</View>
</ViewWrapper>
<NewHomeView />
</>
);
}

2
app/(application)/(home-tabs)/maps.tsx → app/(application)/maps/index.tsx
View File

@@ -5,5 +5,5 @@ export default function Maps() {
<View>
<Text>Maps</Text>
</View>
);
)
}

9
app/(application)/market-place/index.tsx Normal file
View File

@@ -0,0 +1,9 @@
import { Text, View } from "react-native";
export default function MarketPlace() {
return (
<View>
<Text>Market Place</Text>
</View>
);
}

4
app/(application)/(home-tabs)/katalog.tsx → app/(application)/profile/index.tsx
View File

@@ -1,9 +1,9 @@
import { Text, View } from "react-native";
export default function Katalog() {
export default function Profile() {
return (
<View>
<Text>Katalog</Text>
<Text>Profile</Text>
</View>
);
}

32
app/_layout.tsx
View File

@@ -1,9 +1,6 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
import { AccentColor, MainColor } from "@/constants/color-palet";
import { Feather, Ionicons, MaterialIcons } from "@expo/vector-icons";
import { MainColor } from "@/constants/color-palet";
import { Stack } from "expo-router";
import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
import Icon from "react-native-vector-icons/FontAwesome";
import { SafeAreaProvider } from "react-native-safe-area-context";
export default function RootLayout() {
return (
@@ -17,32 +14,17 @@ export default function RootLayout() {
headerStyle: { backgroundColor: MainColor.darkblue },
headerTitleStyle: { color: MainColor.yellow, fontWeight: "bold" },
headerTitleAlign: "center",
contentStyle: {
borderBottomColor: AccentColor.blue,
borderBottomWidth: 2,
},
// contentStyle: {
// borderBottomColor: AccentColor.blue,
// borderBottomWidth: 2,
// },
// headerLargeStyle: {
// backgroundColor: MainColor.darkblue,
// },
// headerShadowVisible: false,
}}
>
<Stack.Screen
name="index"
// options={{
// title: "Login",
// headerStyle: { backgroundColor: MainColor.darkblue },
// headerTitleStyle: { color: MainColor.yellow, fontWeight: "bold" },
// headerTitleAlign: "center",
// headerRight: () => (
// <MaterialIcons name="rocket" size={20} color={MainColor.yellow} />
// ),
// headerLeft: () => (
// <Icon name="rocket" size={20} color={MainColor.yellow} />
// ),
// }}
options={{ headerShown: false }}
/>
<Stack.Screen name="index" options={{ headerShown: false }} />
<Stack.Screen name="verification" options={{ headerShown: false }} />
<Stack.Screen name="register" options={{ headerShown: false }} />
<Stack.Screen name="(application)" options={{ headerShown: false }} />

12
components/Button/ButtonCustom.tsx
View File

@@ -5,6 +5,7 @@ import { Text, TouchableOpacity } from "react-native";
import buttonStyles from "./buttonStyles";
// Definisi props dengan TypeScript
interface ButtonProps {
onPress: () => void;
title?: string;
@@ -15,6 +16,17 @@ interface ButtonProps {
iconLeft?: React.ReactNode;
}
/**
* Props untuk ButtonCustom
* @param onPress: () => void
* @param title?: string
* @param backgroundColor?: string
* @param textColor?: string
* @param radius?: number
* @param disabled?: boolean
* @param iconLeft?: React.ReactNode
* @example iconLeft={<Icon name="arrow-right" size={20} color={MainColor.black}/>
*/
const ButtonCustom: React.FC<ButtonProps> = ({
onPress,
title = "Button",

9
components/_ShareComponent/ViewWrapper.tsx
View File

@@ -5,19 +5,23 @@ import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
interface ViewWrapperProps {
children: React.ReactNode;
withBackground?: boolean;
tabBarComponent?: React.ReactNode;
}
const ViewWrapper = ({
children,
withBackground = false,
tabBarComponent,
}: ViewWrapperProps) => {
const assetBackground = require("../../assets/images/main-background.png");
return (
<SafeAreaProvider>
<SafeAreaView
edges={[]}
edges={[
"bottom",
// "top",
]}
style={{
flex: 1,
// paddingTop: StatusBar.currentHeight,
@@ -36,6 +40,7 @@ const ViewWrapper = ({
<View style={Styles.container}>{children}</View>
)}
</ScrollView>
{tabBarComponent}
</SafeAreaView>
</SafeAreaProvider>
);

2
screens/Authentication/RegisterView.tsx
View File

@@ -40,7 +40,7 @@ export default function RegisterView() {
radius={10}
onPress={() => (
console.log("Success register"),
router.push("/(application)/(home-tabs)")
router.push("/(application)/home")
)}
/>
<Spacing />

194
screens/Home/UiHome.tsx Normal file
View File

@@ -0,0 +1,194 @@
/* eslint-disable no-unused-expressions */
import Spacing from "@/components/_ShareComponent/Spacing";
import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
import { AccentColor, MainColor } from "@/constants/color-palet";
import { Ionicons } from "@expo/vector-icons";
import { Href, router } from "expo-router";
import React from "react";
import {
Dimensions,
StyleSheet,
Text,
TouchableOpacity,
View,
} from "react-native";
import Home_BottomFeatureSection from "./bottomFeatureSection";
import Home_ImageSection from "./imageSection";
import Home_FeatureSection from "./topFeatureSection";
interface Tabs {
id: string;
icon: string;
activeIcon: string;
label: string;
path: Href;
isActive: boolean;
disabled: boolean;
}
const { width } = Dimensions.get("window");
export default function NewHomeView() {
const tabs: Tabs[] = [
{
id: "forum",
icon: "chatbubble-ellipses-outline",
activeIcon: "chatbubble-ellipses",
label: "Forum",
path: "/forum",
isActive: true,
disabled: false,
},
{
id: "marketplace",
icon: "cart-outline",
activeIcon: "cart",
label: "Marketplace",
path: "/market-place",
isActive: false,
disabled: true,
},
{
id: "maps",
icon: "map-outline",
activeIcon: "map",
label: "Maps",
path: "/maps",
isActive: true,
disabled: false,
},
{
id: "profile",
icon: "person-outline",
activeIcon: "person",
label: "Profile",
path: "/profile",
isActive: true,
disabled: false,
},
];
const CustomTab = ({ icon, label, isActive, onPress, disabled }: any) => (
<TouchableOpacity
style={[styles.tabItem, isActive && styles.activeTab]}
onPress={onPress}
activeOpacity={0.7}
>
<View
style={[styles.iconContainer, isActive && styles.activeIconContainer]}
>
<Ionicons name={icon} size={20} color={isActive ? "#fff" : "#666"} />
</View>
<Text style={[styles.tabLabel, isActive && styles.activeTabLabel]}>
{label}
</Text>
{isActive && <View style={styles.activeIndicator} />}
</TouchableOpacity>
);
return (
<>
<ViewWrapper
tabBarComponent={
<View style={styles.tabBar}>
<View style={styles.tabContainer}>
{tabs.map((e) => (
<CustomTab
key={e.id}
icon={e.icon}
label={e.label}
isActive={e.isActive}
onPress={() => {
e.disabled ? console.log("disabled") : router.push(e.path);
}}
/>
))}
</View>
</View>
}
>
<Home_ImageSection />
<Spacing height={10} />
{/* Grid Section */}
<Home_FeatureSection />
<Spacing height={10} />
{/* Job Vacancy Section */}
<Home_BottomFeatureSection />
<Spacing height={20} />
</ViewWrapper>
</>
);
}
const styles = StyleSheet.create({
tabBar: {
backgroundColor: MainColor.darkblue,
borderTopColor: AccentColor.blue,
borderTopWidth: 1,
// borderTopEndRadius: 10,
// borderTopStartRadius: 10,
// tintColor: MainColor.yellow
// paddingBottom: 20,
// paddingTop: 10,
// shadowColor: AccentColor.blue,
// shadowOffset: {
// width: 0,
// height: -2,
// },
// shadowOpacity: 0.9,
// shadowRadius: 3,
// elevation: 5,
},
tabContainer: {
flexDirection: "row",
justifyContent: "space-around",
alignItems: "center",
paddingHorizontal: 0,
},
tabItem: {
alignItems: "center",
justifyContent: "center",
paddingVertical: 8,
paddingHorizontal: 12,
minWidth: width / 5,
position: "relative",
},
activeTab: {
transform: [{ scale: 1.05 }],
},
iconContainer: {
padding: 8,
borderRadius: 20,
// marginBottom: 4,
},
activeIconContainer: {
// backgroundColor: "#007AFF",
// shadowColor: "#007AFF",
// shadowOffset: {
// width: 0,
// height: 2,
// },
// shadowOpacity: 0.3,
// shadowRadius: 4,
// elevation: 4,
},
tabLabel: {
fontSize: 10,
color: "#666",
fontWeight: "500",
},
activeTabLabel: {
color: MainColor.white,
fontWeight: "600",
},
activeIndicator: {
position: "absolute",
bottom: -2,
width: 4,
height: 4,
borderRadius: 2,
backgroundColor: "#007AFF",
},
});

60
screens/Home/bottomFeatureSection.tsx Normal file
View File

@@ -0,0 +1,60 @@
import Spacing from "@/components/_ShareComponent/Spacing";
import DynamicTruncatedText from "@/components/_ShareComponent/TruncatedText";
import { Text, View } from "react-native";
import Icon from "react-native-vector-icons/FontAwesome";
import { stylesHome } from "./homeViewStyle";
export default function Home_BottomFeatureSection() {
return (
<>
<View style={stylesHome.jobVacancyContainer}>
<View style={stylesHome.jobVacancyHeader}>
<Icon name="briefcase" size={24} color="white" />
<Text style={stylesHome.jobVacancyTitle}>Job Vacancy</Text>
</View>
<View style={stylesHome.vacancyList}>
{/* Vacancy Item 1 */}
<View style={stylesHome.vacancyItem}>
{/* <Icon name="user" size={20} color="#FFD700" /> */}
<View style={stylesHome.vacancyDetails}>
<DynamicTruncatedText
text="Bagas_banuna"
fontSize={14}
fontFamily="System"
style={stylesHome.vacancyName}
/>
<Spacing height={5} />
<DynamicTruncatedText
text="Dicari perawat kucing"
fontSize={12}
fontFamily="System"
style={stylesHome.vacancyDescription}
/>
</View>
</View>
{/* Vacancy Item 2 */}
<View style={stylesHome.vacancyItem}>
{/* <Icon name="user" size={20} color="#FFD700" /> */}
<View style={stylesHome.vacancyDetails}>
<DynamicTruncatedText
text="fibramarcell"
fontSize={14}
fontFamily="System"
style={stylesHome.vacancyName}
/>
<Spacing height={5} />
<DynamicTruncatedText
text="Di Butuhkan Seorang..."
fontSize={12}
fontFamily="System"
style={stylesHome.vacancyDescription}
/>
</View>
</View>
</View>
</View>
</>
);
}

26
screens/Home/imageSection.tsx Normal file
View File

@@ -0,0 +1,26 @@
import { Image } from "expo-image";
import { View } from "react-native";
export default function Home_ImageSection() {
return (
<View
style={{
alignItems: "center",
justifyContent: "center",
backgroundColor: "#fff",
borderRadius: 10,
}}
>
<Image
source={require("@/assets/images/constants/home-hipmi.png")}
contentFit="cover"
transition={1000}
style={{
width: "100%",
height: 120,
borderRadius: 10,
}}
/>
</View>
);
}

54
screens/Home/topFeatureSection.tsx Normal file
View File

@@ -0,0 +1,54 @@
import { Ionicons } from "@expo/vector-icons";
import { router } from "expo-router";
import { Text, TouchableOpacity, View } from "react-native";
import { stylesHome } from "./homeViewStyle";
export default function Home_FeatureSection() {
return (
<>
<View style={stylesHome.gridContainer}>
<TouchableOpacity
style={stylesHome.gridItem}
onPress={() => router.push("/(application)/event")}
>
<Ionicons name="analytics" size={48} color="white" />
<Text style={stylesHome.gridLabel}>Event</Text>
</TouchableOpacity>
<TouchableOpacity style={stylesHome.gridItem}>
<Ionicons name="share" size={48} color="white" />
<Text style={stylesHome.gridLabel}>Collaboration</Text>
</TouchableOpacity>
<TouchableOpacity style={stylesHome.gridItem}>
<Ionicons name="cube" size={48} color="white" />
<Text style={stylesHome.gridLabel}>Voting</Text>
</TouchableOpacity>
<TouchableOpacity style={stylesHome.gridItem}>
<Ionicons name="heart" size={48} color="white" />
<Text style={stylesHome.gridLabel}>Crowdfunding</Text>
</TouchableOpacity>
</View>
<View style={stylesHome.gridContainer}>
<TouchableOpacity
style={stylesHome.gridItem}
onPress={() => router.push("/(application)/event")}
>
<Ionicons name="analytics" size={48} color="white" />
<Text style={stylesHome.gridLabel}>Event</Text>
</TouchableOpacity>
<TouchableOpacity style={stylesHome.gridItem}>
<Ionicons name="share" size={48} color="white" />
<Text style={stylesHome.gridLabel}>Collaboration</Text>
</TouchableOpacity>
<TouchableOpacity style={stylesHome.gridItem}>
<Ionicons name="cube" size={48} color="white" />
<Text style={stylesHome.gridLabel}>Voting</Text>
</TouchableOpacity>
<TouchableOpacity style={stylesHome.gridItem}>
<Ionicons name="heart" size={48} color="white" />
<Text style={stylesHome.gridLabel}>Crowdfunding</Text>
</TouchableOpacity>
</View>
</>
);
}