penambahan folder screens, styles dan navigation

This commit is contained in:
2025-06-26 12:14:55 +08:00
parent bff2a89903
commit cd35201e30
19 changed files with 236 additions and 193 deletions

View File

@@ -1,4 +1,4 @@
import HomeView from "@/components/Home/HomeView";
import HomeView from "@/screens/Home/HomeView";
import { MainColor } from "@/constants/color-palet";
import { Stack } from "expo-router";
import React from "react";

View File

@@ -1,6 +1,6 @@
import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
import HomeView from "@/components/Home/HomeView";
import { Styles } from "@/constants/global-styles";
import HomeView from "@/screens/Home/HomeView";
import { Styles } from "@/styles/global-styles";
import { View } from "react-native";
export default function Application() {

View File

@@ -1,80 +1,9 @@
import ButtonCustom from "@/components/_ShareComponent/Button/ButtonCustom";
import Spacing from "@/components/_ShareComponent/Spacing";
import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
import { MainColor } from "@/constants/color-palet";
import { Styles } from "@/constants/global-styles";
import { useRouter } from "expo-router";
import { useState } from "react";
import { Text, View } from "react-native";
import PhoneInput, { ICountry } from "react-native-international-phone-number";
import LoginView from "@/screens/Authentication/LoginView";
export default function Login() {
const router = useRouter();
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 withBackground>
<View style={Styles.authContainer}>
<View>
<View style={Styles.authContainerTitle}>
<Text style={Styles.authSubTitle}>WELCOME TO</Text>
<Spacing height={5} />
<Text style={Styles.authTitle}>HIPMI BADUNG APPS</Text>
<Spacing height={5} />
</View>
<Spacing height={50} />
<Text
style={{
position: "absolute",
bottom: 30,
right: 20,
fontSize: 10,
fontWeight: "thin",
fontStyle: "italic",
color: MainColor.white,
}}
>
powered by muku.id
</Text>
</View>
<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={handleLogin}
/>
</View>
</ViewWrapper>
<>
<LoginView />
</>
);
}

View File

@@ -1,55 +1,9 @@
import ButtonCustom from "@/components/_ShareComponent/Button/ButtonCustom";
import Spacing from "@/components/_ShareComponent/Spacing";
import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
import { TextInputCustom } from "@/components/_ShareComponent/TextInput/TextInputCustom";
import { MainColor } from "@/constants/color-palet";
import { Styles } from "@/constants/global-styles";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { router } from "expo-router";
import { Text, View } from "react-native";
import RegisterView from "@/screens/Authentication/RegisterView";
export default function Register() {
return (
<ViewWrapper withBackground>
<View style={Styles.authContainer}>
<View>
<View style={Styles.authContainerTitle}>
<Text style={Styles.authTitle}>REGISTRASI</Text>
<Spacing />
<MaterialCommunityIcons name="account" size={100} color={MainColor.yellow} />
<Spacing />
<Text style={Styles.textLabel}>
Anda akan terdaftar dengan nomor
</Text>
<Text style={Styles.textLabel}>+6282xxxxxxxxx</Text>
<Spacing />
</View>
<TextInputCustom placeholder="Masukkan username" />
<ButtonCustom
title="Daftar"
backgroundColor={MainColor.yellow}
textColor={MainColor.black}
radius={10}
onPress={() => (
console.log("Success register"),
router.push("/(application)/(tabs)")
)}
/>
<Spacing />
{/* <ButtonCustom
title="Home"
backgroundColor={MainColor.yellow}
textColor={MainColor.black}
radius={10}
onPress={() => {
console.log("Home clicked");
router.push("/(application)/home");
}}
/> */}
</View>
</View>
</ViewWrapper>
<>
<RegisterView />
</>
);
}

View File

@@ -1,60 +1,9 @@
import ButtonCustom from "@/components/_ShareComponent/Button/ButtonCustom";
import Spacing from "@/components/_ShareComponent/Spacing";
import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
import { MainColor } from "@/constants/color-palet";
import { Styles } from "@/constants/global-styles";
import { useRouter } from "expo-router";
import { Text, View } from "react-native";
import { OtpInput } from "react-native-otp-entry";
import VerificationView from "@/screens/Authentication/VerificationView";
export default function Validasi() {
const router = useRouter();
export default function Verification() {
return (
<ViewWrapper withBackground>
<View style={Styles.authContainer}>
<View>
<View style={Styles.authContainerTitle}>
<Text style={Styles.authTitle}>Verifikasi KOde OTP</Text>
<Spacing height={30} />
<Text style={Styles.textLabel}>Masukan 4 digit kode otp</Text>
<Text style={Styles.textLabel}>
Yang di kirim ke +6282xxxxxxxxx
</Text>
<Spacing height={30} />
<OtpInput
numberOfDigits={4}
theme={{
pinCodeContainerStyle: {
backgroundColor: MainColor.login,
borderRadius: 10,
borderWidth: 1,
borderColor: MainColor.yellow,
width: 60,
height: 60,
},
containerStyle: {
paddingLeft: 10,
paddingRight: 10,
},
}}
/>
<Spacing height={30} />
<Text style={Styles.textLabel}>
Tidak menerima kode ?{" "}
<Text style={Styles.textLabel}>Kirim Ulang</Text>
</Text>
</View>
<Spacing height={30} />
</View>
<ButtonCustom
title="Verifikasi"
backgroundColor={MainColor.yellow}
textColor={MainColor.black}
radius={10}
onPress={() => router.push("/register")}
/>
</View>
</ViewWrapper>
<>
<VerificationView />
</>
);
}

View File

@@ -5,9 +5,10 @@
"name": "hipmi-mobile",
"dependencies": {
"@expo/vector-icons": "^14.1.0",
"@react-navigation/bottom-tabs": "^7.3.10",
"@react-navigation/bottom-tabs": "^7.4.2",
"@react-navigation/elements": "^2.3.8",
"@react-navigation/native": "^7.1.6",
"@react-navigation/native-stack": "^7.3.21",
"@types/react-native-vector-icons": "^6.4.18",
"expo": "~53.0.12",
"expo-blur": "~14.1.5",
@@ -385,7 +386,7 @@
"@react-native/virtualized-lists": ["@react-native/virtualized-lists@0.79.4", "", { "dependencies": { "invariant": "^2.2.4", "nullthrows": "^1.1.1" }, "peerDependencies": { "@types/react": "^19.0.0", "react": "*", "react-native": "*" } }, "sha512-0Mdcox6e5PTonuM1WIo3ks7MBAa3IDzj0pKnE5xAwSgQ0DJW2P5dYf+KjWmpkE+Yb0w41ZbtXPhKq+U2JJ6C/Q=="],
"@react-navigation/bottom-tabs": ["@react-navigation/bottom-tabs@7.3.16", "", { "dependencies": { "@react-navigation/elements": "^2.4.5", "color": "^4.2.3" }, "peerDependencies": { "@react-navigation/native": "^7.1.12", "react": ">= 18.2.0", "react-native": "*", "react-native-safe-area-context": ">= 4.0.0", "react-native-screens": ">= 4.0.0" } }, "sha512-BOVtrq5J3zV3T9CeQexX20JrjECWwIgUJj0Uj0DTVuZdvPIf1AHKHDQSWcG6XqDsbqFQu9yCAfRlnt0WwdRP2w=="],
"@react-navigation/bottom-tabs": ["@react-navigation/bottom-tabs@7.4.2", "", { "dependencies": { "@react-navigation/elements": "^2.5.2", "color": "^4.2.3" }, "peerDependencies": { "@react-navigation/native": "^7.1.14", "react": ">= 18.2.0", "react-native": "*", "react-native-safe-area-context": ">= 4.0.0", "react-native-screens": ">= 4.0.0" } }, "sha512-jyBux5l3qqEucY5M/ZWxVvfA8TQu7DVl2gK+xB6iKqRUfLf7dSumyVxc7HemDwGFoz3Ug8dVZFvSMEs+mfrieQ=="],
"@react-navigation/core": ["@react-navigation/core@7.11.0", "", { "dependencies": { "@react-navigation/routers": "^7.4.1", "escape-string-regexp": "^4.0.0", "nanoid": "^3.3.11", "query-string": "^7.1.3", "react-is": "^19.1.0", "use-latest-callback": "^0.2.4", "use-sync-external-store": "^1.5.0" }, "peerDependencies": { "react": ">= 18.2.0" } }, "sha512-LfYPtxsMjldJ80BBeedaDCN0LE81WU1NP4V9Ia3wSrCPTAXt11y6holaBUrmUMVQVqpEyPRQrjwrT1QkfGKquw=="],
@@ -393,7 +394,7 @@
"@react-navigation/native": ["@react-navigation/native@7.1.12", "", { "dependencies": { "@react-navigation/core": "^7.11.0", "escape-string-regexp": "^4.0.0", "fast-deep-equal": "^3.1.3", "nanoid": "^3.3.11", "use-latest-callback": "^0.2.4" }, "peerDependencies": { "react": ">= 18.2.0", "react-native": "*" } }, "sha512-ezHzrZN+9SE4Co6/H8MgDWlBxfJbVc5xi8szRi2QW8eJlsZsAvgGqtKs4YECraV4Yr9zW8RCzNuUxYiQiPMtEQ=="],
"@react-navigation/native-stack": ["@react-navigation/native-stack@7.3.17", "", { "dependencies": { "@react-navigation/elements": "^2.4.5", "warn-once": "^0.1.1" }, "peerDependencies": { "@react-navigation/native": "^7.1.12", "react": ">= 18.2.0", "react-native": "*", "react-native-safe-area-context": ">= 4.0.0", "react-native-screens": ">= 4.0.0" } }, "sha512-nPJv5E/7MYZ5NPD0sFP9DjSawEQ1fYXe0sCZT1C5EHGWK08p3+5HkVScXofDDqUtI/q6UU23uE1YoxVWgRbDRw=="],
"@react-navigation/native-stack": ["@react-navigation/native-stack@7.3.21", "", { "dependencies": { "@react-navigation/elements": "^2.5.2", "warn-once": "^0.1.1" }, "peerDependencies": { "@react-navigation/native": "^7.1.14", "react": ">= 18.2.0", "react-native": "*", "react-native-safe-area-context": ">= 4.0.0", "react-native-screens": ">= 4.0.0" } }, "sha512-oNNZHzkxILEibesamRKLodfXAaDOUvMBITKXLLeblDxnTAyIB/Kf7CmV+8nwkdAgV04kURTxV0SQI+d8gLUm6g=="],
"@react-navigation/routers": ["@react-navigation/routers@7.4.1", "", { "dependencies": { "nanoid": "^3.3.11" } }, "sha512-42mZrMzQ0LfKxUb5OHIurYrPYyRsXFLolucILrvm21f0O40Sw0Ufh1bnn/jRqnxZZu7wvpUGIGYM8nS9zVE1Aw=="],
@@ -1767,6 +1768,10 @@
"@react-native/dev-middleware/debug": ["debug@2.6.9", "", { "dependencies": { "ms": "2.0.0" } }, "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA=="],
"@react-navigation/bottom-tabs/@react-navigation/elements": ["@react-navigation/elements@2.5.2", "", { "dependencies": { "color": "^4.2.3", "use-latest-callback": "^0.2.4", "use-sync-external-store": "^1.5.0" }, "peerDependencies": { "@react-native-masked-view/masked-view": ">= 0.2.0", "@react-navigation/native": "^7.1.14", "react": ">= 18.2.0", "react-native": "*", "react-native-safe-area-context": ">= 4.0.0" }, "optionalPeers": ["@react-native-masked-view/masked-view"] }, "sha512-aGC3ukF5+lXuiF5bK7bJyRuWCE+Tk4MZ3GoQpAb7u7+m0KmsquliDhj4UCWEUU5kUoCeoRAUvv+1lKcYKf+WTQ=="],
"@react-navigation/native-stack/@react-navigation/elements": ["@react-navigation/elements@2.5.2", "", { "dependencies": { "color": "^4.2.3", "use-latest-callback": "^0.2.4", "use-sync-external-store": "^1.5.0" }, "peerDependencies": { "@react-native-masked-view/masked-view": ">= 0.2.0", "@react-navigation/native": "^7.1.14", "react": ">= 18.2.0", "react-native": "*", "react-native-safe-area-context": ">= 4.0.0" }, "optionalPeers": ["@react-native-masked-view/masked-view"] }, "sha512-aGC3ukF5+lXuiF5bK7bJyRuWCE+Tk4MZ3GoQpAb7u7+m0KmsquliDhj4UCWEUU5kUoCeoRAUvv+1lKcYKf+WTQ=="],
"@typescript-eslint/eslint-plugin/ignore": ["ignore@7.0.5", "", {}, "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg=="],
"@typescript-eslint/typescript-estree/minimatch": ["minimatch@9.0.5", "", { "dependencies": { "brace-expansion": "^2.0.1" } }, "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow=="],
@@ -1815,6 +1820,10 @@
"expo-modules-autolinking/glob": ["glob@10.4.5", "", { "dependencies": { "foreground-child": "^3.1.0", "jackspeak": "^3.1.2", "minimatch": "^9.0.4", "minipass": "^7.1.2", "package-json-from-dist": "^1.0.0", "path-scurry": "^1.11.1" }, "bin": "dist/esm/bin.mjs" }, "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg=="],
"expo-router/@react-navigation/bottom-tabs": ["@react-navigation/bottom-tabs@7.3.16", "", { "dependencies": { "@react-navigation/elements": "^2.4.5", "color": "^4.2.3" }, "peerDependencies": { "@react-navigation/native": "^7.1.12", "react": ">= 18.2.0", "react-native": "*", "react-native-safe-area-context": ">= 4.0.0", "react-native-screens": ">= 4.0.0" } }, "sha512-BOVtrq5J3zV3T9CeQexX20JrjECWwIgUJj0Uj0DTVuZdvPIf1AHKHDQSWcG6XqDsbqFQu9yCAfRlnt0WwdRP2w=="],
"expo-router/@react-navigation/native-stack": ["@react-navigation/native-stack@7.3.17", "", { "dependencies": { "@react-navigation/elements": "^2.4.5", "warn-once": "^0.1.1" }, "peerDependencies": { "@react-navigation/native": "^7.1.12", "react": ">= 18.2.0", "react-native": "*", "react-native-safe-area-context": ">= 4.0.0", "react-native-screens": ">= 4.0.0" } }, "sha512-nPJv5E/7MYZ5NPD0sFP9DjSawEQ1fYXe0sCZT1C5EHGWK08p3+5HkVScXofDDqUtI/q6UU23uE1YoxVWgRbDRw=="],
"expo-router/semver": ["semver@7.6.3", "", { "bin": "bin/semver.js" }, "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A=="],
"fast-glob/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],

View File

@@ -1,4 +1,4 @@
import { Styles } from "@/constants/global-styles";
import { Styles } from "@/styles/global-styles";
import { ImageBackground, ScrollView, View } from "react-native";
import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";

View File

@@ -12,9 +12,10 @@
},
"dependencies": {
"@expo/vector-icons": "^14.1.0",
"@react-navigation/bottom-tabs": "^7.3.10",
"@react-navigation/bottom-tabs": "^7.4.2",
"@react-navigation/elements": "^2.3.8",
"@react-navigation/native": "^7.1.6",
"@react-navigation/native-stack": "^7.3.21",
"@types/react-native-vector-icons": "^6.4.18",
"expo": "~53.0.12",
"expo-blur": "~14.1.5",

View File

@@ -0,0 +1,78 @@
import { MainColor } from "@/constants/color-palet";
import { Styles } from "@/styles/global-styles";
import { router } from "expo-router";
import { useState } from "react";
import { Text, View } from "react-native";
import PhoneInput, { ICountry } from "react-native-international-phone-number";
import ButtonCustom from "@/components/Button/ButtonCustom";
import Spacing from "@/components/_ShareComponent/Spacing";
import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
export default function LoginView() {
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 withBackground>
<View style={Styles.authContainer}>
<View>
<View style={Styles.authContainerTitle}>
<Text style={Styles.authSubTitle}>WELCOME TO</Text>
<Spacing height={5} />
<Text style={Styles.authTitle}>HIPMI BADUNG APPS</Text>
<Spacing height={5} />
</View>
<Spacing height={50} />
<Text
style={{
position: "absolute",
bottom: 30,
right: 20,
fontSize: 10,
fontWeight: "thin",
fontStyle: "italic",
color: MainColor.white,
}}
>
powered by muku.id
</Text>
</View>
<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={handleLogin}
/>
</View>
</ViewWrapper>
);
}

View File

@@ -0,0 +1,62 @@
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 { Styles } from "@/styles/global-styles";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { router } from "expo-router";
import { Text, View } from "react-native";
export default function RegisterView() {
return (
<>
<ViewWrapper withBackground>
<View style={Styles.authContainer}>
<View>
<View style={Styles.authContainerTitle}>
<Text style={Styles.authTitle}>REGISTRASI</Text>
<Spacing />
<MaterialCommunityIcons
name="account"
size={100}
color={MainColor.yellow}
/>
<Spacing />
<Text style={Styles.textLabel}>
Anda akan terdaftar dengan nomor
</Text>
<Text style={Styles.textLabel}>+6282xxxxxxxxx</Text>
<Spacing />
</View>
<TextInputCustom placeholder="Masukkan username" />
<ButtonCustom
title="Daftar"
backgroundColor={MainColor.yellow}
textColor={MainColor.black}
radius={10}
onPress={() => (
console.log("Success register"),
router.push("/(application)/(tabs)")
)}
/>
<Spacing />
{/* <ButtonCustom
title="Home"
backgroundColor={MainColor.yellow}
textColor={MainColor.black}
radius={10}
onPress={() => {
console.log("Home clicked");
router.push("/(application)/home");
}}
/> */}
</View>
</View>
</ViewWrapper>
</>
);
}

View File

@@ -0,0 +1,61 @@
import Spacing from "@/components/_ShareComponent/Spacing";
import ViewWrapper from "@/components/_ShareComponent/ViewWrapper";
import ButtonCustom from "@/components/Button/ButtonCustom";
import { MainColor } from "@/constants/color-palet";
import { Styles } from "@/styles/global-styles";
import { router } from "expo-router";
import { Text, View } from "react-native";
import { OtpInput } from "react-native-otp-entry";
export default function VerificationView() {
return (
<>
<ViewWrapper withBackground>
<View style={Styles.authContainer}>
<View>
<View style={Styles.authContainerTitle}>
<Text style={Styles.authTitle}>Verifikasi KOde OTP</Text>
<Spacing height={30} />
<Text style={Styles.textLabel}>Masukan 4 digit kode otp</Text>
<Text style={Styles.textLabel}>
Yang di kirim ke +6282xxxxxxxxx
</Text>
<Spacing height={30} />
<OtpInput
numberOfDigits={4}
theme={{
pinCodeContainerStyle: {
backgroundColor: MainColor.login,
borderRadius: 10,
borderWidth: 1,
borderColor: MainColor.yellow,
width: 60,
height: 60,
},
containerStyle: {
paddingLeft: 10,
paddingRight: 10,
},
}}
/>
<Spacing height={30} />
<Text style={Styles.textLabel}>
Tidak menerima kode ?{" "}
<Text style={Styles.textLabel}>Kirim Ulang</Text>
</Text>
</View>
<Spacing height={30} />
</View>
<ButtonCustom
title="Verifikasi"
backgroundColor={MainColor.yellow}
textColor={MainColor.black}
radius={10}
onPress={() => router.push("/register")}
/>
</View>
</ViewWrapper>
</>
);
}

View File

@@ -1,11 +1,11 @@
import Spacing from "@/components/_ShareComponent/Spacing";
import { Styles } from "@/constants/global-styles";
import { Styles } from "@/styles/global-styles";
import { Ionicons } from "@expo/vector-icons";
import { Image } from "expo-image";
import { router } from "expo-router";
import { ScrollView, Text, TouchableOpacity, View } from "react-native";
import Icon from "react-native-vector-icons/FontAwesome";
import DynamicTruncatedText from "../_ShareComponent/TruncatedText";
import DynamicTruncatedText from "@/components/_ShareComponent/TruncatedText";
import { stylesHome } from "./homeViewStyle";
export default function HomeView() {

View File

@@ -1,5 +1,5 @@
import { StyleSheet } from "react-native";
import { MainColor } from "./color-palet";
import { MainColor } from "../constants/color-palet";
export const Styles = StyleSheet.create({
container: {

View File

@@ -13,5 +13,5 @@
"**/*.tsx",
".expo/types/**/*.ts",
"expo-env.d.ts"
, "components/_ShareComponent/Button/ButtonCustom" ]
, "components/Button/ButtonCustom" ]
}