Added notifciations

components/pages/notifications/NotificationsPage.tsx

@@ -0,0 +1,60 @@
+import {FlatList, ScrollView, StyleSheet} from "react-native";
+import React from "react";
+import {Card, Text, View} from "react-native-ui-lib";
+import HeaderTemplate from "@/components/shared/HeaderTemplate";
+import {useGetNotifications} from "@/hooks/firebase/useGetNotifications";
+import {formatDistanceToNow} from "date-fns";
+
+const NotificationsPage = () => {
+    const {data: notifications} = useGetNotifications()
+
+    console.log(notifications?.[0]?.timestamp)
+
+
+    return (
+        <View flexG height={"100%"}>
+            <View flexG>
+                <ScrollView
+                    showsVerticalScrollIndicator={false}
+                    showsHorizontalScrollIndicator={false}
+                >
+                    <View marginH-25>
+                        <HeaderTemplate
+                            message={"Welcome to your notifications!"}
+                            isWelcome={false}
+                            children={
+                                <Text
+                                    style={{fontFamily: "Manrope_400Regular", fontSize: 14}}
+                                >
+                                    See your notifications here.
+                                </Text>
+                            }
+                        />
+                        <View>
+                            <FlatList data={notifications ?? []} renderItem={({item}) => <Card padding-20 gap-10>
+                                <Text text70>{item.content}</Text>
+                                <View row spread>
+                                    <Text text90>{formatDistanceToNow(new Date(item.timestamp), { addSuffix: true })}</Text>
+                                    <Text text90>{item.timestamp.toLocaleDateString()}</Text>
+                                </View>
+                            </Card>}/>
+                        </View>
+                    </View>
+                </ScrollView>
+            </View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    searchField: {
+        borderWidth: 0.7,
+        borderColor: "#9b9b9b",
+        borderRadius: 15,
+        height: 42,
+        paddingLeft: 10,
+        marginVertical: 20,
+    },
+});
+
+export default NotificationsPage;