Obanana_test/app/pages/home/Notification.jsx

import React from "react";
import {
  View,
  Text,
  StyleSheet,
  useWindowDimensions,
  Dimensions,
  ScrollView,
} from "react-native";
import MasonryList from "@react-native-seoul/masonry-list";

const width = Dimensions.get("window").width;

const Notification = () => {
  const notif = [
    {
      title: "Update!",
      body: "the app is updated! check it on google play",
      date: "September 23, 2023 10:00pm",
    },
    {
      title: "Update!",
      body: "the app is updated! check it on google play",
      date: "September 23, 2023 10:00pm",
    },
    {
      title: "Update!",
      body: "the app is updated! check it on google play",
      date: "September 23, 2023 10:00pm",
    },
  ];

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.headerText}>NOTIFICATIONS</Text>
      </View>
      <ScrollView style={styles.wrapper}>
        <MasonryList
          data={notif}
          keyExtractor={(item) => item.id}
          style={styles.list}
          numColumns={1}
          showsVerticalScrollIndicator={false}
          renderItem={({ item }) => (
            <View style={styles.card}>
              <Text style={styles.title}>{item.title}</Text>
              <Text style={styles.body}>{item.body}</Text>
              <Text style={styles.date}>{item.date}</Text>
            </View>
          )}
          containerStyle={styles.container1}
          contentContainerStyle={styles.content}
          onEndReachedThreshold={0.1}
        />
      </ScrollView>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    backgroundColor: "#ffffff",
    padding: 10,
    height: "100%",
    width: width,
  },
  header: {
    width: "100%",
    top: 0,
    height: 50,
    // justifyContent: "space-between",
  },
  headerText: {
    textAlign: "left",
    width: "100%",
    fontWeight: "600",
    fontSize: 16,
  },
  footer: {
    bottom: 0,
    width: "100%",
  },
  wrapper: {
    width: "100%",
    // justifyContent: "center",
    // alignItems: "center",
  },
  list: {
    width: "100%",
    justifyContent: "center",
    alignItems: "center",
  },
  card: {
    width: "100%",
    borderWidth: 1,
    borderColor: "#dddd",
    justifyContent: "center",
    padding: 15,
    paddingVertical: 10,
    borderRadius:10,
    marginVertical:2
  },
  title: {
    fontSize: 16,
    fontWeight: "600",
  },
  body: {
    fontSize: 16,
    // fontWeight: "600",
    marginTop:5
  },
  date: {
    fontSize: 12,
    // fontWeight: "600",
    color:'#797979',
    marginTop:10
  },
});

export default Notification;