vineroute// field manual
Rider
Driver
Dispatch
Systems
The Rider/Driver bio sheet
04 / 08

Driver bio sheet

Who is driving you today

ModalProfileTrust

Overview

A modal `Sheet` that fills 88% of the screen height. The top half is a portrait image with a `LinearGradient` fade into the bottom — name and PRO badge sit on the dark gradient overlay. The bottom half is a soft cream card with three rows of metadata (LANGUAGES, FAVORITE WINERY, YEARS), the driver's bio paragraph in Instrument Serif italic, and a small Unsplash attribution line so we stay on-license with the photographer.

How it works

1

The sheet is a Modal mounted at the screen root. The Today tab passes `driver` as a prop.

2

The portrait image uses expo-image with contentFit cover and cachePolicy memory-disk. The image URL is server-relative (`/assets/<id>.regular.jpg`), resolved via the API base URL on the client.

3

Stat row uses three pressables — TOURS, YEARS, RATING — each rendered as a stacked eyebrow (font-mono uppercase) and value (Instrument Serif). The dividers between are 1px hairlines colored with the design-system `border` token.

4

Bio is two paragraphs maximum, written in first person — 'Eight years driving Sonoma. Knows every back road.' Driver users edit this themselves on the driver You page.

5

The Unsplash attribution row reads 'Photo by NAME on Unsplash' with the name and 'Unsplash' both linking out via `Linking.openURL`. The href contains the UTM parameters required by their license.

Key decisions

Sheet, not a separate route

The driver card is a peek; pushing a full route would feel heavy for a modal-grade interaction. A sheet keeps the rider's place on Today while giving the driver real estate to breathe.

Bio in italic serif, not body sans

Driver bios should read like a column in a magazine. Setting them in Instrument Serif italic puts them in a different voice from the rest of the app's interface copy — they feel written, not labeled.

Attribution is non-negotiable

The Unsplash free license requires attribution on the photo. We bake the photographer name and Unsplash link into the bio sheet rather than tucking it in a settings page. The cost is one extra line of text; the win is honest sourcing and a working API key.

Driver bio sheet

Quick Reference

Routeapps/mobile/components/DriverBioSheet.tsx
StoreProps from parent + Linking
APIsNone — driver record loaded by parent
Components
ModalLinearGradientexpo-imageLinking
PreviousTodayNextStop detail sheet