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

New repo mobile after delete ! #1

Merged
bagasbanuna merged 233 commits from api/24-oct-25 into main 2025-10-27 11:32:16 +08:00
Conversation 0 Commits 233 Files Changed 549 +2114 -309
44 changed files with 2114 additions and 309 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 564ea68d29 - Show all commits

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

@@ -1,23 +1,27 @@
import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
import { MainColor } from "@/constants/color-palet";
import { AccentColor, MainColor } from "@/constants/color-palet";
import { Styles } from "@/styles/global-styles";
import { Ionicons } from "@expo/vector-icons";
import { router, Stack, useLocalSearchParams } from "expo-router";
import React, { useRef, useState } from "react";
import {
Alert,
Animated,
PanResponder,
StyleSheet,
Text,
TouchableOpacity,
View,
Animated,
PanResponder,
} from "react-native";
import React, { useRef, useState } from "react";
const DRAWER_HEIGHT = 300; // tinggi drawer
export default function Profile() {
const { id } = useLocalSearchParams();
const [isDrawerOpen, setIsDrawerOpen] = useState(false);
const [showLogoutAlert, setShowLogoutAlert] = useState(false);
// Animasi menggunakan translateY (lebih kompatibel)
const drawerAnim = useRef(new Animated.Value(200)).current; // mulai di luar bawah layar
const drawerAnim = useRef(new Animated.Value(DRAWER_HEIGHT)).current; // mulai di luar bawah layar
const openDrawer = () => {
setIsDrawerOpen(true);
@@ -30,22 +34,31 @@ export default function Profile() {
const closeDrawer = () => {
Animated.timing(drawerAnim, {
toValue: 200,
toValue: DRAWER_HEIGHT, // sesuaikan dengan tinggi drawer Anda
duration: 300,
useNativeDriver: true,
}).start(() => setIsDrawerOpen(false));
}).start(() => {
setIsDrawerOpen(false); // baru ganti state setelah animasi selesai
});
};
const panResponder = useRef(
PanResponder.create({
onMoveShouldSetPanResponder: (_, gestureState) => {
return gestureState.dy < -10; // gesek ke atas untuk tutup
return gestureState.dy > 10; // gesek ke bawah
},
onPanResponderMove: (_, gestureState) => {
const offset = gestureState.dy;
if (offset >= 0 && offset <= DRAWER_HEIGHT) {
drawerAnim.setValue(offset); // batasi hingga max 500
}
},
onPanResponderRelease: (_, gestureState) => {
if (gestureState.dy < -50) {
closeDrawer(); // tutup jika gesek cukup tinggi
if (gestureState.dy > 200) {
// Tutup drawer sepenuhnya jika gesek lebih dari 200
closeDrawer();
} else {
// kembali ke posisi awal
// Reset ke posisi awal jika gesek kurang
Animated.spring(drawerAnim, {
toValue: 0,
useNativeDriver: true,
@@ -57,7 +70,7 @@ export default function Profile() {
return (
<>
<ViewWrapper >
<ViewWrapper>
<Stack.Screen
options={{
title: "Profile",
@@ -83,40 +96,37 @@ export default function Profile() {
<Text style={Styles.textLabel}>Profile {id}</Text>
</ViewWrapper>
{/* Overlay Gelap */}
{isDrawerOpen && (
<View
style={[
stylesDrawer.overlay,
{ opacity: isDrawerOpen ? 0.6 : 0 }, // tampilkan overlay hanya saat drawer terbuka
]}
pointerEvents={isDrawerOpen ? "auto" : "none"}
>
<TouchableOpacity onPress={closeDrawer} />
</View>
)}
{/* Custom Bottom Drawer */}
{isDrawerOpen && (
<Animated.View
style={{
position: "absolute",
left: 0,
right: 0,
bottom: 0,
height: 200,
backgroundColor: "white",
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
padding: 20,
shadowColor: "#000",
shadowOffset: { width: 0, height: -2 },
shadowOpacity: 0.2,
elevation: 5,
transform: [{ translateY: drawerAnim }],
}}
style={[
stylesDrawer.drawer,
{ transform: [{ translateY: drawerAnim }] },
]}
{...panResponder.panHandlers}
>
<View
style={{
width: 40,
height: 5,
backgroundColor: "#ccc",
borderRadius: 5,
alignSelf: "center",
marginVertical: 10,
}}
style={[
stylesDrawer.headerBar,
{ backgroundColor: MainColor.white },
]}
/>
<TouchableOpacity
style={{ padding: 15 }}
style={stylesDrawer.menuItem}
onPress={() => {
alert("Pilihan 1 diklik");
closeDrawer();
@@ -126,7 +136,7 @@ export default function Profile() {
</TouchableOpacity>
<TouchableOpacity
style={{ padding: 15 }}
style={stylesDrawer.menuItem}
onPress={() => {
alert("Pilihan 2 diklik");
closeDrawer();
@@ -135,11 +145,163 @@ export default function Profile() {
<Text>Menu Item 2</Text>
</TouchableOpacity>
<TouchableOpacity style={{ padding: 15 }} onPress={closeDrawer}>
<Text style={{ color: "red" }}>Tutup</Text>
<TouchableOpacity
style={stylesDrawer.menuItem}
onPress={() => setShowLogoutAlert(true)}
>
<Text style={{ color: "red" }}>Logout Custom</Text>
</TouchableOpacity>
<TouchableOpacity
style={stylesDrawer.menuItem}
onPress={() =>
Alert.alert(
"Konfirmasi Logout",
"Apakah Anda sudah yakin?",
[
{
text: "Batal",
onPress: () => console.log("Batal logout"),
style: "cancel",
},
{
text: "Ya",
onPress: () => {
console.log("Logout dipilih");
// Di sini Anda bisa tambahkan fungsi logout seperti clear token, redirect, dll
closeDrawer();
},
},
],
{ cancelable: true }
)
}
>
<Text style={{ color: "red" }}>Keluar</Text>
</TouchableOpacity>
</Animated.View>
)}
{showLogoutAlert && (
<View style={styles.alertOverlay}>
<View style={styles.alertBox}>
<Text style={styles.alertTitle}>Konfirmasi Logout</Text>
<Text style={styles.alertMessage}>Apakah Anda sudah yakin?</Text>
<View style={styles.alertButtons}>
<TouchableOpacity
style={[styles.alertButton, styles.cancelButton]}
onPress={() => setShowLogoutAlert(false)}
>
<Text style={styles.buttonText}>Batal</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.alertButton, styles.confirmButton]}
onPress={() => {
console.log("Logout dipilih");
setShowLogoutAlert(false);
closeDrawer();
}}
>
<Text style={styles.buttonText}>Ya</Text>
</TouchableOpacity>
</View>
</View>
</View>
)}
</>
);
}
const stylesDrawer = StyleSheet.create({
overlay: {
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: "black",
opacity: 0.4,
},
drawer: {
position: "absolute",
left: 0,
right: 0,
bottom: 0,
height: DRAWER_HEIGHT,
backgroundColor: AccentColor.darkblue,
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
padding: 20,
shadowColor: "#000",
shadowOffset: { width: 0, height: -2 },
shadowOpacity: 0.2,
elevation: 5,
},
headerBar: {
width: 40,
height: 5,
backgroundColor: MainColor.white,
borderRadius: 5,
alignSelf: "center",
marginVertical: 10,
},
menuItem: {
padding: 15,
},
});
const styles = StyleSheet.create({
alertOverlay: {
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: "rgba(0,0,0,0.5)",
justifyContent: "center",
alignItems: "center",
zIndex: 999,
},
alertBox: {
width: "80%",
backgroundColor: "white",
borderRadius: 10,
padding: 20,
alignItems: "center",
shadowColor: "#000",
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.25,
elevation: 5,
},
alertTitle: {
fontSize: 18,
fontWeight: "bold",
marginBottom: 10,
},
alertMessage: {
textAlign: "center",
marginBottom: 20,
},
alertButtons: {
flexDirection: "row",
justifyContent: "space-between",
width: "100%",
},
alertButton: {
flex: 1,
padding: 10,
borderRadius: 5,
marginHorizontal: 5,
alignItems: "center",
},
cancelButton: {
backgroundColor: "#ccc",
},
confirmButton: {
backgroundColor: "red",
},
buttonText: {
color: "white",
fontWeight: "bold",
},
});

90
app/_layout.tsx
View File

@@ -1,35 +1,71 @@
import "react-native-gesture-handler";
import { MainColor } from "@/constants/color-palet";
import { Stack } from "expo-router";
import "react-native-gesture-handler";
import { SafeAreaProvider } from "react-native-safe-area-context";
export default function RootLayout() {
return (
<SafeAreaProvider
style={{
backgroundColor: MainColor.darkblue,
}}
>
<Stack
screenOptions={{
headerStyle: { backgroundColor: MainColor.darkblue },
headerTitleStyle: { color: MainColor.yellow, fontWeight: "bold" },
headerTitleAlign: "center",
// contentStyle: {
// borderBottomColor: AccentColor.blue,
// borderBottomWidth: 2,
// },
// headerLargeStyle: {
// backgroundColor: MainColor.darkblue,
// },
// headerShadowVisible: 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 }} />
</Stack>
</SafeAreaProvider>
<>
<SafeAreaProvider>
<Stack
screenOptions={{
headerStyle: { backgroundColor: MainColor.darkblue },
headerTitleStyle: { color: MainColor.yellow, fontWeight: "bold" },
headerTitleAlign: "center",
// contentStyle: {
// borderBottomColor: AccentColor.blue,
// borderBottomWidth: 2,
// },
// headerLargeStyle: {
// backgroundColor: MainColor.darkblue,
// },
// headerShadowVisible: 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 }} />
</Stack>
</SafeAreaProvider>
</>
// <SafeAreaProvider
// style={{
// backgroundColor: AccentColor.darkblue,
// }}
// >
// <SafeAreaView
// edges={[
// "bottom",
// // "top",
// ]}
// style={{
// flex: 1,
// // paddingTop: StatusBar.currentHeight,
// // backgroundColor: MainColor.darkblue,
// }}
// >
// <Stack
// screenOptions={{
// headerStyle: { backgroundColor: MainColor.darkblue },
// headerTitleStyle: { color: MainColor.yellow, fontWeight: "bold" },
// headerTitleAlign: "center",
// // contentStyle: {
// // borderBottomColor: AccentColor.blue,
// // borderBottomWidth: 2,
// // },
// // headerLargeStyle: {
// // backgroundColor: MainColor.darkblue,
// // },
// // headerShadowVisible: 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 }} />
// </Stack>
// </SafeAreaView>
// </SafeAreaProvider>
);
}

37
components/_ShareComponent/ViewWrapper.tsx
View File

@@ -1,6 +1,7 @@
import { MainColor } from "@/constants/color-palet";
import { Styles } from "@/styles/global-styles";
import { ImageBackground, ScrollView, View } from "react-native";
import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
import { SafeAreaView } from "react-native-safe-area-context";
interface ViewWrapperProps {
children: React.ReactNode;
@@ -16,7 +17,7 @@ const ViewWrapper = ({
const assetBackground = require("../../assets/images/main-background.png");
return (
<SafeAreaProvider>
<>
<SafeAreaView
edges={[
"bottom",
@@ -25,6 +26,7 @@ const ViewWrapper = ({
style={{
flex: 1,
// paddingTop: StatusBar.currentHeight,
backgroundColor: MainColor.darkblue,
}}
>
<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
@@ -42,7 +44,36 @@ const ViewWrapper = ({
</ScrollView>
{tabBarComponent}
</SafeAreaView>
</SafeAreaProvider>
</>
// <SafeAreaProvider>
// <SafeAreaView
// edges={[
// "bottom",
// // "top",
// ]}
// style={{
// flex: 1,
// // paddingTop: StatusBar.currentHeight,
// backgroundColor: MainColor.darkblue,
// }}
// >
// <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
// {withBackground ? (
// <ImageBackground
// source={assetBackground}
// resizeMode="cover"
// style={Styles.imageBackground}
// >
// <View style={Styles.containerWithBackground}>{children}</View>
// </ImageBackground>
// ) : (
// <View style={Styles.container}>{children}</View>
// )}
// </ScrollView>
// {tabBarComponent}
// </SafeAreaView>
// </SafeAreaProvider>
);
};

4
screens/Authentication/RegisterView.tsx
View File

@@ -42,7 +42,7 @@ export default function RegisterView() {
router.push("/(application)/home")
)}
/>
<Spacing />
{/* <Spacing />
<ButtonCustom
title="Coba"
backgroundColor={MainColor.yellow}
@@ -52,7 +52,7 @@ export default function RegisterView() {
console.log("Home clicked");
router.push("/(application)/coba");
}}
/>
/> */}
</View>
</View>
</ViewWrapper>