Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | 1x 27x 27x 27x 4x 1x | import React from "react";
import { TouchableOpacity, View, Text, StyleSheet } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { calculateDistance } from "../utils/location";
const BURGUNDY = "#800020";
type Props = Readonly<{
item: any;
userLocation: { latitude: number; longitude: number } | null;
onSelect: (locationDetail: any) => void;
}>;
export default function NearbyPlaceItem({
item,
userLocation,
onSelect,
}: Props) {
const distance = userLocation
? Math.round(
calculateDistance(
userLocation.latitude,
userLocation.longitude,
item.location.latitude,
item.location.longitude,
),
)
: 0;
const distanceKm = (distance / 1000).toFixed(1);
return (
<TouchableOpacity
style={styles.poiItem}
onPress={() =>
onSelect({
...item,
distanceKm,
distance,
})
}
>
<View style={styles.poiTextContainer}>
<Text style={styles.placeName} numberOfLines={1} ellipsizeMode="tail">
{item.name}
</Text>
<Text style={styles.address} numberOfLines={2} ellipsizeMode="tail">
{item.address}
</Text>
<Text style={styles.distanceText}>{distanceKm} km away</Text>
</View>
<Ionicons name="chevron-forward" size={20} color={BURGUNDY} />
</TouchableOpacity>
);
}
const styles = StyleSheet.create({
poiItem: {
flexDirection: "row",
alignItems: "flex-start",
paddingVertical: 12,
borderBottomWidth: 1,
borderColor: "#eee",
},
poiTextContainer: {
flex: 1,
marginRight: 12,
paddingTop: 2,
},
placeName: {
fontWeight: "500",
},
address: {
fontSize: 12,
color: "#777",
},
distanceText: {
fontSize: 12,
color: BURGUNDY,
marginTop: 4,
fontWeight: "500",
},
});
|