Geocode

Forward-geocode an address to a point. This is the real source of the example app’s geocode screen — run it on a device or simulator to see it live.

app/geocode/geocode.tsx

import { Graphic, GraphicsOverlay, Map, MapView, geocoder, type Geometry } from 'expo-arcgis';
import { useState } from 'react';
import { Button } from 'react-native';

import { SampleScreen } from '../../src/SampleScreen';

/** Forward-geocodes an address to a point and marks it (geocoder namespace). */
export default function Geocode() {
  const [location, setLocation] = useState<Geometry | null>(null);
  const [status, setStatus] = useState('Tap “Find Los Angeles”.');

  async function find() {
    const [result] = await geocoder.geocode('Los Angeles, CA');
    if (result?.location) {
      setLocation(result.location);
      setStatus(`${result.label} (score ${Math.round(result.score)})`);
    } else setStatus('No result');
  }

  return (
    <SampleScreen status={status} controls={<Button title="Find Los Angeles" onPress={find} />}>
      <Map basemap="arcGISNavigation" initialViewpoint={{ latitude: 34.05, longitude: -118.24, scale: 3_000_000 }}>
        <GraphicsOverlay>
          {location && (
            <Graphic
              geometry={location}
              symbol={{ type: 'simple-marker', style: 'diamond', color: '#5856d6', size: 16 }}
            />
          )}
        </GraphicsOverlay>
        <MapView style={{ flex: 1 }} />
      </Map>
    </SampleScreen>
  );
}