EDK with React Native

React Native runs the browser-safe EDK SDK unchanged. Search feeds markers, routes draw as polylines, and compute fills your UI.

Documentation navigation

How EDK fits

The universal @edk/sdk import uses an HTTP backend that works in React Native, so the same client code as the web runs on device. Pair it with react-native-maps for rendering.

Setup

terminal

npm install @edk/sdk react-native-maps

Search

App.tsx

import { useEffect, useState } from "react";
import MapView, { Marker } from "react-native-maps";
import { EDK } from "@edk/sdk";

const e2 = new EDK();

export default function App() {
  const [markers, setMarkers] = useState([]);

  useEffect(() => {
    (async () => {
      const places = await e2.search({
        feature: "restaurant",
        area: "Manhattan",
        mode: "auto",
        limit: 500,
      });
      setMarkers(places.features);
    })();
  }, []);

  return (
    <MapView style={{ flex: 1 }} initialRegion={{ latitude: 40.74, longitude: -73.99, latitudeDelta: 0.1, longitudeDelta: 0.1 }}>
      {markers.map((f) => (
        <Marker
          key={f.properties?.id}
          coordinate={{ latitude: f.geometry.coordinates[1], longitude: f.geometry.coordinates[0] }}
          title={f.properties?.name ?? "Restaurant"}
        />
      ))}
    </MapView>
  );
}

Routing

Routing.tsx

import { Polyline } from "react-native-maps";

const [coords, setCoords] = useState([]);

useEffect(() => {
  (async () => {
    const route = await e2.route.route({
      locations: [
        { lat: 40.74, lon: -73.99 },
        { lat: 40.71, lon: -74.01 },
      ],
      mode: "walking",
    });

    setCoords(
      route.geometry.coordinates.map(([lng, lat]) => ({ latitude: lat, longitude: lng })),
    );
  })();
}, []);

return <Polyline coordinates={coords} strokeWidth={4} strokeColor="#e2b07a" />;

Compute

Stats.tsx

const [summary, setSummary] = useState("");

useEffect(() => {
  (async () => {
    const count = await e2.compute.feature("restaurant")
      .region("Manhattan")
      .near("park", 500)
      .count();

    setSummary(`${count} restaurants within 500 m of a park`);
  })();
}, []);

return <Text style={{ padding: 12 }}>{summary}</Text>;

Notes

Filesystem helpers from @edk/sdk/node do not run on device — use the default HTTP-backed import. Query from effects rather than render, and cap limit to keep marker lists smooth on low-end devices.

All documentation