120 lines
2.5 KiB
React
120 lines
2.5 KiB
React
|
import React from "react";
|
||
|
|
import {
|
||
|
|
View,
|
||
|
|
Text,
|
||
|
|
StyleSheet,
|
||
|
|
useWindowDimensions,
|
||
|
|
Dimensions,
|
||
|
|
} 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>
|
||
|
|
<View 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}
|
||
|
|
/>
|
||
|
|
</View>
|
||
|
|
</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;
|