Shared components

The prototype defines a small set of components used to compose every screen. Reimplement each in React Native — keep the API surfaces and interaction detail intact. Reference implementation: apps/mobile/design/prototype/redesign/rd-shared.jsx.

RdButton

Five kinds, each with a role. All use --r-btn (26px shaka cut), 700-weight display font labels, min-height per the tokens.

Kind	Fill	Text	Use
primary	Teal (--teal)	Teal-ink (--teal-ink)	Main CTA on paper screens — Get started, Load, Next, Slide-to-pay label backing
ink	Dark ink (--ink)	White	Contrast CTA — Done on Success, active filter chip
paper	Paper-hi (--paper-hi) with hairline	Ink	Secondary action — Withdraw to bank, "Load USDC" action chip
ghost	Text-only, no background	Ink-2	Tertiary — Skip, Cancel, "I already have an account"
onGradient	White with subtle inset	Ink	Only on the success burst — Receipt toggle

All buttons have pressed (85% opacity) and disabled (55% opacity + no hover) states.

RdSlidePay — the signature commit control

The one gesture that commits a payment. Deliberate — a tap can't cost money.

Anatomy:

• Track: 72px tall, ink (--ink) background, --r-btn radius.
• Thumb: 60px wide, teal (--teal) fill, radius 22px 22px 22px 5px (its own shaka cut).
• Trail: teal fill that follows the thumb, indicating progress.
• Label: "Slide to pay R$ 12,00" in white on the track. Opacity fades from 1 → 0 as the thumb drags right.

Behaviour:

• Completes at 75% of track width. Below that, snaps back over 180ms ease.
• On complete: thumb shows a checkmark, label disappears, fires onComplete exactly once after a 180ms hold.
• Pointer-drag works on both touch and mouse (prototype); RN implementation uses Gesture.Pan() from Reanimated / react-native-gesture-handler.

RdKeypad

0–9 grid + delete key. For amount entry on Load, Send, and Withdraw. Rows of three, 44px+ per key. Ink text on paper-hi. Delete uses a chevron-left glyph.

RdRailSlot

Bounded white chip holding a payment-rail logo (PIX, Bre-B when we ship it, etc.). Rail marks are never recolored. Chip has a hairline border and the small shaka --r-chip radius.

Appears wherever we identify a rail: scanner subtitle, confirm sheet, home market chips, activity rows.

RdChipRail / RdChipMarquee

Horizontal rows of chips.

• ChipRail — drag-scrollable with a right-edge paper fade. Used for the Home market chips ("Pay like a local in ...") and the Activity filter row.
• ChipMarquee — auto-loops continuously (no drag). Used on Splash and Welcome to hint at market reach.

Gotcha for the Activity filter rail: the pointer capture must start after ~6px of movement — otherwise chip taps get eaten by the drag handler. Preserve this in the RN implementation (in RN, PanGestureHandler with activeOffsetX: [-6, 6] is the equivalent).

RdActivityRow

One row in the Activity list.

• 44px icon tile on the left (paper-hi with hairline, radius --r-chip).
• Middle: merchant / recipient name (ink, 600) + place (ink-2 + country flag emoji).
• Right: local amount over USD amount, both tabular. Positive amounts (loads, refunds) use teal-deep with a + prefix.

Note (Model A reconciliation): the handoff's "USD amount" line becomes the user's home currency (£X.XX or €X.XX) — see overview § reconciliation.

RdToast

Dark card sliding from the top (e.g. "PIX approved"). Auto-dismisses after ~4.2 seconds. Positioned below the status bar with 20px horizontal insets.

RdTopBar

Standard screen header: back chevron button (44px hit target, ink on paper-hi) + H1 title in the display font + optional right slot for actions.

RdGrain

Paper-noise overlay for light screens. SVG fractal noise at 5% opacity. In React Native, ship a pre-rendered PNG at the target opacity — SVG noise doesn't perform well in RN.

RdLogo

Shaka hand mark on a gradient circle. The only place --shaka is allowed to render, alongside the success burst. Sizes range from 32px (chip context) to 128px (splash).

What the mobile implementation should preserve

• Every interaction timing listed in motion tokens — slide-to-pay snap-back at 180ms, sheet slide-up at 190ms, success burst at 420ms.
• The Shaka cut on every rounded surface — audit for accidental borderRadius: 12 (uniform) values in review.
• Tabular numerals on every money value — balance, amounts, FX, receipts.
• Rail marks unaltered — never recolour PIX or any other network's brand mark; always inside a RdRailSlot.
• prefers-reduced-motion — respect it. Zero all durations.

See screens for how these components assemble into each screen.