Seller Profile
Marketplace Pro
Browse a seller’s shop front with a trust summary, badges and reviews. Build a bundle by picking pieces into a stack, and the second pick unlocks 15% off with the full price struck through.
More in Marketplace
View all 10Agent prompt
Paste into Claude Code, Cursor or Devin to rebuild this screen.
Recreate the "Seller Profile" screen in React Native using LumioUI.
Goal: Browse a seller’s shop front with a trust summary, badges and reviews. Build a bundle by picking pieces into a stack, and the second pick unlocks 15% off with the full price struck through. Match the reference implementation's layout, behavior, and motion exactly — this is a production screen, not a mockup.
## Setup
Fastest path — install the screen plus its component deps:
```bash
npx @lumioui/cli add pro/marketplace-seller-profile
```
Or pull just the components: `npx @lumioui/cli add animated-number avatar pro/follow-button icon image pro/lightbox pro/rating segmented-control text`
Native packages:
- react-native-reanimated@*
- react-native-safe-area-context@*
- react-native-svg@*
Stack assumptions: Expo SDK 54 / RN 0.81, Reanimated 4, NativeWind v4, TypeScript strict, dev build required (not Expo Go).
## Components — how, where, when
### `animated-number` — Number that moves to each new value as a calm count-up or a roll where only the changed digits turn, set in type or in dot-matrix LEDs whose dots switch on in place. Screen readers announce just the final value, not every step.
- `<AnimatedNumber>` ×2
### `avatar` — Circular profile image with fallback initials and a presence dot. An optional mode shows presence on the photo itself, bright when online and faded when away or offline.
- `<Avatar>` ×2
### `follow-button` — Follow button that confirms with a check, then reshapes into a quieter Following state. Unfollowing takes two taps, and it handles requested, follow-back and failed follows gracefully.
- `<FollowButton>` ×1
### `icon` — Icon set drawn on one consistent grid, sized and coloured from your theme. The heart, star and bookmark can fill in place inside their outline, then fade back out.
- `<Icon>` ×8
### `image` — Image with a placeholder while it loads, a fallback when it fails, and aspect-ratio handling so your layout doesn’t jump when the picture arrives.
- `<Image>` ×2
### `lightbox` — Photo gallery where any tapped photo grows out of its exact tile into a full-screen viewer, then flies back into the tile of whichever photo is showing when you let it go.
- `<LightboxProvider>` ×1
- `<LightboxImage>` ×1
### `rating` — Star rating with half-star precision where stars light up under your finger as you drag. A word below changes from Awful to Great as you go, and taps and screen readers work too.
- `<Rating>` ×2
### `segmented-control` — Segmented control for switching between a few options, with text segments that can carry icons. The highlight slides smoothly to your pick and can be dragged, and a glass style suits photos.
- `<SegmentedControl>` ×1
### `text` — Themed type scale from caption to display that follows light and dark mode. Includes a pull-quote style with an accent rule and a quieter dimmed tone for secondary text.
- `<Text>` ×24
## Conventions (non-negotiable)
- Styling via NativeWind `className` with semantic tokens only: `bg-background`, `text-foreground`, `bg-card`, `text-card-foreground`, `bg-secondary`, `bg-muted`, `text-muted-foreground`, `bg-accent`, `bg-destructive`, `border-border`. Hard-coded colors only inside media overlays (`text-white`, `bg-black/N`).
- Motion via the token presets from `@lumioui/core` (`spring.press`, `spring.surface`, `spring.glide`, `timing.fast`, `timing.slow`, …) — no bespoke spring configs or durations.
- Gate transform motion behind `useReducedMotion()`; keep opacity/color feedback, drop travel and overshoot.
- Haptics via `useHaptic()`: `light` on press, `selection` on toggle/select, `warning` on invalid input. Never import expo-haptics directly.
- Press feedback via `usePressAnimation()` (~0.97 scale), not `activeOpacity` tricks.
- a11y: `accessibilityRole` + `accessibilityLabel` on every control, touch targets ≥44pt.
- Entrance choreography: staggered `Mount` wrappers (delay 0/60/120…) so regions land in sequence instead of popping in at once.
- Wrap the screen in `SafeAreaView`; keep dark mode working via the semantic tokens.
## Deliverable
One file: `screens/marketplace/seller-profile.tsx` exporting SellerProfileScreen. Preserve the props interface — the host app wires the callbacks (navigation, submit handlers) through them.
## Reference implementation
This is a LumioUI Pro item: its source is not published in the docs. Install it with a Pro license key
(set `LUMIO_LICENSE_KEY`; keys are on lumioui.com/account) and read the installed file as the reference:
```bash
npx @lumioui/cli add pro/marketplace-seller-profile
```
The source lands at `screens/marketplace/seller-profile.tsx`.
Screen: https://lumioui.com/screens/marketplace-seller-profile