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

resourcing tabs

Browse Source 
deskripsi:
- coba tabs
This commit is contained in:
Bagasbanuna02
2025-06-24 10:45:42 +08:00
parent 8d9f52b85c
commit 4835d51f35
15 changed files with 187 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
app/(application)/_layout.tsx Normal file
View File

@@ -0,0 +1,28 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
import { Entypo } from "@expo/vector-icons";
import { Tabs } from "expo-router";
export default function ApplicationLayout() {
return (
<>
<Tabs>
<Tabs.Screen name="index" options={{ href: null }} />
<Tabs.Screen
name="home/index"
options={{
title: "Home",
tabBarIcon: () => <Entypo name="home" size={24} color="black" />,
}}
/>
<Tabs.Screen
name="katalog/index"
options={{
title: "Katalog",
tabBarIcon: () => <Entypo name="book" size={24} color="black" />,
}}
/>
</Tabs>
</>
);
}

10
app/background.tsx → app/(application)/home/index.tsx
View File

@@ -1,21 +1,19 @@
import { Text, View } from "react-native";
import { useNavigation } from "expo-router";
import { useEffect } from "react";
import { useNavigation } from "expo-router";
export default function Background() {
export default function Home() {
const navigation = useNavigation();
useEffect(() => {
navigation.setOptions({
headerShown: true,
headerTitle: "Home",
headerShown: false,
});
}, [navigation]);
return (
<View>
<Text>Background</Text>
<Text>Home</Text>
</View>
);
}

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

@@ -0,0 +1,28 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
import { ImageBackground, ScrollView, Text, View } from "react-native";
import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
import { globalStyles } from "@/constants/global-styles";
import Spacing from "@/components/_ShareComponent/Spacing";
import { SafeAreaView } from "react-native-safe-area-context";
export default function Application() {
return (
<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
<ImageBackground
source={require("../../assets/images/main-background.png")}
resizeMode="cover"
style={globalStyles.imageBackground}
>
<View style={globalStyles.container}>
{Array.from({ length: 20 }).map((_, index) => (
<View key={index}>
<Text style={globalStyles.authTitle}>Application {index}</Text>
<Spacing height={30} />
</View>
))}
</View>
</ImageBackground>
</ScrollView>
);
}

9
app/(application)/katalog/index.tsx Normal file
View File

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

12
app/_layout.tsx
View File

@@ -1,5 +1,15 @@
import { Stack } from "expo-router";
export default function RootLayout() {
return <Stack />;
return (
<Stack>
<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.Screen name="(application)/home/index" options={{ title: "Home" }} />
<Stack.Screen name="(application)/(katalog)/index" options={{ title: "Katalog" }} /> */}
</Stack>
);
}

36
app/header-button.tsx
View File

@@ -1,36 +0,0 @@
import { globalStyles } from "@/constants/global-styles";
import { Stack } from "expo-router";
import { useState } from "react";
import { Button, Image, Text } from "react-native";
function LogoTitle(props: { children?: React.ReactNode }) {
return (
<Image
style={globalStyles.image}
source={{ uri: "https://reactnative.dev/img/tiny_logo.png" }}
/>
);
}
export default function Home() {
const [count, setCount] = useState(0);
return (
<>
<Stack.Screen
options={{
headerTitle: (props) => <LogoTitle {...props} />,
headerRight: () => (
<Button
onPress={() => setCount((c) => c + 1)}
title="Update count"
/>
),
}}
/>
<Text>Count: {count}</Text>
</>
);
}

46
app/index.tsx
View File

@@ -1,23 +1,33 @@
import Spacing from "@/components/_ShareComponent/Spacing";
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 { globalStyles } from "@/constants/global-styles";
import { useNavigation, useRouter } from "expo-router";
import { useEffect, useState } from "react";
import { useRouter } from "expo-router";
import { useState } from "react";
import { Text, View } from "react-native";
import PhoneInput, { ICountry } from "react-native-international-phone-number";
export default function Login() {
const router = useRouter();
const navigation = useNavigation();
const [phone, setPhone] = useState("");
useEffect(() => {
navigation.setOptions({
headerShown: false,
});
}, [navigation]);
const [selectedCountry, setSelectedCountry] = useState<null | ICountry>(null);
const [inputValue, setInputValue] = useState<string>("");
function handleInputValue(phoneNumber: string) {
setInputValue(phoneNumber);
}
function handleSelectedCountry(country: ICountry) {
setSelectedCountry(country);
}
function handleLogin() {
const callingCode = selectedCountry?.callingCode.replace(/^\+/, "") || "";
const fixNumber = callingCode + inputValue;
console.log(fixNumber);
router.push("/verification");
}
return (
<ViewWrapper>
@@ -35,6 +45,7 @@ export default function Login() {
<Text style={globalStyles.authTitle}>HIPMI BADUNG APPS</Text>
<Spacing height={5} />
</View>
<Spacing height={50} />
<Text
style={{
position: "absolute",
@@ -51,21 +62,32 @@ export default function Login() {
</View>
{/* Input dengan prefix teks */}
<TextInputCustom
{/* <TextInputCustom
label="Nomor Telepon"
placeholder="Masukkan nomor"
value={phone}
onChangeText={setPhone}
iconLeft="+62"
keyboardType="phone-pad"
/> */}
<PhoneInput
value={inputValue}
onChangePhoneNumber={handleInputValue}
selectedCountry={selectedCountry}
onChangeSelectedCountry={handleSelectedCountry}
defaultCountry="ID"
placeholder="Masukkan nomor"
/>
<Spacing height={20} />
<ButtonCustom
title="Login"
backgroundColor={MainColor.yellow}
textColor={MainColor.black}
radius={10}
onPress={() => router.push("/verification")}
onPress={handleLogin}
/>
</View>
</ViewWrapper>

22
app/new-detail.tsx
View File

@@ -1,22 +0,0 @@
import { globalStyles } from "@/constants/global-styles";
import { Stack, useLocalSearchParams, useRouter } from "expo-router";
import { Text, View } from "react-native";
export default function NewDetail() {
const router = useRouter();
const params = useLocalSearchParams();
return (
<View style={globalStyles.container}>
<Stack.Screen
options={{
title: params.name as string,
}}
/>
<Text onPress={() => router.setParams({ name: "Bagas" })}>
Update title
</Text>
<Text onPress={() => router.back()}>Back</Text>
</View>
);
}

56
app/register.tsx Normal file
View File

@@ -0,0 +1,56 @@
import { Text, View } from "react-native";
import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
import { globalStyles } from "@/constants/global-styles";
import Spacing from "@/components/_ShareComponent/Spacing";
import { EvilIcons } from "@expo/vector-icons";
import { MainColor } from "@/constants/color-palet";
import { TextInputCustom } from "@/components/TextInput/TextInputCustom";
import ButtonCustom from "@/components/Button/ButtonCustom";
import { useRouter } from "expo-router";
export default function Register() {
const router = useRouter();
return (
<ViewWrapper>
<View
style={{
flex: 1,
justifyContent: "center",
height: "100%",
}}
>
<View>
<View style={globalStyles.authContainer}>
<Text style={globalStyles.authTitle}>REGISTRASI</Text>
<Spacing height={30} />
<EvilIcons name="user" size={100} color={MainColor.yellow} />
<Spacing height={30} />
<Text style={globalStyles.textLabel}>
Anda akan terdaftar dengan nomor
</Text>
<Text style={globalStyles.textLabel}>+6282xxxxxxxxx</Text>
<Spacing height={30} />
</View>
<TextInputCustom placeholder="Masukkan username" />
<ButtonCustom
title="Daftar"
backgroundColor={MainColor.yellow}
textColor={MainColor.black}
radius={10}
onPress={() => router.push("/(application)")}
/>
{/* <Spacing height={10} />
<ButtonCustom
title="Katalog"
backgroundColor={MainColor.yellow}
textColor={MainColor.black}
radius={10}
onPress={() => router.push("/(application)/(katalog)")}
/> */}
</View>
</View>
</ViewWrapper>
);
}

26
app/set-screen-dynamic.tsx
View File

@@ -1,26 +0,0 @@
import { globalStyles } from "@/constants/global-styles";
import { Stack, useLocalSearchParams, useRouter } from "expo-router";
import { Text, View } from "react-native";
export default function Details() {
const router = useRouter();
const params = useLocalSearchParams();
return (
<View style={globalStyles.container}>
<Stack.Screen
options={{
title: params.name as string,
}}
/>
<Text
onPress={() => {
router.setParams({ name: "Updated" });
}}
>
Update the title
</Text>
</View>
);
}

17
app/verification.tsx
View File

@@ -3,23 +3,15 @@ import Spacing from "@/components/_ShareComponent/Spacing";
import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
import { MainColor } from "@/constants/color-palet";
import { globalStyles } from "@/constants/global-styles";
import { useNavigation, useRouter } from "expo-router";
import { useEffect } from "react";
import { useRouter } from "expo-router"
import { Text, View } from "react-native";
import { OtpInput } from "react-native-otp-entry";
export default function Validasi() {
const router = useRouter();
const navigation = useNavigation();
useEffect(() => {
navigation.setOptions({
headerShown: false,
});
}, [navigation]);
return (
<ViewWrapper>
<ViewWrapper>
<View
style={{
flex: 1,
@@ -59,6 +51,7 @@ export default function Validasi() {
<Text style={{ ...globalStyles.textLabel }}>Kirim Ulang</Text>
</Text>
</View>
<Spacing height={30} />
</View>
<ButtonCustom
@@ -66,7 +59,7 @@ export default function Validasi() {
backgroundColor={MainColor.yellow}
textColor={MainColor.black}
radius={10}
onPress={() => router.push("/")}
onPress={() => router.push("/register")}
/>
</View>
</ViewWrapper>