react-native-bus-tracking-map-pro

🚌 Production-ready React Native map — bus tracking, live WebSocket, My Location button, dark/satellite mode, multi-bus, road routing, and more.

📖 Full documentation → (all props, styling, types, recipes, troubleshooting)

Install

npm install react-native-bus-tracking-map-pro react-native-webview
cd ios && pod install   # iOS only

Quick Examples

1️⃣ Only Map (no route, no bus)

import { BusTrackingMap } from 'react-native-bus-tracking-map-pro';

<BusTrackingMap mode="static" />

2️⃣ Route Only (no live bus)

import { BusTrackingMap } from 'react-native-bus-tracking-map-pro';

<BusTrackingMap route={ROUTE} mode="route" />

3️⃣ Static Bus (manual position)

import { BusTrackingMap } from 'react-native-bus-tracking-map-pro';
<BusTrackingMap
  route={ROUTE}
  buses={[{ id: 'bus1', lat: 28.61, lng: 77.37, label: 'Bus A' }]}
/>

4️⃣ Live Tracking (WebSocket — optional)

import { BusTrackingMap } from 'react-native-bus-tracking-map-pro';
<BusTrackingMap
  route={ROUTE}
  wsUrl="ws://your-server.com:3000"
  showTrail
  showStatusBadge
/>

5️⃣ Path Only (just the road line, no pins)

<BusTrackingMap route={ROUTE} showStops={false} showStartEnd={false} />

6️⃣ Stops Only (pins in between, no road line)

<BusTrackingMap route={ROUTE} showRoute={false} showStops={true} showStartEnd={false} />

7️⃣ Path + Stops together

<BusTrackingMap route={ROUTE} showRoute showStops showStartEnd />

8️⃣ Custom Markers (your shop, house, or any POI at any coordinate)

<BusTrackingMap
  markers={[
    { id: 'shop1', lat: 28.615, lng: 77.208, icon: '🏪', label: 'My Shop' },
    { id: 'house1', lat: 28.612, lng: 77.211, icon: '🏠', label: 'My House', color: '#00897B' },
  ]}
  onMarkerPress={(marker) => console.log('Tapped:', marker.label)}
/>

9️⃣ Dark / Satellite Mode

<BusTrackingMap route={ROUTE} theme="dark" />
<BusTrackingMap route={ROUTE} theme="satellite" />

WebSocket Message Formats

Server se koi bhi format bhejo — sab supported hai:

// Multi-bus
{ "buses": [{ "id": "bus1", "lat": 28.61, "lng": 77.37 }] }

// Array directly
[{ "id": "bus1", "lat": 28.61, "lng": 77.37 }]

// Single bus (id optional, default 'bus1')
{ "id": "bus1", "lat": 28.61, "lng": 77.37 }

All Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | route | Route | — | Start, stops[], end | | mode | 'tracking' \| 'route' \| 'static' | auto | Map mode | | buses | Bus[] | [] | Static bus positions | | markers | CustomMarker[] | [] | Custom POI pins — shop, house, landmark, anything at any coordinate | | wsUrl | string | — | WebSocket URL (optional, only for live) | | autoReconnect | boolean | true | Auto reconnect WS | | followBusId | string | — | Pan map to this bus | | theme | 'light' \| 'dark' \| 'satellite' \| 'terrain' | 'light' | Map style | | zoom | number | auto-fit | Fixed zoom level. If omitted, the map auto-fits to show the whole route | | center | {lat, lng} | route.start | Override map center | | showRoute | boolean | true | OSRM road line | | showTrail | boolean | true | Bus path trail | | trailMaxPoints | number | 100 | Max trail history points | | showStops | boolean | true | Stop markers | | showStartEnd | boolean | true | Start/End markers | | startStyle | MarkerLabelStyle | green pill | Custom color/icon/font/border for the Start pill — details | | endStyle | MarkerLabelStyle | red pill | Custom color/icon/font/border for the End pill | | stopStyle | StopMarkerStyle | orange dot | Custom color/icon/size for stop markers, or show stop names as pills | | showMyLocationButton | boolean | true | 📍 My Location button | | showZoomControls | boolean | true | +/- zoom buttons | | showStatusBadge | boolean | auto | WS live status badge | | showScaleBar | boolean | false | Scale bar | | showSpeed | boolean | false | Bus speed in popup | | onBusPress | (bus) => void | — | Bus tap event | | onStopPress | (stop) => void | — | Stop tap event | | onMarkerPress | (marker) => void | — | Custom marker tap event | | onMapPress | (latlng) => void | — | Map tap event | | onMyLocation | (latlng) => void | — | My location result | | onWsConnect | () => void | — | WS connected | | onWsDisconnect | () => void | — | WS disconnected | | style | ViewStyle | — | Container style | | height | number | — | Fixed height (px) |

Types

type Route = {
  start: Location;
  stops?: Location[];
  end: Location;
};

type Location = {
  lat: number;
  lng: number;
  name?: string;
};

type Bus = {
  id: string;
  lat: number;
  lng: number;
  label?: string;     // shown below icon
  color?: string;     // trail color e.g. '#9C27B0'
  heading?: number;   // 0-360
  speed?: number;     // km/h
};

type CustomMarker = {
  id: string;
  lat: number;
  lng: number;
  icon?: IconSource; // emoji/text ('🏪'), an http(s)/data: image URL, or require('./x.png')
  label?: string;   // caption chip under the pin
  color?: string;   // background color for emoji/text pins
  popup?: string;   // tap popup text
  size?: number;    // pin diameter in px, default 32
  data?: any;       // arbitrary payload echoed back in onMarkerPress
};

// string (emoji/URL), number (require('./x.png')), or { uri }. Local require()
// assets resolve reliably on iOS; prefer a URL/data: URI for Android release builds.
type IconSource = string | number | { uri: string };

// Full styling for Start/End pills and stop markers — see startStyle/endStyle/stopStyle above.
// textColor is optional: auto-computed for contrast against backgroundColor when omitted.
type MarkerLabelStyle = {
  backgroundColor?: string;
  textColor?: string;
  icon?: IconSource;
  fontSize?: number;
  fontWeight?: string | number;
  borderRadius?: number;
  borderColor?: string;
  borderWidth?: number;
  paddingVertical?: number;
  paddingHorizontal?: number;
  shadow?: boolean;
};

type StopMarkerStyle = MarkerLabelStyle & {
  size?: number;            // dot diameter, default 14
  dotBorderColor?: string;
  showLabel?: boolean;      // show stop name as a pill instead of a plain dot
};

See DOCUMENTATION.md for full styling examples (custom colors, emoji icons, image icons).

Peer Dependencies

react >= 17
react-native >= 0.68
react-native-webview >= 11

License

MIT

react-native-bus-tracking-map-pro