contentShape

`contentShape(shape)`

Parameter	Type	Description
`shape`	`Shape`	A shape configuration from the shapes API (rectangle, circle, capsule, ellipse, roundedRectangle).

Defines the content shape for hit-testing purposes.

This modifier is essential for making entire view areas (including Spacer or empty space) interactive. Without it, only visible elements like Text or Image respond to tap gestures.

Returns: ModifierConfig

See: Official SwiftUI documentation.

Example

import { HStack, List, Section, Spacer, Text } from "@expo/ui/swift-ui";
import { contentShape, onTapGesture } from "@expo/ui/swift-ui/modifiers";
import { shapes } from "@expo/ui/swift-ui/modifiers";

function InteractiveRow() {
  return (
    <List>
      <Section title="Settings">
        <HStack
          modifiers={[
            contentShape(shapes.rectangle()),
            onTapGesture(() => console.log("Row tapped!"))
          ]}
        >
          <Text>Label</Text>
          <Spacer />
          <Text>Value</Text>
        </HStack>
      </Section>
    </List>
  );
}

Works with

You can add contentShape to any view. It changes what you see on 34 of the 39 components.

No visible effect

These components accept it, but you see no change.

Component	Why nothing happens
Spacer	It changes the area that gets touches, and Spacer gets no touches of its own.
Divider	It changes the area that gets touches, and Divider gets no touches of its own.
ProgressView	It changes the area that gets touches, and ProgressView gets no touches of its own.
Gauge	It changes the area that gets touches, and Gauge gets no touches of its own.
AccessoryWidgetBackground	It changes the area that gets touches, and AccessoryWidgetBackground gets no touches of its own.

Sources

The original Expo docs for this page:

contentShape (Modifiers) (source-of-truth/versions/v57.0.0/sdk/ui/swift-ui/modifiers.md)

contentShape(shape)

Works with

No visible effect

Sources

On this page

`contentShape(shape)`