penambahan folder screens, styles dan navigation
This commit is contained in:
@@ -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";
|
||||
|
||||
@@ -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() {
|
||||
|
||||
@@ -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 />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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 />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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 />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
15
bun.lock
15
bun.lock
@@ -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=="],
|
||||
|
||||
@@ -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";
|
||||
|
||||
|
||||
@@ -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",
|
||||
|
||||
78
screens/Authentication/LoginView.tsx
Normal file
78
screens/Authentication/LoginView.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
62
screens/Authentication/RegisterView.tsx
Normal file
62
screens/Authentication/RegisterView.tsx
Normal 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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
61
screens/Authentication/VerificationView.tsx
Normal file
61
screens/Authentication/VerificationView.tsx
Normal 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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -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() {
|
||||
@@ -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: {
|
||||
@@ -13,5 +13,5 @@
|
||||
"**/*.tsx",
|
||||
".expo/types/**/*.ts",
|
||||
"expo-env.d.ts"
|
||||
, "components/_ShareComponent/Button/ButtonCustom" ]
|
||||
, "components/Button/ButtonCustom" ]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user