E2 with React Native

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

Documentation navigation

Start with E2

SDK guides

CLI guides

MCP guides

Applications

Framework quickstarts

How E2 fits

The universal @embed-earth/sdk-test 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 @embed-earth/sdk-test react-native-maps

Search

App.tsx

import { useEffect, useState } from "react";
import MapView, { Marker } from "react-native-maps";
import { E2 } from "@embed-earth/sdk-test";

const e2 = new E2();

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 @embed-earth/sdk-test/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 developer interfaces