Untitled

import React from "react";
import { View, Text, TextInput, Button, FlatList, TouchableOpacity } from "react-native";
import MapView, { Marker } from "react-native-maps";

const App = () => {
const [userRole, setUserRole] = React.useState(null);
const [listings, setListings] = React.useState([]);
const [selectedListing, setSelectedListing] = React.useState(null);
const [searchQuery, setSearchQuery] = React.useState("");

const sampleListings = [
{
id: "1",
title: "Prime Location Billboard",
size: "10x20 ft",
price: "$500/week",
location: { latitude: 37.78825, longitude: -122.4324 },
},
{
id: "2",
title: "Downtown Digital Display",
size: "8x16 ft",
price: "$800/week",
location: { latitude: 37.78875, longitude: -122.4320 },
},
];

React.useEffect(() => {
setListings(sampleListings);
}, []);

const renderBuyerView = () => (
<View style={{ flex: 1, padding: 10 }}>
<TextInput
placeholder="Search for ad spaces"
value={searchQuery}
onChangeText={setSearchQuery}
style={{ borderWidth: 1, marginBottom: 10, padding: 8 }}
/>
<FlatList
data={listings}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<TouchableOpacity
onPress={() => setSelectedListing(item)}
style={{ padding: 10, borderWidth: 1, marginBottom: 10 }}
>
{item.title}
Size: {item.size}
Price: {item.price}

)}
/>
{selectedListing && (
<View style={{ padding: 10, borderWidth: 1 }}>
Details for: {selectedListing.title}
Size: {selectedListing.size}
Price: {selectedListing.price}
<MapView
style={{ height: 200, marginTop: 10 }}
initialRegion={{
latitude: selectedListing.location.latitude,
longitude: selectedListing.location.longitude,
latitudeDelta: 0.01,
longitudeDelta: 0.01,
}}
>



)}

);

const renderSellerView = () => (
<View style={{ flex: 1, padding: 10 }}>
Create a new listing
<Button title="Post an Advertisement" onPress={() => {}} />

);

return (
<View style={{ flex: 1 }}>
{!userRole ? (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
Select your role:
<Button title="I am a Buyer" onPress={() => setUserRole("buyer")} />
<Button title="I am a Seller" onPress={() => setUserRole("seller")} />

) : userRole === "buyer" ? (
renderBuyerView()
) : (
renderSellerView()
)}

);
};

export default App;