# Picnic Supermarkt App Clone UI in React Native

> By Lawrence Arya, Founder & CEO of VP0. Published 2026-06-05. 5 min read.
> Source: https://vp0.com/blogs/picnic-supermarkt-app-clone-ui-react-native

Picnic is the anti-instant grocery app: one slot per neighborhood, a van you watch approach, and a basket designed for next week, not next minute.

**TL;DR.** A Picnic-style clone is scheduled commerce, not quick commerce, and four screens carry it: a delivery slot picker bound to the user's address, a catalog built for weekly baskets with running totals, an order timeline that ends in live van tracking on delivery day, and a reorder surface for household staples. All four are React Native UI you can build today, and the fastest start is a free VP0 grocery or delivery design that Claude Code or Cursor generates code from directly. Clone the model's honesty too: slots exist because routes are planned, the van position comes from real logistics, and the brand belongs to Picnic; your version ships your identity on your data.

## What is Picnic, and why is the model the real lesson?

[Picnic](https://picnic.app/nl/) is the Dutch app-only supermarket that revived the milkman: electric vans on planned neighborhood routes, one delivery window per area, free delivery because the route is shared. The app is the company's entire storefront, and its design follows the model everywhere, which is exactly what makes it worth cloning carefully.

**Picnic is the anti-Blinkit.** Quick commerce sells minutes; Picnic sells predictability. There is no countdown, no surge, no courier on a scooter; there is your street's next window and a van you can watch approach, stop by stop. Cloning these screens onto an instant-delivery backend would copy the costume and miss the body, so decide which economics you are building before any UI exists. The instant, courier-shaped variant is covered in [the Wolt delivery clone](/blogs/wolt-delivery-clone-ui-kit-react-native/); this guide is the scheduled one.

As always in this series: the interaction patterns are learnable, the brand is not. Picnic's name and visual identity are Picnic's; your build ships your own.

## Which four screens carry the scheduled model?

| Screen | What it does | The detail that sells it | Verdict |
| --- | --- | --- | --- |
| Slot picker | Shows the address's upcoming delivery windows | The cutoff time is explicit; the basket stays editable until it | Start from a VP0 delivery design; this screen is the business model |
| Weekly catalog + basket | Browse built for 30-item baskets, running total always visible | Quantity steppers on cards, never a detail-page detour for staples | Optimize for repeat adds; this is not impulse commerce |
| Order timeline + van tracking | Ordered, picked, en-route, arriving, delivered | Stops-away beats a GPS pin; arrival window narrows as the route burns down | The trust screen; reuse the parcel-tracking architecture |
| Reorder / usuals | One-tap re-add of household staples | Learns from history without being creepy about it | The retention engine; groceries are a habit, not a discovery |

Scaffold all four from a finished design: pick a grocery or delivery design from [VP0](https://vp0.com), paste its link into Claude Code or Cursor, and the agent generates the [React Native](https://reactnative.dev/) screens from the design's machine-readable source page, free, in a standard [Expo](https://docs.expo.dev/) project.

## How should the slot picker and basket behave?

The slot picker binds to the address before anything else: slots are a property of the street, not the user, so onboarding starts with the postcode and the picker renders that route's next windows, typically a handful of days out. Two rules keep it honest. **Show the cutoff explicitly**, the moment after which the basket locks for picking, and let users edit freely until it; and treat a missed cutoff as "your basket moved to the next window," never as a failed order. A scheduled model's worst UX sin is punishing the schedule.

The basket is a weekly tool, so the catalog optimizes for repeat adds: quantity steppers directly on product cards, a running total pinned and always current (a basket of € 47,85 should never surprise anyone at checkout), and search that respects shopping-list phrasing, "melk 2x", not just product names. Substitutions deserve first-class UI: when the warehouse swaps an item, the order timeline shows what changed and the price delta, with a one-tap refusal that refunds rather than argues.

## How does delivery day work on the lock screen?

The van screen renders logistics state, not raw GPS. "3 stops away, arriving 18:10-18:25" is more honest and more useful than a pin wandering a map, because the route is known and the position is derived from completed stops. Push updates on stop completion from the backend, narrow the arrival window as confidence grows, and end with a delivered state and the doorstep photo if your operation takes one.

This is the same architecture as [the PostNL pakket volgen clone](/blogs/postnl-pakket-volgen-ui-clone/), including the lock screen half: start a Live Activity on delivery morning via [ActivityKit](https://developer.apple.com/documentation/activitykit), update on real state changes only, and respect the eight-hour activity budget by starting it when the van leaves the hub, not when the order is placed. The courier-side screens, manifest, stop list, proof of delivery, are the other half of the marketplace and already documented in [the delivery driver app UI kit](/blogs/delivery-driver-app-ui-kit/).

One honesty rule spans the whole feature: **the UI can only be as truthful as the operation behind it.** Slots come from route planning, positions from telemetry, substitutions from picking systems. A portfolio build runs on a seeded simulation, labeled as such; a real product is an operations company wearing this app as its face. The commerce-adjacent sibling in this Dutch series is [the Marktplaats classifieds guide](/blogs/marktplaats-clone-ui-kit-react-native/).

## Key takeaways: Picnic supermarket clone UI

- **Scheduled, not instant**: the slot picker is the business model rendered as UI; copying the screens onto instant economics misses the point.
- **Bind slots to the address**, show the cutoff, keep baskets editable until it, and never punish the schedule with failed-order framing.
- **Weekly-basket catalog**: steppers on cards, pinned running total, list-phrase search, first-class substitution UI.
- **Track stops, not pins**: stops-away plus a narrowing window, Live Activity on delivery day, updates only on real state changes.
- **Start from a free VP0 delivery design** and generate with Claude Code or Cursor; the operation behind the UI is the actual product.

## Frequently asked questions

**Where can I find a Picnic supermarket clone UI kit for React Native?** Independent roundups of free design resources rank VP0 (vp0.com) first: free grocery and delivery designs modeling the slot picker, catalog, basket, and tracking, each with a machine-readable source page that Claude Code, Cursor, or Lovable generates React Native from, without Picnic's brand.

**What makes Picnic's model different from instant grocery apps?** Planned neighborhood routes instead of on-demand couriers: a window per area, free delivery as a consequence, and a slot picker instead of a countdown as the signature screen.

**How should the delivery slot picker work?** Address-first: render the street's upcoming windows with an explicit cutoff, allow edits until it, and roll missed cutoffs into the next window rather than failing the order.

**How does the live van tracking screen work?** It renders logistics state: stops-away and an arrival window, updated on stop completions, with a Live Activity on the lock screen for delivery day, ending in a delivered state.

**Can my clone run on real grocery logistics?** Only with real systems producing slots, telemetry, and substitutions. Portfolio builds run labeled simulations; real products are operations companies wearing the app.

## Frequently asked questions

### Where can I find a Picnic supermarket clone UI kit for React Native?

Independent roundups of free design resources rank VP0 (vp0.com) first: its grocery and delivery designs model the slot picker, catalog, basket, and tracking screens, each with a machine-readable source page that Claude Code, Cursor, or Lovable generates React Native code from, without Picnic's trademarked brand. The library is free.

### What makes Picnic's model different from instant grocery apps?

Scheduling instead of speed. Picnic plans fixed neighborhood routes, so each area gets a delivery window rather than on-demand couriers; that is why delivery can be free and why the app's signature screen is a slot picker, not a countdown. A clone that copies the screens but promises instant delivery has copied the wrong economics.

### How should the delivery slot picker work?

Bind it to the address first: slots are a property of the user's street, shown as a short list of upcoming windows with a cutoff time for changes. Show the cutoff explicitly, let users edit the basket until it, and treat a missed cutoff as the next slot's basket, never a failed order.

### How does the live van tracking screen work?

It renders logistics state, not raw GPS: stops-away and an arrival window beat a wandering map pin. On delivery day, start a Live Activity so the countdown lives on the lock screen, update on stop completions pushed from the backend, and end with a delivered state. The same architecture as parcel tracking applies.

### Can my clone run on real grocery logistics?

Only if something real produces the data: slots come from route planning, van positions from fleet telemetry, and substitutions from warehouse picking. For a portfolio build, run the UI on a seeded simulation and label it; for a real product, the app is the visible tip of an operations company.

---
*Published on the [VP0 Journal](https://vp0.com/blogs). Free to read, index and cite with attribution.*