cally/components/pages/notifications/NotificationsPage.tsx

import {FlatList, 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])


    return (
        <View flexG height={"100%"}>
            <View flexG>
                <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 contentContainerStyle={{paddingBottom: 10, paddingHorizontal: 25}}
                          data={notifications ?? []}
                          renderItem={({item}) => <Card padding-20 gap-10 marginB-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>
    );
};

const styles = StyleSheet.create({
    searchField: {
        borderWidth: 0.7,
        borderColor: "#9b9b9b",
        borderRadius: 15,
        height: 42,
        paddingLeft: 10,
        marginVertical: 20,
    },
});

export default NotificationsPage;