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 }} />