Files
HKSingleParty/99_references/tinder-expo-master/screens/Messages.tsx
2025-05-28 09:55:51 +08:00

45 lines
1.1 KiB
TypeScript

import React from "react";
import {
ScrollView,
Text,
TouchableOpacity,
ImageBackground,
View,
FlatList,
} from "react-native";
import { Icon, Message } from "../components";
import DEMO from "../assets/data/demo";
import styles, { DARK_GRAY } from "../assets/styles";
const Messages = () => (
<ImageBackground
source={require("../assets/images/bg.png")}
style={styles.bg}
>
<View style={styles.containerMessages}>
<View style={styles.top}>
<Text style={styles.title}>Messages</Text>
<TouchableOpacity>
<Icon name="ellipsis-vertical" color={DARK_GRAY} size={20} />
</TouchableOpacity>
</View>
<FlatList
data={DEMO}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item }) => (
<TouchableOpacity>
<Message
image={item.image}
name={item.name}
lastMessage={item.message}
/>
</TouchableOpacity>
)}
/>
</View>
</ImageBackground>
);
export default Messages;