Address Autocomplete

An address picker with an animated suggestion-to-form transition and configurable suggestions, copy, fonts, and accent color.

Why this one

Most autocomplete menus stop at filling a text field. This one connects the selection to a coordinated City/State/ZIP cascade and a panning map, a landing pin, a ground ripple, and a route estimate. The flying street text and street-following route make the result tangible.

How it works

1. Match local suggestions by stable IDs. New rows resolve from blur with 40 ms staggering. Rows stay mounted through selection.
2. Selecting a row starts one UI-thread progress value directly in the press handler, before committing the address. No React state updates happen per frame.
3. The existing chosen row travels into the search field during the first 400 ms, while its icon and subtitle fade and the list folds away. A shared easing curve drives the flight and fold; only the list surface is clipped. The inner surface keeps its full height behind the folding rounded viewport, and the icon canvas uses the same theme background to avoid a dark flash during compositing. The input crossfades at the landing position. The keyboard dismisses after the sequence finishes, so keyboard resizing cannot interrupt the flight.
4. City starts at 220 ms, State at 430 ms, and ZIP at 520 ms. Each character reveals 18 ms after the previous one; Lucide checks draw after each field completes.
5. The map pans and zooms, the pin lands with a small bounce, and the route trims along orthogonal streets. The sequence settles at 950 ms.
6. Submit validates the five-digit ZIP and two-letter state. An invalid ZIP shakes three times by 4 pt and shows an inline error.

The demo types 128 Al at 90 ms per character, selects at 1.37 s, and restarts every 4.8 s. Any touch or keyboard edit cancels its pending timers.

Install

npx expo install @shopify/react-native-skia@2.14.0 react-native-reanimated@4.7.1 react-native-worklets@0.13.0

Use your Expo SDK's compatible versions when integrating. For web, initialize CanvasKit before importing the component, using Skia's WithSkiaWeb lazy-loading boundary. The host must load any custom font families it supplies. The demo loads Geist SemiBold independently and uses the catalog's existing fonts.

Usage

import AddressAutocomplete from './address-autocomplete';

export default function DeliveryScreen() {
  return <AddressAutocomplete onDeliver={(address) => saveAddress(address)} />;
}

Custom content and appearance:

const picker = useRef<AddressAutocompleteRef>(null);

<AddressAutocomplete
  ref={picker}
  colorScheme="auto"
  accentColor="#EA580C"
  fontFamily="YourRegularFont"
  semiboldFontFamily="YourSemiboldFont"
  titleFontFamily="YourEditorialFont"
  selectionDuration={1000}
  suggestions={addresses}
  onSelect={(address) => previewAddress(address)}
  onDeliver={(address) => saveAddress(address)}
/>

Props

Ref methods: type(query), select(id?), and reset(). The first matching suggestion is selected when no ID is supplied. A new query interrupts the current sequence. Map points are normalized; the demo's points sit on its street grid. The illustration is not geocoding, live routing, or a real delivery estimate. Connect your own address service and submission handler for production.

Compatibility

Built for Expo SDK 58, React Native 0.88.0, Reanimated 4.7.1, and Skia 2.14.0. Supports Expo Go with its bundled native modules. Web requires initialized CanvasKit. Supports iOS, Android, and web.

Accessibility

Search and editable fields have labels; suggestions and submit use button roles and at least 44 pt touch targets. Address selection, validation, and confirmation have screen-reader announcements or polite live regions. All actions work by touch and keyboard input; no drag-only behavior. Reduced motion removes the flight, pin drop, ripple, blur entrance, and camera movement, and uses a 200 ms fade with immediate field text. A keyboard-aware scroll container keeps fields available on smaller screens and at larger text sizes.

Design review

The map occupies 8.5–35.5% of the container height. The brand stays at the upper left; the upper-right viewer-close area contains no controls or important text. City, State, and ZIP share a row so the selected form fits compact phones without adding a third field row. Suggestions expand the scroll content instead of covering the form. Layout was reviewed in code for 390×844 and 320×694. Light and dark appearances are available through props. The warm material uses two-layer shadows and a blurred route glow rather than any opaque overlay effect.

Icons: Lucide (ISC). Demo brand: Ember & Oat from the supplied brand kit.