Skip to main content

Troubleshooting

Common issues and their fixes when working with Barikoi Maps in React Native.

Map shows a blank white screen​

Cause: The map style URL could not be loaded — typically a missing or invalid API key.

Fix:

  1. Check that extra.barikoiApiKey is set in your app.json
  2. Verify the key is valid at developer.barikoi.com → Dashboard → Account → API Key
  3. Check the console for HTTP 403 errors from map.barikoi.com
  4. Make sure you passed mapStyle={styleJson} (not mapStyle="url") to MapView — the useBarikoiMapStyle hook fetches and returns the full JSON object

Build fails after adding @maplibre/maplibre-react-native​

Cause: The native module was not linked. This happens when you install the package but don't rebuild the native project.

Fix:

npx expo prebuild --clean
npx expo run:android   # or: npx expo run:ios
warning

npx expo start alone is not enough after adding or changing native modules. You must create a new native build.

"Native module not found" error in Expo Go​

Cause: @maplibre/maplibre-react-native uses native code that Expo Go does not support.

Fix: Use a development build instead of Expo Go:

npm install expo-dev-client
# Add "expo-dev-client" to your plugins array in app.json
npx expo run:android   # or: npx expo run:ios

Location permission denied on Android​

Cause: The expo-location config plugin was not registered, so the ACCESS_FINE_LOCATION permission was not added to AndroidManifest.xml.

Fix: Add expo-location to the plugins array in app.json:

{
  "expo": {
    "plugins": [
      "expo-location",
      "@maplibre/maplibre-react-native"
    ]
  }
}

Then rebuild: npx expo prebuild --clean && npx expo run:android

Style JSON fetch returns 403 Forbidden​

Cause: The API key is invalid, expired, or does not have access to the map tiles API.

Fix:

  1. Verify the key at developer.barikoi.com
  2. Check that the key is for the correct environment (production vs. development)
  3. Ensure the key is being read correctly from Constants.expoConfig?.extra?.barikoiApiKey

Polygon renders but appears as a triangle or line​

Cause: The polygon ring is not closed — the first and last coordinates do not match.

Fix: Ensure the last coordinate equals the first:

coordinates: [
  [90.364, 23.823],
  [90.369, 23.825],
  [90.367, 23.820],
  [90.364, 23.823],  // must equal the first point
]

Or use createCirclePolygon() from mapUtils.ts which automatically closes the ring.

Markers flicker or disappear when zooming​

Cause: MarkerView re-renders its React view on every frame change, causing performance issues with many markers.

Fix:

  • For fewer than 50 markers, wrap the marker content in React.memo
  • For 50+ markers, switch from MarkerView to ShapeSource with a SymbolLayer which renders markers as map tiles

App crashes on launch after changing app.json plugins​

Cause: The native build is stale — app.json plugin changes require a full rebuild, but the cached build doesn't include the new native code.

Fix:

# Remove the generated native projects
rm -rf android ios

# Regenerate with the new plugins
npx expo prebuild

# Rebuild
npx expo run:android   # or: npx expo run:ios

API requests return empty results​

Cause: The search query might not match any places, or the coordinates might be outside Bangladesh.

Fix:

  1. Test the API directly in a browser: https://barikoi.xyz/v2/api/search/autocomplete/place?api_key=YOUR_KEY&q=dhaka
  2. Verify coordinates are in [longitude, latitude] order (not [lat, lng])
  3. Use isWithinBangladeshBounds([lng, lat]) to validate coordinates before making API calls