Order tracking screen

Installation

$ npx shadcn@latest add @goodui-native-pro/order-tracking-screen

Then run npx expo install --fix so react-native-reanimated, react-native-svg match your Expo SDK. Files land in components/goodui-native/order-tracking-screen.

Pro screens install from the license-gated @goodui-native-pro registry. Setup: Pro access.

• •Wrap the app in GestureHandlerRootView and ThemeProvider.

Usage

// app/orders/[id].tsx
import { Linking } from "react-native";
import { Stack, router, useLocalSearchParams } from "expo-router";
import { OrderTrackingScreen } from "@/components/goodui-native/order-tracking-screen/order-tracking-screen";
import { api, useOrder } from "@/lib/orders";

export default function OrderRoute() {
  const { id } = useLocalSearchParams<{ id: string }>();
  const order = useOrder(id); // live: re-renders as your server pushes status updates
  return (
    <>
      <Stack.Screen options={{ headerShown: false }} />
      <OrderTrackingScreen
        orderNumber={order.number}
        steps={order.steps} // [{ key, title, description, time }]
        currentStep={order.stepIndex} // steps.length when delivered
        eta={new Date(order.eta)}
        courier={order.courier} // { name, avatar, vehicle, rating }
        items={order.items}
        total={order.total}
        currency="EUR"
        onCall={() => Linking.openURL(`tel:${order.courier.phone}`)}
        onMessage={() => router.push(`/orders/${id}/chat`)}
        unreadMessages={order.unread}
        onRateCourier={(stars) => api.rateCourier(id, stars)}
        onHelp={() => router.push(`/help?order=${id}`)}
        onBack={() => router.back()}
      />
    </>
  );
}

When to use

Examples

<OrderTrackingScreen />

<OrderTrackingScreen currentStep={4} onRateCourier={(stars) => api.rate(stars)} />

API reference

Motion and haptics

• •When currentStep moves on, the line under the finished step fills down to the next dot on the smooth spring, the finished dot fills and draws its check, and the new current dot springs in (bouncy) and starts breathing.
• •The minutes left roll down as the estimate counts down (checked every 15 s).
• •Delivered: the success check springs in, draws, and its ring pulses; the rating stars pop as you choose.
• •Reduced motion: lines and dots change at once, no breathing, the check appears complete without drawing, digits change in place.

• •Haptic: tap on call and message (IconButton)
• •Haptic: success when the delivery check lands (SuccessCheck)
• •Haptic: select for each star while rating (Rating)
• •Haptic: tap on Get help (Button)

• •Each step owns two shared values (line fill, dot) and the current one a repeating halo, all on the UI thread.
• •One interval re-renders the screen every 15 s to update the minutes; it stops when the screen unmounts.

Accessibility

• •The header reads 'Order PN-48213' with the item count and total under it.
• •The timeline is a list named 'Order progress'. On native each step is one element read as 'Packed, done, 14:02, At the Chiado store, step 2 of 4'; on the web the visible text is read with the state as visually hidden text.
• •A step change is announced with the new step's title and description; delivery is announced.
• •The minutes left are read as plain text ('12 minutes'); 'Expected by 14:35' is visible text.
• •Call and message are labelled icon buttons ('Call Leo Martins', 'Message Leo Martins, 1 unread'). The delivery rating is adjustable with its labels (Poor to Great).

Notes for AI

Related