upd: tampilan

Deskripsi:
- toast
- firebase

No Issues

app/(application)/_layout.tsx

@@ -6,18 +6,22 @@ import HeaderRightGroupList from "@/components/group/headerGroupList";
 import HeaderMemberList from "@/components/member/headerMemberList";
 import HeaderRightPositionList from "@/components/position/headerRightPositionList";
 import HeaderRightProjectList from "@/components/project/headerProjectList";
+import Text from "@/components/Text";
+import ToastCustom from "@/components/toastCustom";
 import { Headers } from "@/constants/Headers";
+import Styles from "@/constants/Styles";
 import { apiReadOneNotification } from "@/lib/api";
 import { pushToPage } from "@/lib/pushToPage";
 import store from "@/lib/store";
 import { useAuthSession } from "@/providers/AuthProvider";
+import firebase from '@react-native-firebase/app';
 import { Redirect, router, Stack } from "expo-router";
 import { StatusBar } from 'expo-status-bar';
 import { useEffect } from "react";
-import { Text } from "react-native";
+import { View } from "react-native";
 import { Easing, Notifier } from 'react-native-notifier';
+import Toast from "react-native-toast-message";
 import { Provider } from "react-redux";
-import firebase from '@react-native-firebase/app';
 
 export default function RootLayout() {
    const { token, decryptToken, isLoading } = useAuthSession()
@@ -122,6 +126,7 @@ export default function RootLayout() {
             />
          </Stack>
          <StatusBar style="light" translucent={false} backgroundColor="black" />
+         <ToastCustom />
       </Provider>
    )
 }

app/index.tsx

@@ -1,11 +1,11 @@
 import ViewLogin from "@/components/auth/viewLogin";
 import ViewVerification from "@/components/auth/viewVerification";
+import Text from '@/components/Text';
+import ToastCustom from "@/components/toastCustom";
 import { requestPermission } from "@/lib/useNotification";
 import { useAuthSession } from "@/providers/AuthProvider";
 import { Redirect } from "expo-router";
 import { useEffect, useState } from "react";
-import { View } from "react-native";
-import Text from '@/components/Text';
 
 export default function Index() {
    const [isValid, setValid] = useState(false)

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 Toast.show({ type: 'small', text1: 'Terjadi kesalahan', })
-         return ToastAndroid.show(`Terjadi kesalahan ${error}`, ToastAndroid.SHORT)
       } 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>
+         )
+      }} />
+   )
+}

constants/Styles.ts

@@ -550,6 +550,14 @@ const Styles = StyleSheet.create({
       top: 18,
       left: 20,
       position: 'absolute'
+   },
+   toastContainer: {
+      backgroundColor: 'white',
+      borderRadius: 10,
+      padding: 10,
+      width: '90%',
+      borderWidth: 1,
+      borderColor: '#d6d8f6',
    }
 })
 

lib/useNotification.ts

@@ -1,8 +1,7 @@
 import { getApp, getApps, initializeApp } from '@react-native-firebase/app';
-import { getMessaging } from '@react-native-firebase/messaging';
+import messaging, { getMessaging } from '@react-native-firebase/messaging';
 import { useEffect } from 'react';
-import { PermissionsAndroid } from 'react-native';
+import { PermissionsAndroid, Platform } from 'react-native';
-import { pushToPage } from './pushToPage';
 
 // Your Firebase project configuration
 const RNfirebaseConfig = {
@@ -21,6 +20,8 @@ const initializeFirebase = async () => {
       const app = getApps().length ? getApp() : initializeApp(RNfirebaseConfig);
       const mess = getMessaging(app);
 
+      await messaging().registerDeviceForRemoteMessages();
+
       // Set auto initialization and background message handler
       mess.setAutoInitEnabled(true);
       mess.setBackgroundMessageHandler(async remoteMessage => {
@@ -36,15 +37,17 @@ const initializeFirebase = async () => {
 
 export const requestPermission = async () => {
    try {
-      const cek = await PermissionsAndroid.check(PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS)
+      if (Platform.OS === 'android') {
-      if (!cek) {
+         const cek = await PermissionsAndroid.check(PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS)
-         const granted = await PermissionsAndroid.request(
+         if (!cek) {
-            PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS
+            const granted = await PermissionsAndroid.request(
-         );
+               PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS
-         if (granted === PermissionsAndroid.RESULTS.GRANTED) {
+            );
-            return true
+            if (granted === PermissionsAndroid.RESULTS.GRANTED) {
+               return true
+            }
+            return false
          }
-         return false
       }
       return true
    } catch (err) {
@@ -54,8 +57,8 @@ export const requestPermission = async () => {
 
 export const getToken = async () => {
    try {
-      const mess = await initializeFirebase();
+      await initializeFirebase();
-      const token = await mess?.getToken();
+      const token = await messaging().getToken();
       return token;
    } catch (error) {
       console.error("Error getting token:", error);

package.json

@@ -82,6 +82,7 @@
     "react-native-safe-area-context": "5.4.0",
     "react-native-screens": "~4.11.1",
     "react-native-svg": "15.11.2",
+    "react-native-toast-message": "^2.3.3",
     "react-native-ui-datepicker": "^3.0.5",
     "react-native-web": "^0.20.0",
     "react-native-webview": "13.13.5",

providers/AuthProvider.tsx

@@ -4,6 +4,7 @@ import AsyncStorage from '@react-native-async-storage/async-storage';
 import CryptoES from "crypto-es";
 import { router } from "expo-router";
 import { createContext, MutableRefObject, ReactNode, useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { Platform } from 'react-native';
 
 const AuthContext = createContext<{
   signIn: (arg0: string) => void;
@@ -76,7 +77,9 @@ export default function AuthProvider({ children }: { children: ReactNode }): Rea
     try {
       const hasil = await decryptToken(String(tokenRef.current))
       const token = await getToken()
-      const response = await apiUnregisteredToken({ user: hasil, token: String(token) })
+      if (Platform.OS === 'android'){
+        const response = await apiUnregisteredToken({ user: hasil, token: String(token) })
+      }
     } catch (error) {
       console.error(error)
     } finally {