File size: 1,829 Bytes
5c876be | 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 | import React from 'react';
import { StyleSheet, View } from 'react-native';
import { useTheme, Surface, Text, IconButton } from 'react-native-paper';
export interface LocationMessageProps {
/** Latitude of the shared location */
lat: number;
/** Longitude of the shared location */
lng: number;
/** Human-readable address string */
address: string;
/** Callback when the card is pressed */
onPress?: () => void;
}
/**
* Shared location card displayed in a chat conversation.
* Shows a map marker icon and the address text.
*/
export function LocationMessage({ lat, lng, address, onPress }: LocationMessageProps) {
const theme = useTheme();
return (
<Surface
style={[
styles.card,
{
backgroundColor: theme.colors.surfaceContainerHigh,
borderRadius: 12,
},
]}
elevation={0}
onPress={onPress}
>
<View style={styles.inner}>
<IconButton
icon="map-marker"
size={24}
iconColor={theme.colors.error}
style={styles.icon}
/>
<View style={styles.textContainer}>
<Text
variant="labelSmall"
style={{ color: theme.colors.onSurfaceVariant }}
>
Shared location
</Text>
<Text
variant="bodyMedium"
numberOfLines={2}
style={{ color: theme.colors.onSurface }}
>
{address}
</Text>
</View>
</View>
</Surface>
);
}
const styles = StyleSheet.create({
card: {
paddingVertical: 8,
paddingHorizontal: 4,
maxWidth: 260,
minHeight: 60,
},
inner: {
flexDirection: 'row',
alignItems: 'center',
gap: 8,
},
icon: {
margin: 0,
},
textContainer: {
flex: 1,
gap: 2,
},
});
|