@mappedin/blue-dot 6.0.1-beta.56 → 6.0.1-beta.58

package/README.md

@@ -46,6 +46,9 @@ blueDot.update({
     // Optional floor or floor ID
 	floorOrFloorId,
 })
+
+// Attach the camera to the BlueDot
+blueDot.follow('position-only');
 ```
 
 ### Options
@@ -115,3 +118,124 @@ export type BlueDotOptions = {
 	debug?: boolean;
 };
 ```
+
+### React Native
+
+```tsx
+import React, { useEffect, useCallback } from 'react';
+import { View, Text, TouchableOpacity } from 'react-native';
+import { MapView, useMapData } from '@mappedin/react-native-sdk';
+import { useBlueDot, useBlueDotEvent } from '@mappedin/blue-dot/rn';
+
+function MyComponent() {
+	const { mapData } = useMapData({
+		key: 'your-api-key',
+		secret: 'your-api-secret',
+		mapId: 'your-map-id',
+	});
+
+	return (
+		<MapView mapData={mapData}>
+			<BlueDotDisplay />
+		</MapView>
+	);
+}
+
+function BlueDotDisplay() {
+	// All methods are async and return Promises
+	const {
+		isReady,
+		isEnabled,
+		state,
+		position,
+		floor,
+		isFollowing,
+		accuracy,
+		heading,
+		enable,
+		disable,
+		update,
+		follow,
+	} = useBlueDot();
+
+	// Listen for position updates
+	useBlueDotEvent(
+		'position-update',
+		useCallback(event => {
+			console.log('Position updated:', event.coordinate, event.floor);
+		}, []),
+	);
+
+	// Listen for state changes
+	useBlueDotEvent(
+		'state-change',
+		useCallback(event => {
+			console.log('State changed:', event.state);
+		}, []),
+	);
+
+	// Listen for follow mode changes
+	useBlueDotEvent(
+		'follow-change',
+		useCallback(event => {
+			console.log('Follow mode:', event.following);
+		}, []),
+	);
+
+	useEffect(() => {
+		if (isReady && !isEnabled) {
+			// All methods are async - use await or .then()
+			enable({
+				radius: 15,
+				color: '#ff0000',
+				watchDevicePosition: false,
+			});
+		}
+	}, [isReady, isEnabled, enable]);
+
+	const handleUpdatePosition = useCallback(async () => {
+		try {
+			// Update position manually
+			await update({
+				latitude: 43.6532,
+				longitude: -79.3832,
+				accuracy: 5,
+				heading: 90,
+				floorOrFloorId: floor,
+			});
+
+			// Enable follow mode
+			await follow('position-and-heading', {
+				zoomLevel: 19,
+			});
+		} catch (error) {
+			console.error('Failed to update position:', error);
+		}
+	}, [update, follow, floor]);
+
+	return (
+		<View>
+			<Text>Is Ready: {isReady ? 'Yes' : 'No'}</Text>
+			<Text>Is Enabled: {isEnabled ? 'Yes' : 'No'}</Text>
+			<Text>State: {state}</Text>
+			<Text>Following: {following ? 'Yes' : 'No'}</Text>
+			{position && (
+				<Text>
+					Position: {position.latitude.toFixed(4)}, {position.longitude.toFixed(4)}
+				</Text>
+			)}
+			{accuracy && <Text>Accuracy: {accuracy.toFixed(1)}m</Text>}
+			{heading && <Text>Heading: {heading.toFixed(0)}°</Text>}
+			<TouchableOpacity onPress={handleUpdatePosition}>
+				<Text>Update Position & Follow</Text>
+			</TouchableOpacity>
+		</View>
+	);
+}
+```
+
+**Key Differences from Vanilla JS:**
+
+- **All methods are async**: `enable()`, `disable()`, `update()`, and `follow()` return Promises
+- **Rich state**: Hook returns `isReady`, `state`, `position`, `floor`, `following`, `accuracy`, `heading` for real-time updates
+- **Separate event hook**: Use `useBlueDotEvent` for listening to position-update, state-change, and follow-change events