text4u notification

.gitignore

 web-build/
 expo-env.d.ts
 
+/ios
+/android
+
 # Native
 *.orig.*
 *.jks

app.json

 {
   "expo": {
-    "name": "lesson01",
-    "slug": "lesson01",
+    "name": "text4uapp",
+    "slug": "text4uapp",
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/images/icon.png",
       "adaptiveIcon": {
         "foregroundImage": "./assets/images/adaptive-icon.png",
         "backgroundColor": "#ffffff"
-      }
+      },
+      "package": "com.mirfalah.text4uapp",
+      "googleServicesFile": "./google-services.json"
     },
     "web": {
       "bundler": "metro",
     ],
     "experiments": {
       "typedRoutes": true
-    }
+    },
+    "extra": {
+      "router": {
+        "origin": false
+      },
+      "eas": {
+        "projectId": "1111cd70-7f71-4435-9db3-1c131ada169d"
+      }
+    },
+    "owner": "azriperisiben"
+  },
+  "notification": {
+      "vapidPublicKey": "BJE6QNQyegGZqKbsUDU7SkCbdmm2I481P9wjl0wZWpuWXL4r1RUnV2yNYNI_KTZICk8FzQoMjBqZVyPyXkUQXdU"
   }
 }
+ 

app/(tabs)/home/confirmation.jsx

+import React, { useState } from 'react';
+import { View, StyleSheet, TextInput, Text, ScrollView, Image } from 'react-native';
+import { Appbar, Menu, Avatar, IconButton, useTheme, Button } from 'react-native-paper';
+import { useRouter } from 'expo-router';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import burgerImage from "@/assets/images/burger.png";
+import dpuser from "@/assets/images/userdp.png";
+import { Link } from 'expo-router';
+
+import confirmationNotificationDummyData from "@/dummyData.json";
+
+const Status = () => {
+  const { colors, fonts } = useTheme();
+  const [menuVisible, setMenuVisible] = useState(false);
+  const [searchInput, setSearchInput] = useState("")
+  const router = useRouter();
+
+  return (
+    <View style={[styles.container, { backgroundColor: colors.background }]}>
+      <Appbar.Header>
+
+        <Link href={"/(tabs)/home"}>
+          <IconButton
+            icon="chevron-left"
+            iconColor={colors.secondary}
+            size={24}
+          />
+        </Link>
+
+        <View style={styles.titleContainer}>
+          <Appbar.Content title="Status" titleStyle={[fonts.titleLarge, styles.title]} />
+        </View>
+
+        <Icon
+          name="search"
+          size={40}
+          color="#FFF"
+        />
+
+      </Appbar.Header>
+
+      <View style={{ flex: 1 }}>
+        <View style={{ alignItems: "center", marginBottom: 20 }}>
+          <Text style={[fonts.titleLarge, { color: colors.secondary, fontWeight: "bold" }]}>Abang Bob Burger</Text>
+          <Text style={[fonts.titleMedium, { color: colors.secondary, fontWeight: "bold" }]}>No ID : BobBurgerBangi</Text>
+        </View>
+        <Image source={burgerImage} style={styles.itemImage}></Image>
+
+        <Text style={[fonts.titleLarge, { fontWeight: "bold", marginBottom: 20 }]}>Notification</Text>
+
+        <View style={{ flex: 1, flexDirection: "row", gap: 10 }}>
+          <Avatar.Image size={60} source={burgerImage} style={{ backgroundColor: "rgba(0,0,0,0.2)" }}></Avatar.Image>
+          <View style={{ width: "80%" }}>
+            <View style={{ backgroundColor: "white", borderWidth: 1, borderColor: colors.secondary, borderRadius: 20, padding: 20, marginBottom: 5 }}>
+              <Text style={[fonts.titleMedium, { fontWeight: "bold", marginBottom: 20 }]}>
+                Order Ready for Pick Up
+              </Text>
+              <Text style={[fonts.titleSmall, { fontWeight: "bold" }]}>
+                Your order for Burger Ayam Special is now ready for pick up. Please pick up in 15 minutes as we are preparing for closing soon.
+              </Text>
+            </View>
+            <Text style={[fonts.titleSmall, { fontWeight: "bold", marginLeft: "auto", color: "rgba(0,0,0,0.4)" }]}>
+              11/2/2024 10:52PM
+            </Text>
+          </View>
+
+        </View>
+
+        <Button
+          mode="contained"
+          contentStyle={{ paddingHorizontal: 35 }}
+          style={{
+            alignSelf: 'flex-start'
+          }}
+          onPress={() => router.push('/(tabs)/home')}
+        >
+          <Text>Back</Text>
+        </Button>
+
+      </View>
+
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  itemImage: {
+    marginLeft: "auto",
+    marginRight: "auto",
+    marginBottom: 20
+  },
+  container: {
+    flex: 1,
+    padding: 20,
+    width: '100%',
+  },
+  badge: {
+    backgroundColor: "#BB5C3F",
+    color: "#FFF",
+    borderRadius: 100,
+    paddingVertical: 4,
+    paddingHorizontal: 6,
+    fontSize: 10,
+    fontWeight: "400",
+    verticalAlign: "middle",
+    marginStart: 5
+  },
+  titleContainer: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  title: {
+    fontWeight: 'bold',
+  }
+});
+
+export default Status;

app/(tabs)/home/index.jsx

-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { View, StyleSheet, TextInput, Text, ScrollView, Pressable } from 'react-native';
 import { Appbar, Menu, Avatar, useTheme, Button } from 'react-native-paper';
-
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import dpuser from "@/assets/images/userdp.png";
-import { Link } from 'expo-router';
+import { Link, router } from 'expo-router';
+
+import confirmationNotificationDummyData from "@/dummyData.json";
 
 const Home = () => {
   const { colors, fonts } = useTheme();
   const [searchInput, setSearchInput] = useState("")
   const [showRequest, setshowRequest] = useState(false)
   const [activeTab, setActiveTab] = useState('General');
+  const [confirmationNotification, setConfirmationNotification] = useState([])
+
+  useEffect(() => {
+    setConfirmationNotification(confirmationNotificationDummyData)
+  }, [])
 
   const renderNotification = () => {
     return (
-      <Link href={"/home/status"} asChild>
+      <Link href={{
+        pathname: '/home/status',
+        params: { id: '42', message: 'ReactNativeRocks' },
+      }} asChild>
         <View style={{ marginBottom: 30, borderBottomWidth: 1, borderBottomColor: "rgba(57, 104, 104, 0.3)" }}>
           <View style={{ flexDirection: "row", marginBottom: 10 }}>
             <Avatar.Image size={60} source={dpuser}></Avatar.Image>
   const renderNotificationAction = () => {
     return (
       <View style={{ marginBottom: 30, borderBottomWidth: 1, paddingBottom: 15, borderBottomColor: "rgba(57, 104, 104, 0.3)" }}>
-        <View style={{ flexDirection: "row", marginBottom: 10 }}>
-          <Avatar.Image size={60} source={dpuser}></Avatar.Image>
-          <View style={{ flex: 1, justifyContent: "center", paddingStart: 15, position: "relative", justifyContent: "space-evenly" }}>
-            <Text style={{ fontWeight: "700", position: "absolute", top: 5, right: 0, color: "rgba(0,0,0,0.3)" }}>7:55AM</Text>
-            <Text style={{ fontWeight: "700" }}>Invest Pahang</Text>
-            <Text style={{ fontWeight: "700" }}>ID No : Ariffudin@PSK</Text>
+        <Link href={{
+          pathname: '/home/status',
+          params: { id: '42', message: 'ReactNativeRocks' },
+        }} asChild>
+          <View style={{ flexDirection: "row", marginBottom: 10 }}>
+            <Avatar.Image size={60} source={dpuser}></Avatar.Image>
+            <View style={{ flex: 1, justifyContent: "center", paddingStart: 15, position: "relative", justifyContent: "space-evenly" }}>
+              <Text style={{ fontWeight: "700", position: "absolute", top: 5, right: 0, color: "rgba(0,0,0,0.3)" }}>7:55AM</Text>
+              <Text style={{ fontWeight: "700" }}>Invest Pahang</Text>
+              <Text style={{ fontWeight: "700" }}>ID No : Ariffudin@PSK</Text>
+            </View>
           </View>
-        </View>
+        </Link>
         <Text style={{ fontWeight: "700", marginBottom: 10 }}>Muhammad Ariffudin is working from home today</Text>
         <View style={{ flexDirection: "row", justifyContent: "space-evenly", gap: 10 }}>
           <Button mode='outlined' style={{ paddingHorizontal: 35, borderColor: colors.primary }} onPress={() => { console.log("click") }}>Reject</Button>
 
   const renderNotificationResult = (result) => {
     return (
-      <View style={{ marginBottom: 30, borderBottomWidth: 1, paddingBottom: 15, borderBottomColor: "rgba(57, 104, 104, 0.3)" }}>
-        <View style={{ flexDirection: "row", marginBottom: 10 }}>
-          <Avatar.Image size={60} source={dpuser}></Avatar.Image>
-          <View style={{ flex: 1, justifyContent: "center", paddingStart: 15, position: "relative", justifyContent: "space-evenly" }}>
-            <Text style={{ fontWeight: "700", position: "absolute", top: 5, right: 0, color: "rgba(0,0,0,0.3)" }}>7:55AM</Text>
-            <Text style={{ fontWeight: "700" }}>Invest Pahang</Text>
-            <Text style={{ fontWeight: "700" }}>ID No : Ariffudin@PSK</Text>
+      <Link href={{
+        pathname: '/home/status',
+        params: { id: '42', message: 'ReactNativeRocks' },
+      }} asChild>
+        <View style={{ marginBottom: 30, borderBottomWidth: 1, paddingBottom: 15, borderBottomColor: "rgba(57, 104, 104, 0.3)" }}>
+          <View style={{ flexDirection: "row", marginBottom: 10 }}>
+            <Avatar.Image size={60} source={dpuser}></Avatar.Image>
+            <View style={{ flex: 1, justifyContent: "center", paddingStart: 15, position: "relative", justifyContent: "space-evenly" }}>
+              <Text style={{ fontWeight: "700", position: "absolute", top: 5, right: 0, color: "rgba(0,0,0,0.3)" }}>7:55AM</Text>
+              <Text style={{ fontWeight: "700" }}>Invest Pahang</Text>
+              <Text style={{ fontWeight: "700" }}>ID No : Ariffudin@PSK</Text>
+            </View>
+          </View>
+          <Text style={{ fontWeight: "700", marginBottom: 10 }}>Muhammad Ariffudin is working from home today</Text>
+          <View style={{ flexDirection: "row" }}>
+            {(result) ?
+              <Text style={[fonts.titleSmall, { color: colors.primary }]}><Icon name="done" size={20} style={{ verticalAlign: "middle", marginEnd: 10 }} />Request Accepted</Text> :
+              <Text style={[fonts.titleSmall, { color: colors.error }]}><Icon name="close" size={20} style={{ verticalAlign: "middle", marginEnd: 10 }} />Request Decline</Text>
+            }
           </View>
         </View>
-        <Text style={{ fontWeight: "700", marginBottom: 10 }}>Muhammad Ariffudin is working from home today</Text>
-        <View style={{ flexDirection: "row" }}>
-          {(result) ?
-            <Text style={[fonts.titleSmall, { color: colors.primary }]}><Icon name="done" size={20} style={{ verticalAlign: "middle", marginEnd: 10 }} />Request Accepted</Text> :
-            <Text style={[fonts.titleSmall, { color: colors.error }]}><Icon name="close" size={20} style={{ verticalAlign: "middle", marginEnd: 10 }} />Request Decline</Text>
-          }
-        </View>
-      </View>
+      </Link>
     )
   }
 
 
       {(activeTab == 'Request') && <View style={{ flex: 1 }}>
         <ScrollView>
-          {[1, 2].map(() => renderNotificationAction())}
-          {[1].map(() => renderNotificationResult(true))}
-          {[1].map(() => renderNotificationResult(false))}
+          {confirmationNotification.map((confirmation) => {
+
+            if (!confirmation) return
+
+            if (confirmation.accepted == true) return renderNotificationResult(true)
+            else if (confirmation.accepted == false) return renderNotificationResult(false)
+            else return renderNotificationAction()
+
+          })}
         </ScrollView>
       </View>}
 

app/(tabs)/home/status.jsx

 import React, { useState } from 'react';
 import { View, StyleSheet, TextInput, Text, ScrollView, Image } from 'react-native';
-import { Appbar, Menu, Avatar, IconButton, useTheme } from 'react-native-paper';
+import { Appbar, Menu, Avatar, IconButton, useTheme, Button } from 'react-native-paper';
+import { useRouter } from 'expo-router';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import burgerImage from "@/assets/images/burger.png";
 import dpuser from "@/assets/images/userdp.png";
+import { Link } from 'expo-router';
 
 const Status = () => {
   const { colors, fonts } = useTheme();
   const [menuVisible, setMenuVisible] = useState(false);
   const [searchInput, setSearchInput] = useState("")
+  const router = useRouter();
 
   return (
     <View style={[styles.container, { backgroundColor: colors.background }]}>
       <Appbar.Header>
 
-        <IconButton
-          icon="chevron-left" // Or use "arrow-left"
-          iconColor={colors.secondary}
-          size={24}
-          onPress={() => navigation.goBack()} // Navigates back
-        />
+        <Link href={"/(tabs)/home"}>
+          <IconButton
+            icon="chevron-left"
+            iconColor={colors.secondary}
+            size={24}
+          />
+        </Link>
 
         <View style={styles.titleContainer}>
           <Appbar.Content title="Status" titleStyle={[fonts.titleLarge, styles.title]} />
 
         <View style={{ flex: 1, flexDirection: "row", gap: 10 }}>
           <Avatar.Image size={60} source={burgerImage} style={{ backgroundColor: "rgba(0,0,0,0.2)" }}></Avatar.Image>
-          <View style={{width:"80%"}}>
-            <View style={{ backgroundColor: "white", borderWidth: 1, borderColor: colors.secondary, borderRadius: 20, padding: 20, marginBottom:5 }}>
+          <View style={{ width: "80%" }}>
+            <View style={{ backgroundColor: "white", borderWidth: 1, borderColor: colors.secondary, borderRadius: 20, padding: 20, marginBottom: 5 }}>
               <Text style={[fonts.titleMedium, { fontWeight: "bold", marginBottom: 20 }]}>
                 Order Ready for Pick Up
               </Text>
                 Your order for Burger Ayam Special is now ready for pick up. Please pick up in 15 minutes as we are preparing for closing soon.
               </Text>
             </View>
-            <Text style={[fonts.titleSmall, { fontWeight: "bold", marginLeft:"auto", color:"rgba(0,0,0,0.4)" }]}>
+            <Text style={[fonts.titleSmall, { fontWeight: "bold", marginLeft: "auto", color: "rgba(0,0,0,0.4)" }]}>
               11/2/2024 10:52PM
             </Text>
           </View>
 
         </View>
 
+        <Button mode='contained' style={{ paddingHorizontal: 35, borderColor: colors.primary }} onPress={() => router.push('/(tabs)/home')}>Back</Button>
+
       </View>
 
     </View>

app/(tabs)/notify/index.jsx

   const [inputContent, setInputContent] = useState("");
   const [pickedUser, setPickedUser] = useState(null);
   const [userNameSearch, setUserNameSearch] = useState('');
-  const [visible, setVisible] = useState(false);
+  const [visible, setVisible] = useState(true);
   const [nameSuggestion, setNameSuggestion] = useState([])
 
 

app/index.jsx

 import { Button, useTheme } from 'react-native-paper';
 import text4uLogo from '@/assets/images/text4ulogo.png'
 import text4uTitle from '@/assets/images/text4utitle.png'
+import PushNotification from '@/components/PushNotification';
 
 const Welcome = () => {
     const { colors, button, fonts } = useTheme();
                         Login
                     </Text>
                 </Text>
+                <PushNotification></PushNotification>
             </View>
         </View>
     );

components/BootstrapModal.jsx

 
       <View style={styles.centeredView}>
         <View style={styles.modalView}>
-          <Text style={styles.modalText}>This is a Bootstrap-like Modal!</Text>
+          <Text style={styles.modalText}>Save as Preset Text?</Text>
+          <View style={styles.titleInputContainer}>
+            <Text style={styles.modalSubText}>Set Title</Text>
+
+          </View>
           <Pressable
             style={[styles.button, styles.buttonClose]}
             onPress={() => setVisible(false)}
           >
-            <Text style={styles.textStyle}>Close</Text>
+            <Text style={styles.textStyle}>Save</Text>
           </Pressable>
         </View>
       </View>
     shadowRadius: 4,
     elevation: 5,
   },
+  titleInputContainer: {
+    alignItems:"flex-start"
+  },
   openButton: {
     backgroundColor: '#007bff',
     borderRadius: 6,
     borderRadius: 6,
   },
   buttonClose: {
-    backgroundColor: '#dc3545',
+    backgroundColor: '#DD9C49',
+    borderRadius: 30,
+    paddingVertical: 10,
+    paddingHorizontal: 35
   },
   textStyle: {
     color: 'white',
     fontWeight: '600',
     textAlign: 'center',
+
   },
   modalText: {
     fontSize: 18,
-    textAlign: 'center',
+    color: '#396868',
+    fontWeight: 'bolder'
+  },
+  modalSubText: {
+    fontSize: 12,
+    color: '#396868',
+    alignSelf:"flex-start",
+    fontWeight: 'bolder'
   },
+  textArea: {
+    height: 220,
+    borderColor: "#ccc",
+    borderWidth: 1,
+    padding: 10,
+    borderRadius: 8,
+    textAlignVertical: "top", // Makes text start from the top-left
+    backgroundColor: "#fff",
+    marginBottom: 20
+  }
 });
 
 export default BootstrapModal;

components/PushNotification.tsx

+import { useState, useEffect, useRef } from 'react';
+import { Text, View, Button, Platform } from 'react-native';
+import * as Device from 'expo-device';
+import * as Notifications from 'expo-notifications';
+import Constants from 'expo-constants';
+
+
+Notifications.setNotificationHandler({
+  handleNotification: async () => ({
+    shouldShowAlert: true,
+    shouldPlaySound: true,
+    shouldSetBadge: true,
+  }),
+});
+
+
+
+// async function sendPushNotification(expoPushToken: string) {
+//   const message = {
+//     to: expoPushToken,
+//     sound: 'default',
+//     title: 'Original Title',
+//     body: 'And here is the body!',
+//     data: { someData: 'goes here' },
+//   };
+
+//   await fetch('https://exp.host/--/api/v2/push/send', {
+//     method: 'POST',
+//     headers: {
+//       Accept: 'application/json',
+//       'Accept-encoding': 'gzip, deflate',
+//       'Content-Type': 'application/json',
+//     },
+//     body: JSON.stringify(message),
+//   });
+// }
+
+
+function handleRegistrationError(errorMessage: string) {
+  alert(errorMessage);
+  throw new Error(errorMessage);
+}
+
+async function registerForPushNotificationsAsync() {
+  if (Platform.OS === 'android') {
+    Notifications.setNotificationChannelAsync('default', {
+      name: 'default',
+      importance: Notifications.AndroidImportance.MAX,
+      vibrationPattern: [0, 250, 250, 250],
+      lightColor: '#FF231F7C',
+    });
+  }
+
+  if (Device.isDevice) {
+    const { status: existingStatus } = await Notifications.getPermissionsAsync();
+    let finalStatus = existingStatus;
+    if (existingStatus !== 'granted') {
+      const { status } = await Notifications.requestPermissionsAsync();
+      finalStatus = status;
+    }
+    if (finalStatus !== 'granted') {
+      handleRegistrationError('Permission not granted to get push token for push notification!');
+      return;
+    }
+    const projectId = "1111cd70-7f71-4435-9db3-1c131ada169d";
+      //Constants?.expoConfig?.extra?.eas?.projectId ?? Constants?.easConfig?.projectId;
+    if (!projectId) {
+      handleRegistrationError('Project ID not found');
+    }
+    try {
+      const pushTokenString = (
+        await Notifications.getExpoPushTokenAsync({
+          projectId,
+        })
+      ).data;
+      console.log(pushTokenString);
+      return pushTokenString;
+    } catch (e: unknown) {
+      handleRegistrationError(`${e}`);
+    }
+  } else {
+    handleRegistrationError('Must use physical device for push notifications');
+  }
+}
+
+export default function PushNotification() {
+  const [expoPushToken, setExpoPushToken] = useState('');
+  const [notification, setNotification] = useState<Notifications.Notification | undefined>(
+    undefined
+  );
+  const notificationListener = useRef<Notifications.EventSubscription>();
+  const responseListener = useRef<Notifications.EventSubscription>();
+
+  useEffect(() => {
+    registerForPushNotificationsAsync()
+      .then(token => setExpoPushToken(token ?? ''))
+      .catch((error: any) => setExpoPushToken(`${error}`));
+
+    notificationListener.current = Notifications.addNotificationReceivedListener(notification => {
+      setNotification(notification);
+    });
+
+    responseListener.current = Notifications.addNotificationResponseReceivedListener(response => {
+      console.log(response);
+    });
+
+    return () => {
+      notificationListener.current &&
+        Notifications.removeNotificationSubscription(notificationListener.current);
+      responseListener.current &&
+        Notifications.removeNotificationSubscription(responseListener.current);
+    };
+  }, []);
+
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'space-around' }}>
+      <Text>Your Expo push token: {expoPushToken}</Text>
+      <View style={{ alignItems: 'center', justifyContent: 'center' }}>
+        <Text>Title: {notification && notification.request.content.title} </Text>
+        <Text>Body: {notification && notification.request.content.body}</Text>
+        <Text>Data: {notification && JSON.stringify(notification.request.content.data)}</Text>
+      </View>
+      {/* <Button
+        title="Press to Send Notification"
+        onPress={async () => {
+          await sendPushNotification(expoPushToken);
+        }}
+      /> */}
+    </View>
+  );
+}

dummyData.json

+[
+    {
+      "id": 1,
+      "uuid": "1IS301SDDOEZ",
+      "name": "Invest Pahang",
+      "accepted": null,
+      "enquiry": "Request to work from home",
+      "user": {
+        "id": 1,
+        "name": "AzmanHadi@PSK",
+        "user_img": "https://t4.ftcdn.net/jpg/03/64/21/11/360_F_364211147_1qgLVxv1Tcq0Ohz3FawUfrtONzz8nq3e.jpg"
+      }
+    },
+    {
+      "id": 2,
+      "uuid": "256DDSREF44",
+      "name": "Invest Pahang",
+      "accepted": false,
+      "enquiry": "Notify for early Annual Leave",
+      "user": {
+        "id": 2,
+        "name": "NorMelati@PSK",
+        "user_img": "https://www.shutterstock.com/image-photo/head-shot-portrait-millennial-beautiful-260nw-1893951241.jpg"
+      }
+    },
+    {
+      "id": 3,
+      "uuid": "78DFEEDDDS",
+      "name": "Invest Pahang",
+      "accepted": true,
+      "enquiry": "Notify for Emergency Leave",
+      "user": {
+        "id": 3,
+        "name": "RazuanKhan@PSK",
+        "user_img": "https://plus.unsplash.com/premium_photo-1689568126014-06fea9d5d341?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8cHJvZmlsZXxlbnwwfHwwfHx8MA%3D%3D"
+      }
+    }
+  ]
+  

eas.json

+{
+  "cli": {
+    "version": ">= 16.3.1",
+    "appVersionSource": "remote"
+  },
+  "build": {
+    "development": {
+      "developmentClient": true,
+      "distribution": "internal"
+    },
+    "preview": {
+      "distribution": "internal"
+    },
+    "production": {
+      "autoIncrement": true
+    }
+  },
+  "submit": {
+    "production": {}
+  }
+}

google-services.json

+{
+  "project_info": {
+    "project_number": "643066857095",
+    "project_id": "react-native-text4u",
+    "storage_bucket": "react-native-text4u.firebasestorage.app"
+  },
+  "client": [
+    {
+      "client_info": {
+        "mobilesdk_app_id": "1:643066857095:android:7815fe575c60c4143e9a22",
+        "android_client_info": {
+          "package_name": "com.mirfalah.text4uapp"
+        }
+      },
+      "oauth_client": [],
+      "api_key": [
+        {
+          "current_key": "AIzaSyAee1l7G0PZp4V7hf7OLT2W5J_DyMiHa5E"
+        }
+      ],
+      "services": {
+        "appinvite_service": {
+          "other_platform_oauth_client": []
+        }
+      }
+    }
+  ],
+  "configuration_version": "1"
+}

package.json

   },
   "dependencies": {
     "@expo/vector-icons": "^14.0.2",
+    "@react-native-firebase/app": "^21.14.0",
     "@react-navigation/bottom-tabs": "^7.2.0",
     "@react-navigation/native": "^7.0.14",
     "@rneui/base": "github:react-native-elements/react-native-elements#base",
     "@rneui/themed": "github:react-native-elements/react-native-elements#themed",
-    "expo": "~52.0.40",
+    "expo": "~52.0.46",
     "expo-blur": "~14.0.3",
     "expo-constants": "~17.0.8",
     "expo-font": "~13.0.4",
     "expo-haptics": "~14.0.1",
     "expo-linking": "~7.0.5",
-    "expo-router": "~4.0.19",
-    "expo-splash-screen": "~0.29.22",
+    "expo-router": "~4.0.20",
+    "expo-splash-screen": "~0.29.24",
     "expo-status-bar": "~2.0.1",
     "expo-symbols": "~0.2.2",
-    "expo-system-ui": "~4.0.8",
+    "expo-system-ui": "~4.0.9",
     "expo-web-browser": "~14.0.2",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-native": "0.76.7",
+    "react-native": "0.76.9",
     "react-native-gesture-handler": "~2.20.2",
     "react-native-paper": "^5.13.1",
     "react-native-reanimated": "~3.16.1",
     "react-native-screens": "~4.4.0",
     "react-native-vector-icons": "^10.2.0",
     "react-native-web": "~0.19.13",
-    "react-native-webview": "13.12.5"
+    "react-native-webview": "13.12.5",
+    "expo-dev-client": "~5.0.20",
+    "expo-notifications": "~0.29.14",
+    "expo-device": "~7.0.3"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

react-native-text4u-firebase-adminsdk-fbsvc-1d084e9f00.json

+{
+  "type": "service_account",
+  "project_id": "react-native-text4u",
+  "private_key_id": "1d084e9f0048d1f6851487102674e4b9fd5ceecd",
+  "private_key": "-----BEGIN PRIVATE KEY-----\nMIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQCbu7flaw+/2AKo\nbU0H6MQjv7GkQz22ATZCvzNklgkl3Yv+EMbUd/2uQPWM/BAJpFQyoKrhjeEoYxVu\ns4ekCL43P/kPltrxrzizm7VJBnuWdngG0dHGI/VhuHK6Tuch6DuR3ISwtMJDUhcq\nzMyRPhNI32YoRxS0pIMCJueNHNTr0PjrR5y1wplfkd3lOo7aLHCyq4pf4Mv2I1DT\nrZ9nCT8E6eXKn/OP/qP0e6J0QzXhDeO5YFONPwjVzzowF8nYFFrFuZnPvUWJ4Gmi\nvU+4bj06zY9rN4+q7TwmwLv1nJD9yzylygM+vNDm6W5VhlnwI1Yoxb01Wu1t+Sxv\n/kgZi+qLAgMBAAECggEANI+DvouG0kHui7fwIrY91K7zHrSPFGmOTbLIfq9gwQXo\nJMS2xqkE1pYYChBcvVRYEopFgkDneEEQz78KDaPhxzXxMoDAvodcBMqNwerNNXgg\nhHS2b0BdpjChkB3nRnth95XMtvMbCaugJBLhDDg+O/8iNH/hDiLkEIre5bKQblIf\nlgiM23vhIhpfFKULDZL22kOGJ4hQ9e8RSYCwBUZ6WwZfrmNyELzoTuvtAl89xBh1\n82x4COlaXSFZ7FQqZRq08eCwrrPnTfNOcvaHcYhMdUYiRDU0j9pRbyt+A5SKGnzh\nIuLS7diIGfyf1OxhXyndcMspAgASwsJrnnh/2wj7YQKBgQDKchpqWCogsf3V+lAO\nZ3thgtExXSYsPJnh9gZOebxCjGkLCbwGc+sAe4lfa22kEDpSiaPBG7ISFGur5eaS\nb1UVp/MEhJZZVefQsu+YR5+zAdMgzXUuid1Qr+rN64bhwEvaVZTihRvZ5CLV+uUm\nBaUrvjWstUMhJGJG4LHQptjAEQKBgQDE7i+JMQonPsnS2g03B0xrqJvy3x9nC49M\nZH/vpmHta0QeaptCycC8NSIKBMrIAAt0zxdCO6WrsanXt6rcH7FA63r6Fbt7vhLd\nfx8oCoJie7SowkTgUAG6Hp8Od93y71EprI4V/Q1aj/SmM5PO/IuPpPIG7VBH3MhM\n+/CxyQHc2wKBgFZgHLkm6MKObtkvNZ0PterC3/KJ5dGWAaoRSFuPQS27rs3Q13KB\nXtET5Gbb9Sm86sVwiHfKE033fIEZVClCazEUOXHCCEwRhRjcX7G/TXoY2zXxs3+p\nvs3AYRR+20vSugpr3VxQorNyzRIzPDXezrw9KbWImR244l2PXQ7DQVOhAoGAahGs\nkuVSBa9g/2upAIGy3K3VSWx6OoNUbJ4Y9piUWE+VQhjDhaarY/PuYJ0SJ8U2ZnUA\nnxEHe8HWrDTmF2gOjdwHwdmgwNawzJKi0mtOrQLaXKc+d98//uJtY1qWtjnGan7h\njOBep++vozFWpH8MIJOENMzvl7VIQYbVrryIf08CgYEAgvnjmXxA1bcgbTP9SI+e\nYTwnn8UN8gwsD7tG1Wy8FTl+rjFul606IsJOuN2Pq+87aVpFVpV5+Cy4tbaTt3CH\nWLrU07ClRqYKfDbtakCV8L1ui19coC2rPeY3GbawAS3S2gULUlv7mj+mVAYzALR/\nVNpHXVqMX+0MkzKGlp6774w=\n-----END PRIVATE KEY-----\n",
+  "client_email": "firebase-adminsdk-fbsvc@react-native-text4u.iam.gserviceaccount.com",
+  "client_id": "105205134476001492906",
+  "auth_uri": "https://accounts.google.com/o/oauth2/auth",
+  "token_uri": "https://oauth2.googleapis.com/token",
+  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
+  "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/firebase-adminsdk-fbsvc%40react-native-text4u.iam.gserviceaccount.com",
+  "universe_domain": "googleapis.com"
+}