upd: tampilan

Deskripsi:
- toast
- firebase

No Issues

components/auth/viewLogin.tsx

@@ -2,11 +2,13 @@ import Styles from "@/constants/Styles"
 import { apiCheckPhoneLogin, apiSendOtp } from "@/lib/api"
 import AsyncStorage from "@react-native-async-storage/async-storage"
 import { useState } from "react"
-import { Image, SafeAreaView, ToastAndroid, View } from "react-native"
+import { Image, SafeAreaView, View } from "react-native"
+import Toast from "react-native-toast-message"
 import { ButtonForm } from "../buttonForm"
 import { InputForm } from "../inputForm"
 import ModalLoading from "../modalLoading"
 import Text from "../Text"
+import ToastCustom from "../toastCustom"
 
 
 type Props = {
@@ -31,10 +33,9 @@ export default function ViewLogin({ onValidate }: Props) {
                return onValidate({ phone: `62${phone}`, otp })
             }
          }
-         return ToastAndroid.show(response.message, ToastAndroid.SHORT)
+         return Toast.show({ type: 'small', text1: response.message, })
       } catch (error) {
-         console.error('Error fetching data:', error);
-         return ToastAndroid.show(`Terjadi kesalahan ${error}`, ToastAndroid.SHORT)
+         return Toast.show({ type: 'small', text1: 'Terjadi kesalahan', })
       } finally {
          setLoadingLogin(false)
       }
@@ -42,6 +43,7 @@ export default function ViewLogin({ onValidate }: Props) {
 
    return (
       <SafeAreaView>
+         <ToastCustom />
          <View style={Styles.p20}>
             <View style={{ alignItems: "center", marginVertical: 50 }}>
                <Image

components/auth/viewVerification.tsx

@@ -3,10 +3,12 @@ import { apiSendOtp } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { useState } from "react";
-import { Image, ToastAndroid, View } from "react-native";
+import { Image, View } from "react-native";
 import { OtpInput } from "react-native-otp-entry";
+import Toast from 'react-native-toast-message';
 import { ButtonForm } from "../buttonForm";
 import Text from "../Text";
+import ToastCustom from "../toastCustom";
 
 type Props = {
    phone: string
@@ -25,7 +27,7 @@ export default function ViewVerification({ phone, otp }: Props) {
          const encrypted = await encryptToken(valueUser);
          signIn(encrypted);
       } else {
-         return ToastAndroid.show('Terjadi kesalahan', ToastAndroid.SHORT)
+         return Toast.show({ type: 'small', text1: 'Terjadi kesalahan', })
       }
    }
 
@@ -33,7 +35,7 @@ export default function ViewVerification({ phone, otp }: Props) {
       if (value === otpFix.toString()) {
          login()
       } else {
-         return ToastAndroid.show('Kode OTP tidak sesuai', ToastAndroid.SHORT)
+         return Toast.show({ type: 'error', text1: 'Kode OTP tidak sesuai' });
       }
    }
 
@@ -43,17 +45,18 @@ export default function ViewVerification({ phone, otp }: Props) {
          setOtpFix(otpNew)
          const responseOtp = await apiSendOtp({ phone, otp: otpNew })
          if (responseOtp == 200) {
-            return ToastAndroid.show('Kode OTP berhasil dikirim ulang', ToastAndroid.SHORT)
+            return Toast.show({ type: 'small', text1: 'Kode OTP berhasil dikirim ulang', })
          }
-         return ToastAndroid.show('Terjadi kesalahan dalam mengirim kode OTP', ToastAndroid.SHORT)
+         return Toast.show({ type: 'small', text1: 'Terjadi kesalahan dalam mengirim kode OTP', })
       } catch (error) {
          console.error('Error fetching data:', error);
-         return ToastAndroid.show('Terjadi kesalahan', ToastAndroid.SHORT)
+         return Toast.show({ type: 'small', text1: 'Terjadi kesalahan', })
       }
    }
 
    return (
       <>
+         <ToastCustom />
          <View style={Styles.wrapLogin} >
             <View style={{ alignItems: "center", marginVertical: 50 }}>
                <Image

components/toastCustom.tsx

@@ -0,0 +1,16 @@
+import Styles from "@/constants/Styles";
+import { View } from "react-native";
+import Toast from "react-native-toast-message";
+import Text from "./Text";
+
+export default function ToastCustom() {
+   return (
+      <Toast autoHide onPress={() => Toast.hide()} visibilityTime={1500} position="bottom" config={{
+         small: ({ text1 }) => (
+            <View style={[Styles.toastContainer]}>
+               <Text style={{ fontSize: 12 }}>{text1}</Text>
+            </View>
+         )
+      }} />
+   )
+}