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>

7
bun.lock
View File

@@ -25,6 +25,7 @@
"react-dom": "19.0.0",
"react-native": "0.79.4",
"react-native-gesture-handler": "~2.24.0",
"react-native-international-phone-number": "^0.9.3",
"react-native-otp-entry": "^1.8.5",
"react-native-reanimated": "~3.17.4",
"react-native-safe-area-context": "5.4.0",
@@ -1281,6 +1282,8 @@
"path-scurry": ["path-scurry@1.11.1", "", { "dependencies": { "lru-cache": "^10.2.0", "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0" } }, "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA=="],
"phone": ["phone@3.1.58", "", {}, "sha512-4R4qfXxNPpl08fxOH0qvTXTodQue0nCnAQP0OIu2i59TDq4QXM0dq/b7ODPNH93setqK5YdMSiMuce0RPsgu4w=="],
"picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
"picomatch": ["picomatch@3.0.1", "", {}, "sha512-I3EurrIQMlRc9IaAZnqRR044Phh2DXY+55o7uJ0V+hYZAcQYSuFWsc9q5PvyDHUSCe1Qxn/iBz+78s86zWnGag=="],
@@ -1341,10 +1344,14 @@
"react-native": ["react-native@0.79.4", "", { "dependencies": { "@jest/create-cache-key-function": "^29.7.0", "@react-native/assets-registry": "0.79.4", "@react-native/codegen": "0.79.4", "@react-native/community-cli-plugin": "0.79.4", "@react-native/gradle-plugin": "0.79.4", "@react-native/js-polyfills": "0.79.4", "@react-native/normalize-colors": "0.79.4", "@react-native/virtualized-lists": "0.79.4", "abort-controller": "^3.0.0", "anser": "^1.4.9", "ansi-regex": "^5.0.0", "babel-jest": "^29.7.0", "babel-plugin-syntax-hermes-parser": "0.25.1", "base64-js": "^1.5.1", "chalk": "^4.0.0", "commander": "^12.0.0", "event-target-shim": "^5.0.1", "flow-enums-runtime": "^0.0.6", "glob": "^7.1.1", "invariant": "^2.2.4", "jest-environment-node": "^29.7.0", "memoize-one": "^5.0.0", "metro-runtime": "^0.82.0", "metro-source-map": "^0.82.0", "nullthrows": "^1.1.1", "pretty-format": "^29.7.0", "promise": "^8.3.0", "react-devtools-core": "^6.1.1", "react-refresh": "^0.14.0", "regenerator-runtime": "^0.13.2", "scheduler": "0.25.0", "semver": "^7.1.3", "stacktrace-parser": "^0.1.10", "whatwg-fetch": "^3.0.0", "ws": "^6.2.3", "yargs": "^17.6.2" }, "peerDependencies": { "@types/react": "^19.0.0", "react": "^19.0.0" }, "bin": "cli.js" }, "sha512-CfxYMuszvnO/33Q5rB//7cU1u9P8rSOvzhE2053Phdb8+6bof9NLayCllU2nmPrm8n9o6RU1Fz5H0yquLQ0DAw=="],
"react-native-country-codes-picker": ["react-native-country-codes-picker@2.3.5", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-dDQhd0bVvlmgb84NPhTOmTk5UVYPHtk3lqZI+BPb61H1rC2IDrTvPWENg6u1DMGliqWHQDBYpeH37zvxxQL71w=="],
"react-native-edge-to-edge": ["react-native-edge-to-edge@1.6.0", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-2WCNdE3Qd6Fwg9+4BpbATUxCLcouF6YRY7K+J36KJ4l3y+tWN6XCqAC4DuoGblAAbb2sLkhEDp4FOlbOIot2Og=="],
"react-native-gesture-handler": ["react-native-gesture-handler@2.24.0", "", { "dependencies": { "@egjs/hammerjs": "^2.0.17", "hoist-non-react-statics": "^3.3.0", "invariant": "^2.2.4" }, "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-ZdWyOd1C8axKJHIfYxjJKCcxjWEpUtUWgTOVY2wynbiveSQDm8X/PDyAKXSer/GOtIpjudUbACOndZXCN3vHsw=="],
"react-native-international-phone-number": ["react-native-international-phone-number@0.9.3", "", { "dependencies": { "phone": "3.1.58", "react-native-country-codes-picker": "2.3.5" }, "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-eD/P3NP2zctmq5kbInKf7AVKSZdGmYvKbyAB5Ij/+RoCblnqg3wEaSaNKwGdgK3wsJPS4/wjGXcv/jg2NGBYIA=="],
"react-native-is-edge-to-edge": ["react-native-is-edge-to-edge@1.1.7", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-EH6i7E8epJGIcu7KpfXYXiV2JFIYITtq+rVS8uEb+92naMRBdxhTuS8Wn2Q7j9sqyO0B+Xbaaf9VdipIAmGW4w=="],
"react-native-otp-entry": ["react-native-otp-entry@1.8.5", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-TZNkIuUzZKAAWrC8X/A22ZHJdycLysxUNysrGf0yTmDLRUyf4zLXwVFcDYUcRNe763Hjaf5qvtKGILb6lDGzoA=="],

5
components/_ShareComponent/ViewWrapper.tsx
View File

@@ -1,3 +1,4 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
import { globalStyles } from "@/constants/global-styles";
import { ImageBackground, ScrollView, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
@@ -11,7 +12,7 @@ const ViewWrapper = ({ children }: ViewWrapperProps) => {
return (
<SafeAreaView
edges={[]}
edges={["top", "bottom"]}
style={{
flex: 1,
// paddingTop: StatusBar.currentHeight,
@@ -19,7 +20,7 @@ const ViewWrapper = ({ children }: ViewWrapperProps) => {
>
<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
<ImageBackground
source={assetBackground}
source={require("../../assets/images/main-background.png")}
resizeMode="cover"
style={globalStyles.imageBackground}
>

2
constants/global-styles.ts
View File

@@ -16,7 +16,7 @@ export const globalStyles = StyleSheet.create({
authContainer: {
justifyContent: "center",
alignItems: "center",
marginBottom: 50,
// marginBottom: 50,
},
authTitle: {
fontSize: 27,

1
package.json
View File

@@ -32,6 +32,7 @@
"react-dom": "19.0.0",
"react-native": "0.79.4",
"react-native-gesture-handler": "~2.24.0",
"react-native-international-phone-number": "^0.9.3",
"react-native-otp-entry": "^1.8.5",
"react-native-reanimated": "~3.17.4",
"react-native-safe-area-context": "5.4.0",