Services
Popular Services
A curated highlight list for promoted services where the builder selects exactly which services appear, in exact order, using selectedServiceIds. Best used as a featured row above a full Service List for a complete browse flow.
selectedServiceIds is a comma-separated list and render order follows the selected order.
Set detailScreenId to navigate on tap and pass full service params to the target screen.
Category Services • Component BuilderPopularServices • Registry key popular-services.
Four things worth knowing
Backend data source from AdminServiceManager
The component fetches services for the app from backend data managed in AdminServiceManager, then renders only IDs listed in selectedServiceIds.
Empty-selection behavior before and after fetch
If no selected IDs are set, builder placeholder cards are shown before fetch, then an empty state is shown after fetch.
Only five visibility toggles are exposed
Editor toggles are limited to showBadge, showRating, showDuration, showProvider, and showBorder.
Fixed presentation rules in component code
Subtitle and price are always on, image is always off, chevron shows only when detailScreenId exists, and icon/image sizing plus spacing are fixed.
Find it, drop it, choose services
Where to find itAdd it to any screen
- Component picker → Services → Popular Services.
- Open property editor and choose services via
selectedServiceIds. - Best used above a full Service List for complete browsing.
Before you publishThree things to check
- Keep selection curated - usually 2–4 services performs best.
- Optionally set
detailScreenIdto a shared detail screen used by Service List. - For
screen-selectfields, the Action tab screen list is folder-grouped and collapsed by default for faster scanning.
Selection and navigation
| Prop | Type | Default | Description |
|---|---|---|---|
selectedServiceIds | popular-service-select | ” | Comma-separated service IDs picked in the property editor; output keeps this exact order. |
detailScreenId | screen-select | ” | Optional screen target when an item is tapped. |
Make it yours
Popular Services exposes a focused set of visibility and style controls. Item sizing, spacing, and several visibility rules are intentionally fixed in code.
| Prop | Default | What it controls |
|---|---|---|
showBadge | true | Badge visibility. |
showRating | true | Rating visibility. |
showDuration | true | Duration visibility. |
showProvider | true | Provider label visibility. |
showBorder | true | Card border visibility. |
backgroundColor | #FFFFFF | Section background colour. |
cardBackgroundColor | #FFFFFF | Card background colour. |
titleColor | #1a1a1a | Service title colour. |
subtitleColor | #6B7280 | Service subtitle colour. |
iconColor | #FFFFFF | Icon colour. |
iconBackgroundColor | #111827 | Icon container colour. |
priceColor | #111827 | Price text colour. |
badgeColor | #065F46 | Badge text colour. |
badgeBackgroundColor | #D1FAE5 | Badge background colour. |
borderColor | #E5E7EB | Card border colour. |
borderRadius | 12 | Card corner radius. |
ratingColor | #F59E0B | Rating icon/text colour. |
durationColor | #6B7280 | Duration label colour. |
providerLabelColor | #6B7280 | Provider label colour. |
fontFamily | System | Card typography family. |
titleFontSize | 16 | Title size. |
subtitleFontSize | 14 | Subtitle size. |
Common mistakes to avoid
Keep it curated, not a full catalog
This component is for promoted picks only. Keep selection small (usually 2–4) and place a full Service List below for browsing.
Reuse one detail screen
Use the same detailScreenId as Service List where possible so one detail screen can handle taps from both components.
No provider filtering prop here
Do not expect provider-scoped filtering in Popular Services - filterProviderEmail is not supported in this component.
Keep docs in sync when behavior changes
Update this page first, then update SERVICES_COMPONENTS.md and any website/docs mirrors.