@mappedin/react-native-sdk 6.0.0-alpha.11 → 6.0.0-alpha.12

package/README.md

@@ -1,17 +1,22 @@
 # @mappedin/react-native-sdk
 
-A React Native SDK for integrating Mappedin's indoor mapping and navigation capabilities into React Native applications. This SDK provides a native wrapper around Mappedin's web-based mapping technology using WebView for cross-platform compatibility.
+Mappedin SDK for React Native SDK enables integration of Mappedin's indoor mapping and navigation capabilities into React Native applications. This SDK provides a native wrapper around Mappedin's web-based mapping technology using WebView for cross-platform compatibility.
 
 ## ✨ Features
 
-- 📱 **Cross-Platform Excellence** - Write once, deploy everywhere with confidence
+- 📱 **Cross-Platform** - Write once, deploy everywhere with confidence
 - 🎯 **Interactive Indoor Maps** - Smooth zoom, pan, and rotation controls that feel natural
 - 🧭 **Smart Navigation & Wayfinding** - Clear turn-by-turn directions your users will love
 - 📍 **Points of Interest** - Beautifully showcase venue locations and amenities
-- 🔄 **Real-time Updates** - Keep your maps fresh with live location tracking
-- 🌐 **WebView-Powered** - Built on proven, reliable web technology
 - ⚡ **Event-Driven** - Comprehensive event system for seamless interactions
 
+## 🆘 Support & Resources
+
+- 👨‍💻 [Mappedin Developer Portal](https://developer.mappedin.com/)
+- 📖 [Mappedin SDK for React Native Guides](https://developer.mappedin.com/react-native-sdk/getting-started)
+- 📋 [API Documentation](https://docs.mappedin.com/react-native-sdk-api/v6/latest/)
+- 💬 [Community Forum](https://community.mappedin.com/)
+
 ## 📦 Installation
 
 ```bash
@@ -44,59 +49,61 @@ import { View, StyleSheet } from 'react-native';
 import { MapView, useMap } from '@mappedin/react-native-sdk';
 
 const MapSetup = () => {
-  const { mapData, mapView } = useMap();
-
-  useEffect(() => {
-    if (mapData && mapView) {
-      console.log('Map is ready!');
-
-      async function initializeMap() {
-        // Display all venue labels
-        mapView.Labels.all();
-
-        // Expand stacked maps with automatic spacing
-        await mapView.StackedMaps.expand({
-          distanceBetweenFloors: 'auto'
-        });
-
-        // Optional: Create a smooth tour through all spaces
-        for (const space of mapData.getByType('space')) {
-          await mapView.Camera.focusOn(space, {
-            duration: 1000,
-            easing: 'ease-in-out',
-          });
-        }
-      }
-
-      initializeMap();
-    }
-  }, [mapData, mapView]);
-
-  return null;
+	const { mapData, mapView } = useMap();
+
+	useEffect(() => {
+		if (mapData && mapView) {
+			console.log('Map is ready!');
+
+			async function initializeMap() {
+				// Display all venue labels
+				mapView.Labels.all();
+
+				// Expand stacked maps with automatic spacing
+				await mapView.StackedMaps.expand({
+					distanceBetweenFloors: 'auto',
+				});
+
+				// Optional: Create a smooth tour through all spaces
+				for (const space of mapData.getByType('space')) {
+					await mapView.Camera.focusOn(space, {
+						duration: 1000,
+						easing: 'ease-in-out',
+					});
+				}
+			}
+
+			initializeMap();
+		}
+	}, [mapData, mapView]);
+
+	return null;
 };
 
+// Add your Mappedin key, secret and map ID or use a demo key and map
+// Demo Key & Maps: https://developer.mappedin.com/docs/demo-keys-and-maps
 const App = () => {
-  return (
-    <View style={styles.container}>
-      <MapView
-        options={{}}
-        mapData={{
-          key: 'your-mappedin-key',
-          secret: 'your-mappedin-secret',
-          mapId: 'your-map-id',
-        }}
-      >
-        <MapSetup />
-      </MapView>
-    </View>
-  );
+	return (
+		<View style={styles.container}>
+			<MapView
+				options={{}}
+				mapData={{
+					key: 'your-mappedin-key',
+					secret: 'your-mappedin-secret',
+					mapId: 'your-map-id',
+				}}
+			>
+				<MapSetup />
+			</MapView>
+		</View>
+	);
 };
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#f0f8ff',
-  },
+	container: {
+		flex: 1,
+		backgroundColor: '#f0f8ff',
+	},
 });
 
 export default App;
@@ -109,35 +116,39 @@ import React from 'react';
 import { MapView, useMap } from '@mappedin/react-native-sdk';
 
 const CustomMapComponent = () => {
-  const { mapData, mapView } = useMap();
-
-  const handleSpaceClick = async (space) => {
-    // Focus on clicked space with smooth animation
-    await mapView.Camera.focusOn(space, {
-      duration: 1500,
-      easing: 'ease-out',
-    });
-  };
-
-  return (
-    <MapView
-      style={{ flex: 1 }}
-      mapData={{
-        key: 'mik_your_key_here',
-        secret: 'mis_your_secret_here',
-        mapId: 'your_map_id_here',
-      }}
-      options={{
-        // Custom options go here
-      }}
-    >
-      {/* Your custom map setup logic */}
-    </MapView>
-  );
+	const { mapData, mapView } = useMap();
+
+	const handleSpaceClick = async space => {
+		// Focus on clicked space with smooth animation
+		await mapView.Camera.focusOn(space, {
+			duration: 1500,
+			easing: 'ease-out',
+		});
+	};
+
+	// Add your Mappedin key, secret and map ID or use a demo key and map
+	// Demo Key & Maps: https://developer.mappedin.com/docs/demo-keys-and-maps
+	return (
+		<MapView
+			style={{ flex: 1 }}
+			mapData={{
+				key: 'mik_your_key_here',
+				secret: 'mis_your_secret_here',
+				mapId: 'your_map_id_here',
+			}}
+			options={
+				{
+					// Custom options go here
+				}
+			}
+		>
+			{/* Your custom map setup logic */}
+		</MapView>
+	);
 };
 ```
 
-## 🔧 API Reference
+## 🔧 API Summary
 
 ### Components
 
@@ -146,6 +157,7 @@ const CustomMapComponent = () => {
 The main component that renders your indoor map with powerful mapping capabilities.
 
 **Props:**
+
 - `mapData` - Configuration object containing your Mappedin credentials
 - `options` - Additional map configuration options
 - `style` - ViewStyle for the map container
@@ -156,6 +168,7 @@ The main component that renders your indoor map with powerful mapping capabiliti
 Access map data and view controls from any child component.
 
 **Returns:**
+
 - `mapData` - Venue data and spatial information
 - `mapView` - Map control methods and interactions
 
@@ -171,31 +184,22 @@ mapView.Labels.hide(); // Hide all labels
 
 // Stacked Maps
 await mapView.StackedMaps.expand({
-  distanceBetweenFloors: 'auto' | number
+	distanceBetweenFloors: 'auto' | number,
 });
 ```
 
 ## 📚 Examples
 
 Check out our example app in `apps/rn-example/` for more detailed implementations, including:
+
 - Basic map initialization
 - Custom styling and theming
 - Navigation and routing
 - Event handling
 - Advanced interactions
 
-## 🆘 Support & Resources
-
-- 📖 [Mappedin Developer Portal](https://developer.mappedin.com/)
-- 📋 [API Documentation](https://developer.mappedin.com/react-native/)
-- 💬 [Community Forum](https://community.mappedin.com/)
-- 🐛 [Issue Tracker](https://github.com/mappedin/react-native-sdk/issues)
-
 ## 📄 License
 
 See LICENSE.txt for license information.
 
 ---
-
-*Built with ❤️ by the Mappedin team*
-