Files
CityExplorer/app/(tabs)/index.jsx

53 lines
1.4 KiB
JavaScript

import {
View,
StyleSheet,
FlatList,
} from "react-native";
import { useTheme, Card, Text, Button } from "react-native-paper";
import { Link } from "expo-router";
import useLocationStore from "@/locationStore";
export default function Index() {
const theme = useTheme();
const { locations } = useLocationStore();
return (
<View
style={[styles.container, { backgroundColor: theme.colors.background }]}
>
<FlatList
data={locations}
keyExtractor={(item) => item.id.toString()}
renderItem={({ item }) => (
<Card style={{ margin: 10 }}>
<Card.Cover
style={{ marginBottom: 10 }}
source={item.imageSource}
/>
<Card.Content style={{ marginBottom: 10 }}>
<Text variant="titleLarge">{item.name}</Text>
<Text variant="bodyMedium">
{item.description && item.description.split(".")[0]}...
</Text>
</Card.Content>
<Card.Actions>
<Link href={`/location/${item.id}`} asChild>
<Button>Zobacz więcej</Button>
</Link>
</Card.Actions>
</Card>
)}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#25292e",
justifyContent: "center",
alignItems: "center",
},
});