Skip to main content
Placeholder(props: PlaceholderProps, children: Component[]): Component;

​
Parameters

​
props
PlaceholderProps
Configuration for the placeholder component.
​
children
Component[]
Child components to display as the placeholder content or fallback.

​
Support

​
Usage

​
Basic placeholder

Placeholder(
    {
        name: "MapView",
        title: "Map not available on this platform"
    },
    [
        Text("Map component is not supported")
    ]
)

​
Platform-specific placeholder

Placeholder(
    {
        name: "ARView",
        title: "AR View",
        validPlatforms: ["iOS", "visionOS"]
    },
    [
        VStack([
            Text("AR View").font("headline"),
            Text("Available on iOS and visionOS only").font("caption")
        ])
    ]
)

​
With component props

Placeholder(
    {
        name: "NativeVideoPlayer",
        props: { url: "https://example.com/video.mp4" },
        title: "Video Player Unavailable"
    },
    [
        VStack([
            Image({ systemName: "play.circle" })
                .font(40),
            Text("Video playback not available")
        ])
    ]
)

​
Styled placeholder

Placeholder(
    {
        name: "CustomComponent",
        title: "Feature unavailable"
    },
    [
        VStack({ spacing: 12 }, [
            Text("This feature is not yet available").font("headline"),
            Text("Check back in a future update").font("body")
        ])
        .padding(20)
    ]
)
.background(Color("gray").opacity(0.1))
.cornerRadius(8)

​
Conditional placeholder

Use placeholders to gracefully handle platform-specific features: 
const [environment] = useEnvironment();

const mapView = environment.platform === "web"
    ? Placeholder(
        { name: "MapView", validPlatforms: ["iOS", "macOS"] },
        [Text("Map view not available on web")]
      )
    : NativeMapView({ location: coordinates });

VStack([mapView])

​
Notes

Placeholder components help you:
  • Provide fallback UI for unsupported platform features
  • Document which platforms support specific functionality
  • Create a consistent experience across different platforms
  • Make it clear to users when features are unavailable
The component displays the children as the placeholder content, allowing you to customize the fallback experience.