Unable to get the BlueDot to work on v6

Mappedin SDK for React Native
1

Trying to get the BlueDot to work within a React native app (have gotten it to work on React Web, without any issues). Below is the simple implementation, based on documentation and one of the predefined map. Attached is the error I get. Any help is much appreciated, feeling stuck. I have installed @mappedin**/blue-dot.**

import React, { useEffect, useCallback } from ‘react’;
import { View, Text, TouchableOpacity } from ‘react-native’;
import { MapView, useMap } from ‘@mappedin/react-native-sdk’;
import { useBlueDot, useBlueDotEvent } from ‘@mappedin/blue-dot/rn’;

export default function App() {

return (
<MapView mapData={{
key: “mik_yeBk0Vf0nNJtpesfu560e07e5”,
secret: “mis_2g9ST8ZcSFb5R9fPnsvYhrX3RyRwPtDGbMGweCYKEq385431022”,
mapId: “64ef49e662fd90fe020bee61”,
}}>
);
}

function BlueDotDisplay() {
// All methods are async and return Promises
const {
isReady,
isEnabled,
state,
position,
floor,
following,
accuracy,
heading,
enable,
disable,
update,
follow,
unfollow
} = 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 (

Is Ready: {isReady ? ‘Yes’ : ‘No’}
Is Enabled: {isEnabled ? ‘Yes’ : ‘No’}
State: {state}
Following: {following ? ‘Yes’ : ‘No’}
{position && (
Position: {position.latitude.toFixed(4)}, {position.longitude.toFixed(4)}
)}
{accuracy && Accuracy: {accuracy.toFixed(1)}m}
{heading && Heading: {heading.toFixed(0)}}
Update Position & Follow
);
}

Screenshot 2025-10-15 at 8.37.56 AM
Screenshot 2025-10-15 at 8.37.56 AM1196×2168 668 KB

2

Thank you for the detailed report. I’m able to reproduce this behaviour and am investigating it with our development team.

3

Thanks for the quick response, looking forward to the resolution.

4

We have just released updates to resolve this issue. To fix, please upgrade to:

"@mappedin/blue-dot": "6.0.1-beta.58",
"@mappedin/mappedin-js": "^6.1.1",
"@mappedin/react-native-sdk": "^6.1.1",

Let me know if you run into any issues.

5

I confirm that the above changes fix the issue I was facing. Many thanks for the quick turnaround.

If possible, I request the documentation to be updated as well

The below references don’t seem to be relevant to the new way of accessing BlueDot.

// Create a new BlueDot instance with the MapView
const blueDot = new BlueDot(mapView);

Also, the sample code at the below link does not work as useMapData is not available anymore.

https://www.npmjs.com/package/@mappedin/blue-dot

Thanks,

Ramakant

6

Good catch, I’ll get that updated.

1 Like