expo-osm-sdk
Version:
OpenStreetMap component for React Native with Expo
109 lines • 3.77 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.LocationButton = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const react_native_1 = require("react-native");
/**
* LocationButton - A clean button to get user's current location
*
* @example
* <LocationButton
* getCurrentLocation={async () => {
* const loc = await mapRef.current?.getCurrentLocation();
* return loc;
* }}
* onLocationFound={(location) => {
* mapRef.current?.animateToLocation(
* location.latitude,
* location.longitude,
* 15
* );
* }}
* />
*/
const LocationButton = ({ onLocationFound, onLocationError, style, size = 44, color = '#9C1AFF', getCurrentLocation, }) => {
const [isLoading, setIsLoading] = (0, react_1.useState)(false);
const handlePress = async () => {
if (!getCurrentLocation) {
console.warn('LocationButton: getCurrentLocation prop is required');
onLocationError?.('Location function not provided');
return;
}
setIsLoading(true);
try {
const location = await getCurrentLocation();
onLocationFound?.(location);
}
catch (error) {
console.error('LocationButton: Failed to get location', error);
onLocationError?.(error instanceof Error ? error.message : 'Failed to get location');
}
finally {
setIsLoading(false);
}
};
return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { onPress: handlePress, disabled: isLoading, style: [
styles.button,
{
width: size,
height: size,
borderRadius: size / 2,
backgroundColor: '#FFFFFF',
},
style,
], activeOpacity: 0.7, children: isLoading ? ((0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: color })) : ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.iconContainer, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.outerCircle, { borderColor: color }] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.innerDot, { backgroundColor: color }] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.lineVertical, { backgroundColor: color }] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.lineHorizontal, { backgroundColor: color }] })] })) }));
};
exports.LocationButton = LocationButton;
const styles = react_native_1.StyleSheet.create({
button: {
justifyContent: 'center',
alignItems: 'center',
borderWidth: 1,
borderColor: '#DDDDDD',
...react_native_1.Platform.select({
ios: {
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.15,
shadowRadius: 3,
},
android: {
elevation: 4,
},
}),
},
iconContainer: {
width: 24,
height: 24,
justifyContent: 'center',
alignItems: 'center',
position: 'relative',
},
outerCircle: {
position: 'absolute',
width: 18,
height: 18,
borderRadius: 9,
borderWidth: 2,
},
innerDot: {
position: 'absolute',
width: 6,
height: 6,
borderRadius: 3,
},
lineVertical: {
position: 'absolute',
width: 2,
height: 24,
top: 0,
},
lineHorizontal: {
position: 'absolute',
height: 2,
width: 24,
left: 0,
},
});
//# sourceMappingURL=LocationButton.js.map