Theme

de.sdk-rn API Reference ​

Complete API reference for React Native SDK components and classes.

SDK Structure

de.sdk-rn provides:

  • MSI - React component (WebView wrapper)
  • Auth - Authentication class
  • DClient - Order, Event, Client classes
  • Utils - Stream and utility functions
  • IoTClient - IoT client (optional)

All APIs accessed via Controls and Handles through MSI component.

MSI Component ​

The main map component that renders de.eui in a WebView.

Props ​

typescript
interface MSIProps {
  // Required
  getAccessToken: () => string    // Function returning current access token
  
  // Optional
  env?: 'dev' | 'prod'           // Environment (default: 'dev')
  version?: number                // API version (default: 1)
  
  // Callbacks
  onReady?: () => void           // Called when WebView is ready
  onLoaded?: (msi: MSIInterface) => void  // Called with controls & handles
  onError?: (error: Error) => void  // Called on errors
}

Ref Methods ​

typescript
interface MSIRef {
  controls: Controls              // Controls API
  handles: Handles                // Handles API  
  plugins: Plugins                // Plugins API
  isReady: () => boolean         // Check if MSI is ready
  retry: () => void              // Retry connection
}

Usage ​

typescript
import { MSI, Auth, type MSIRef, type MSIInterface } from '@de./sdk-rn'

const auth = new Auth(credentials, { env: 'prod', autorefresh: true })

function App() {
  const msiRef = useRef<MSIRef>(null)
  
  const handleLoaded = ({ controls, handles }: MSIInterface) => {
    // Use controls and handles here
  }
  
  return (
    <MSI
      ref={msiRef}
      env="prod"
      getAccessToken={() => auth.accessToken || ''}
      onLoaded={handleLoaded}
      onError={(error) => console.error(error)}
    />
  )
}

Controls API ​

Promise-based direct control methods.

Location Methods ​

typescript
// Get current location
getCurrentLocation(): Promise<RTLocation | null>

// Pin current location on map
pinCurrentLocation(): Promise<Coordinates | null>

// Track live location
trackLiveLocation(): Promise<void>
stopLiveLocation(): Promise<void>

// Set tracking options
setLiveLocationOptions(options: UserLocationOptions): Promise<void>

Map Methods ​

typescript
// Set map style
setMapStyle(style: MapLayerStyle): Promise<void>
// Styles: 'streets' | 'outdoors' | 'light' | 'dark' | 'satellite'

// Enable drag-pick mode
enableDragPickLocation(origin?: Coordinates): Promise<void>
disableDragPickLocation(): Promise<void>

// Update drag-pick content
setDragPickContent(type: DragPickContentType, content: DragPickContent): Promise<void>

Route Methods ​

typescript
// Set complete route
setRoute(journey: Journey): Promise<void>

// Set route components
setRouteOrigin(routeId: string | number, waypoint: MapWaypoint): Promise<void>
setRouteDestination(routeId: string | number, waypoint: MapWaypoint): Promise<void>

// Add/update/remove waypoints
addRouteWaypoint(routeId: string | number, waypoint: MapWaypoint): Promise<void>
updateRouteWaypoint(routeId: string | number, index: number, waypoint: MapWaypoint): Promise<void>
removeRouteWaypoint(routeId: string | number, index: number): Promise<void>

// Fit routes in view
fitRoutesBounds(options?: RoutesFitBoundsOptions): Promise<void>

// Clear route
clearRoute(routeId: string | number): Promise<void>

Search Methods ​

typescript
// Search for places
searchQuery(query: string, location?: Coordinates): Promise<SearchPlaceSuggestion[]>

// Select search result
searchSelect(index: number): Promise<SearchPlace>

// Geocoding
resolvePlace(address: string): Promise<Coordinates | null>
resolveCoordinates(coordinates: string | Coordinates): Promise<SearchPlace | null>

Entity Methods ​

typescript
// Add nearby entity
addNearbyEntity(entity: Entity): Promise<void>

// Update entity position
moveNearbyEntity(update: ActivePosition): Promise<void>

// Remove entity
removeNearbyEntity(id: string): Promise<void>

// Clear all entities
removeNearby(): Promise<void>

Event Listeners ​

typescript
// Listen to events
on(event: string, listener: Function): void

// Remove listeners
off(event: string, listener: Function): void
removeListeners(listener: Function): void

Available Events:

  • route - Route created/updated
  • pick:location - User picked location
  • current:location - Location updated

Handles API ​

Stream-based high-level workflows.

myLocation() ​

Track user's current location continuously.

typescript
myLocation(usertype?: 'client' | 'agent'): Stream | void

// Returns readable stream with location data
const stream = handles.myLocation('client')

stream
  .on('data', (location: RTLocation) => {
    console.log('Location:', location)
  })
  .onerror((error) => console.error(error))
  .onclose(() => console.log('Stream closed'))

peerLocation() ​

Track peer (driver/agent) location.

typescript
peerLocation(position: RTLocation, caption?: Caption): Stream | void

// Create stream and pipe updates
const peerStream = handles.peerLocation(initialPosition, {
  label: 'Driver',
  duration: 5,
  unit: 'min'
})

const liveStream = new Utils.Stream()

liveStream.sync({
  position: newPosition,
  caption: { duration: 3, unit: 'min' }
})

liveStream.pipe(peerStream)

nearby() ​

Manage nearby entities (fleet).

typescript
nearby(entities: Entity[]): LRStreamer | void

// Returns Live Readable Streamer with controls
const nearbyStream = handles.nearby(vehicleList)

nearbyStream
  .live(async (controls) => {
    // Add entity
    await controls.add(newEntity)
    
    // Move entity
    await controls.move({ id: 'v1', position: newPos })
    
    // Remove entity
    await controls.remove('v2')
    
    // Focus entity
    await controls.focus('v1')
  })
  .close(() => console.log('Closed'))

Turn-by-turn navigation stream.

typescript
navigation(journey: Journey): Promise<Stream | void>

const navStream = await handles.navigation({
  routeId: 'route-1',
  origin: { coords: originCoords },
  destination: { coords: destCoords },
  options: { profile: 'driving-traffic' }
})

const liveStream = new Utils.Stream()

liveStream.sync({
  position: currentPosition
})

liveStream.pipe(navStream)

Helper Methods ​

typescript
// Quick pickup point
pickupPoint(coords: Coordinates, caption?: Caption): void

// Quick dropoff point  
dropoffPoint(coords: Coordinates, caption?: Caption): void

// Listen to location picks
onPickLocation(fn: (location: PickedLocation) => void): void

Utils.Stream ​

Bidirectional stream for data flow.

typescript
class Stream {
  // Push data to stream
  sync(data: any): void
  
  // Listen to data
  on(event: 'data', listener: (data: any) => void): Stream
  
  // Handle errors
  onerror(listener: (error: Error) => void): Stream
  
  // Handle close
  onclose(listener: () => void): Stream
  
  // Emit error
  error(error: Error): void
  
  // Close stream
  close(): void
  
  // Pipe to another stream
  pipe(target: Stream): Stream
}

Usage Example ​

typescript
import { Utils } from '@de./sdk-rn'

const stream = new Utils.Stream()

// Listen to data
stream.on('data', (data) => {
  console.log('Received:', data)
})

// Push data
stream.sync({ value: 123 })

// Pipe to another stream
const targetStream = handles.peerLocation(position)
stream.pipe(targetStream)

// Close when done
stream.close()

Auth Class ​

Authentication and token management.

typescript
class Auth {
  accessToken?: string  // Current access token
  
  constructor(
    credentials: AuthCredentials,
    options?: AuthOptions
  )
  
  // Get new access token
  getToken(): Promise<string>
  
  // Rotate token manually
  rotateToken(): Promise<string>
  
  // Stop auto-refresh
  stopAutoRefresh(): void
}

Credentials ​

typescript
interface AuthCredentials {
  context: string          // Context reference
  cid: string             // Connector ID
  secret: string          // Connector secret
  remoteOrigin: string    // Origin URL
}

Options ​

typescript
interface AuthOptions {
  env?: 'dev' | 'prod'                    // Environment
  version?: number                         // API version
  autorefresh?: boolean                    // Auto-refresh tokens
  onNewToken?: (token: string) => void    // New token callback
}

Usage ​

typescript
import { Auth } from '@de./sdk-rn'

const auth = new Auth({
  context: 'your-context',
  cid: 'connector-id',
  secret: 'connector-secret',
  remoteOrigin: 'https://your-app.com'
}, {
  env: 'prod',
  autorefresh: true,
  onNewToken: (token) => {
    console.log('New token:', token)
  }
})

// Get token
const token = await auth.getToken()

// Use with MSI
<MSI getAccessToken={() => auth.accessToken || ''} />

// Stop refresh when done
auth.stopAutoRefresh()

DClient ​

Order and event management.

DClient.Order ​

typescript
class Order {
  constructor(access: AccessOptions)
  
  // Intent tokens
  intent(clientId: string): Promise<string>
  unintent(token: string): Promise<boolean>
  
  // Waypoints
  addWaypoint(waypoints: Waypoint | Waypoint[], token?: string): Promise<Waypoint[]>
  updateWaypoint(no: number, updates: WaypointOptions, token?: string): Promise<Waypoint>
  removeWaypoint(no: number, token?: string): Promise<boolean>
  
  // Packages
  addPackage(package: Package, token?: string): Promise<Package>
  updatePackage(waypointNo: number, updates: PackageOptions, token?: string): Promise<Package>
  
  // Service
  setService(service: OrderServiceOptions, token?: string): Promise<OrderService>
  
  // Operators
  assignOperator(operatorId: string, token?: string): Promise<boolean>
  getOperators(token?: string): Promise<OrderOperators>
  
  // Stage
  updateStage(stage: string, token?: string): Promise<OrderStage>
  
  // Routing
  getCurrentRoute(token?: string): Promise<any>
}

DClient.Event ​

typescript
class Event {
  constructor(access: AccessOptions)
  
  subscribe(channel: string, id: string, fn: (data: any) => void): void
  unsubscribe(channel: string, id: string): void
}

DClient.Client ​

typescript
class Client {
  constructor(access: AccessOptions)
  
  // Client operations
  create(data: any): Promise<any>
  update(clientId: string, updates: any): Promise<any>
  get(clientId: string): Promise<any>
}

IoTClient ​

IoT device communication (optional).

typescript
class IoTClient {
  constructor(options: IoTClientOptions)
  
  connect(): Promise<void>
  disconnect(): void
  
  publish(topic: string, message: any): void
  subscribe(topic: string, handler: (message: any) => void): void
  
  on(event: string, handler: Function): void
}

Type Definitions ​

typescript
// Location types
type Coordinates = { lng: number, lat: number }
type RTLocation = Coordinates & { heading?: number }

// Journey
type Journey = {
  routeId: string | number
  origin?: MapWaypoint
  destination?: MapWaypoint
  waypoints?: MapWaypoint[]
  options?: RouteOptions
}

// Map waypoint
type MapWaypoint = {
  index?: number
  coords: Coordinates
  caption?: Caption
}

// Caption
type Caption = {
  duration?: number
  unit?: string
  label?: string
}

// Entity
type Entity = {
  id: string
  type: EntityType
  status: 'ACTIVE' | 'BUSY'
  grade: '1H' | '2H' | '3H'
  currentLocation: RTLocation
  static?: boolean
}

// Route options
type RouteOptions = {
  id?: string | number
  mode?: 'default' | 'navigation'
  profile?: 'driving-traffic' | 'driving' | 'cycling' | 'walking'
  animation?: AnimatedRouteOptions
  pointless?: boolean
}

Next Steps ​

Getting StartedExamplesBuild First App