Layout & Structure
Detail View
Rich profile-style detail screen for a tapped service item. Data flows in from Service List or Popular Services - Detail View just renders it. Drop it on a screen, wire up the list, and the content fills itself.
Two supported layouts. All other values are unsupported and should not be used.
Content comes from the tapped item, not from manually authored fields in this component.
Available on all plans.
Four things worth knowing
Data comes from the tapped item
Detail View reads navigationParams passed by Service List or Popular Services when a user taps an item. Fields like imageUrl, title, price, providerName, and description are all sourced from the item - not authored here.
Fallback content when no params are present
If no navigation params are passed - for example during initial setup before a list is wired up - Detail View shows sample content and a hint message. This is expected. Navigate into it by tapping a real list item in preview to see live data.
Navigation actions for booking and chat
Three optional navigation targets: backScreenId for a custom back destination, bookingScreenId for the CTA button, and chatScreenId for a provider chat shortcut. When used, Detail View forwards relevant provider and service fields in params.
Visibility toggles keep the layout flexible
Show or hide the image, provider info, rating, address, and other sections independently via the Content tab toggles. Use this to adapt the same component to services that have less data without leaving empty gaps.
Find it, drop it, wire the list
Where to find itAdd it to any screen
- Component picker → Layout → Detail View.
- Drop it on the screen that should show item details.
- Add a Service List or Popular Services component on another screen and set its Detail Screen to this screen.
Before you publishThree things to check
- Confirm the list component’s Detail Screen points to the screen containing Detail View.
- Enable Show Image and Show Provider Info if those fields are present on your service items.
- Tap a real list item in preview to verify data flows through - sample content means no params were received.
Layout, actions, and sizing
| Prop | Type | Default | Description |
|---|---|---|---|
layout | select | ’profile’ | profile or profile-stacked. No other values are supported. |
backAction | select | ’go-back’ | go-back - uses device back. navigate-screen - routes to backScreenId. |
backScreenId | string | - | Target screen for back navigation. Required when backAction is navigate-screen. |
bookingScreenId | string | - | Target screen for the CTA booking button. Leave blank to hide the button. |
chatScreenId | string | - | Target screen for the provider chat shortcut. Leave blank to hide it. |
priceFontSize | number | - | Font size for the price display. |
iconSize | number | - | Size of info icons (address, phone, hours, duration). |
iconContainerSize | number | - | Size of the icon container element. |
Make it yours
Every visibility toggle and label below is yours to change. The defaults show everything - turn off what isn’t relevant to your service type.
| Prop | Default | What it controls |
|---|---|---|
showImage | true | Hero image visibility. |
showProviderInfo | true | Provider name and avatar tag. |
showRating | true | Rating row visibility. |
showAddress | true | Address info row. |
showPhone | true | Phone info row. |
showHours | true | Hours info row. |
showDuration | true | Duration info row. |
aboutMeTitle | ’About Me’ | Heading above the description section. |
ratingTitle | ’Rating’ | Label next to the rating value. |
addressLabel | ’Address’ | Label for the address row. |
ctaLabel | ’Book Now’ | Text on the CTA booking button. |
Common mistakes to avoid
Detail View shows sample data only
This means no navigation params were passed. It is not a bug - it’s the fallback state. Open preview and tap a real item in Service List or Popular Services to verify live data mapping.
Image or provider tag is empty
Check that the service item has imageUrl and providerName / providerEmail filled in Service Manager, and that Show Image and Show Provider Info are enabled in Detail View.
Don’t use unsupported layout values
Only profile and profile-stacked are supported. Values like card, header, fullWidth, and profile-compact have been removed and will produce unexpected results.
Adding new service fields to Detail View
New fields must be added in three places: the onScreenNavigate payload in Service List / Popular Services, the navigationParams read in BuilderDetailView.tsx, and optionally the registry propDefinitions if a display toggle is needed.