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

46 lines
1.2 KiB
TypeScript

import React, { useState } from "react";
import { View, ImageBackground } from "react-native";
import CardStack, { Card } from "react-native-card-stack-swiper";
import { City, Filters, CardItem } from "../components";
import styles from "../assets/styles";
import DEMO from "../assets/data/demo";
const Home = () => {
const [swiper, setSwiper] = useState<CardStack | null>(null);
return (
<ImageBackground
source={require("../assets/images/bg.png")}
style={styles.bg}
>
<View style={styles.containerHome}>
<View style={styles.top}>
<City />
<Filters />
</View>
<CardStack
loop
verticalSwipe={false}
renderNoMoreCards={() => null}
ref={(newSwiper): void => setSwiper(newSwiper)}
>
{DEMO.map((item) => (
<Card key={item.id}>
<CardItem
hasActions
image={item.image}
name={item.name}
description={item.description}
matches={item.match}
/>
</Card>
))}
</CardStack>
</View>
</ImageBackground>
);
};
export default Home;