Expo UI and Router for iOS
Modifiers

contentShape

Defines the content shape for hit-testing purposes.

contentShape(shape)

ParameterTypeDescription
shapeShapeA 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

This modifier works with any view. These components accept it:

Sources

The original Expo docs for this page:

containerShape

Sets the container shape for the view.

contentTransition

Sets the content transition type for a view. Useful for animating changes in text content, especially numeric text. Use with the animation modifier to animate the transition when the content changes.

On this page

contentShape(shape)Works withSources