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

47 lines
1.1 KiB
TypeScript

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