[@expo/ui] feat[iOS] Added contentShape() modifier for SwiftUI by sam-shubham · Pull Request #42813 · expo/expo

sam-shubham · 2026-02-03T09:49:20Z

Why

SwiftUI’s HStack inside a List does not respond to tap gestures when the user taps on empty space (for example, areas created by Spacer). This is a known SwiftUI behavior and is typically solved using .contentShape(Rectangle()) in native SwiftUI.

However, @expo/ui/swift-ui did not expose a contentShape modifier, making it impossible to implement this common and expected interaction pattern. As a result:

Only visible elements like Text or Image responded to taps
List rows with spacing behaved inconsistently compared to native SwiftUI
Developers could not match native iOS UX expectations

This PR adds first-class support for contentShape in @expo/ui, aligning Expo’s SwiftUI layer with native SwiftUI capabilities.

How

This PR introduces a new contentShape modifier across the full Expo UI stack.

iOS (SwiftUI)

Added ContentShapeModifier implemented as a ViewModifier
Supports all existing Expo shape types:
- rectangle
- roundedRectangle
- capsule
- circle
- ellipse
Internally maps to SwiftUI’s native contentShape(...) API
Registered the modifier in ViewModifierRegistry under "contentShape"

JavaScript / TypeScript

Added contentShape to @expo/ui/swift-ui/modifiers
Reuses the existing shapes API for consistency with clipShape and containerShape
Exported via the modifiers index and included in BuiltInModifier typing

Developer Experience

API mirrors native SwiftUI usage
Works seamlessly with onTapGesture
Makes empty layout areas (e.g. Spacer) participate in hit testing

Test Plan

Manual Testing

Open UI → Modifiers Screen in the native component list app on iOS
Navigate to “Content Shape Modifier” section
Tap between the left and right text in the first HStack (without contentShape)
- ❌ Tap does not trigger
Tap between the texts in the second HStack (with contentShape(rectangle()))
- ✅ Tap triggers alert
- ✅ Counter increments correctly
Verified taps work across the entire row, including spacer / empty areas

Expected vs Actual

Before: Only Text elements receive tap events
After: Entire row responds to taps, matching native SwiftUI behavior

Screen.Recording.2026-02-03.at.2.47.57.PM.mov

Checklist

I added a changelog.md entry and rebuilt the package sources according to the guide
This diff works correctly with npx expo prebuild & EAS Build
API is consistent with existing clipShape and containerShape modifiers
No breaking changes introduced

Summary by CodeRabbit

New Features
- Added contentShape modifier to define interactive hit-test areas independent of visual boundaries, enabling more flexible touch responsiveness for UI elements.

…cks inside Stacks

github-actions · 2026-02-03T09:49:36Z

Subscribed to pull request

File Patterns	Mentions
docs/**	@amandeepmittal
packages/expo-ui/**	@aleqsio, @behenate, @douglowder

Generated by CodeMention

coderabbitai · 2026-02-03T09:49:52Z

📝 Walkthrough

Walkthrough

Implements a new contentShape() modifier for SwiftUI hit testing that allows interactive gestures to respond to empty space within containers. Adds TypeScript API declarations and implementations, creates a Swift ViewModifier supporting multiple shape types, registers it in the modifier system, and demonstrates usage in a UI test screen.

Changes

Cohort / File(s)	Summary
TypeScript API & Exports `packages/expo-ui/src/swift-ui/modifiers/contentShape.ts`, `packages/expo-ui/build/swift-ui/modifiers/contentShape.d.ts`	Defines new `contentShape(shape: Shape)` function that creates a modifier config. Includes JSDoc documentation with usage examples for hit-testing non-visible areas.
Modifier Index Updates `packages/expo-ui/src/swift-ui/modifiers/index.ts`, `packages/expo-ui/build/swift-ui/modifiers/index.d.ts`	Imports contentShape, extends `BuiltInModifier` union type to include it, and re-exports for public API exposure.
Swift Implementation `packages/expo-ui/ios/Modifiers/ContentShapeModifier.swift`, `packages/expo-ui/ios/Modifiers/ViewModifierRegistry.swift`	New `ContentShapeModifier` ViewModifier that applies contentShape based on shape type (rectangle, capsule, circle, ellipse, roundedRectangle). Registered in modifier factory registry.
UI Demo & Documentation `apps/native-component-list/src/screens/UI/ModifiersScreen.ios.tsx`, `packages/expo-ui/CHANGELOG.md`	Adds demonstration section in ModifiersScreen comparing contentShape behavior with and without the modifier. Includes state tracking and tap gesture examples. Updates changelog with feature entry.

Sequence Diagram(s)

Not applicable — changes represent a straightforward modifier registration and application pattern without complex multi-component interactions or non-trivial sequential flows.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Suggested labels

bot: passed checks, bot: fingerprint compatible

Suggested reviewers

hassankhan

Poem

🐰 Hops with joy through SwiftUI's delight,
A contentShape modifier shines so bright!
Now Spacers respond to eager taps,
Filling in those interactive gaps—
Hit testing dreams come true, hip-hip-hooray! 🎉✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding a contentShape() modifier for SwiftUI in the `@expo/ui` package on iOS.
Linked Issues check	✅ Passed	The PR fully implements the requirements from issue `#42747`: contentShape modifier accepts all required shape types (rectangle, roundedRectangle, capsule, circle, ellipse), aligns with existing modifiers (clipShape, containerShape), is usable in JS/TS, and enables hit-testing on empty layout areas.
Out of Scope Changes check	✅ Passed	All changes are directly related to implementing the contentShape modifier as specified in issue `#42747`; the addition of demo UI in ModifiersScreen and changelog entry are appropriate supporting changes.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@apps/native-component-list/src/screens/UI/ModifiersScreen.ios.tsx`:
- Around line 719-724: The onTapGesture handler reads the stale
contentShapeButtonCounter and calls
setcontentShapeButtonCounter(contentShapeButtonCounter + 1), which can drop
rapid taps; switch to a functional state update in the onTapGesture handler (use
setcontentShapeButtonCounter(prev => prev + 1)) and compute the new count from
prev so the Alert uses the correct incremented value (e.g., call Alert.alert
with the nextCount derived inside the functional updater or invoke Alert from
within the updater closure using prev to build nextCount). This change affects
the onTapGesture callback and the setcontentShapeButtonCounter usage to ensure
increments and displayed counts never use stale state.

apps/native-component-list/src/screens/UI/ModifiersScreen.ios.tsx

Co-authored-by: Expo Bot <34669131+expo-bot@users.noreply.github.com>

packages/expo-ui/CHANGELOG.md

CHANGELOG.md

apps/native-component-list/src/screens/UI/ModifiersScreen.ios.tsx

Co-authored-by: nishan (o^▽^o) <nishanbende@gmail.com>

intergalacticspacehighway

Thanks @sam-shubham for the PR.

One last thing: Can you regenerate the docs by running below command?

et gdad 'expo-ui/swift-ui/modifiers'

sam-shubham · 2026-02-03T11:10:11Z

'expo-ui/swift-ui/modifiers'

Done

amandeepmittal

Please remove the docs data files for the non-expo-ui packages that are included in this PR.

packages/expo-ui/src/swift-ui/modifiers/contentShape.ts

sam-shubham · 2026-02-03T11:35:43Z

Please remove the docs data files for the non-expo-ui packages that are included in this PR.

Done 👍

intergalacticspacehighway · 2026-02-03T12:32:45Z

@sam-shubham Can you also fix the failing CI lint issues?

Co-authored-by: Aman Mittal <amandeepmittal@live.com>

expo-bot · 2026-02-03T16:39:18Z

Hi there! 👋 I'm a bot whose goal is to ensure your contributions meet our guidelines.

I've found some issues in your pull request that should be addressed (click on them for more details) 👇

⚠️ Suggestion: Missing links in changelog entries

I've added some suggestions below, you can just apply and commit them 😉

Generated by ExpoBot 🤖 against 504859e

packages/expo-ui/CHANGELOG.md

sam-shubham · 2026-02-03T16:40:35Z

@sam-shubham Can you also fix the failing CI lint issues?

I tried to fixx all of them which were there can you have a look once..

amandeepmittal

Thank you!

sam-shubham · 2026-02-03T21:50:52Z

hey @amandeepmittal @intergalacticspacehighway can you help m with the "ios unit test flow" failure in CI

sam-shubham added 2 commits February 3, 2026 15:01

feat(ui): add swiftui contentShape modifier for handle empty area cli…

ed2235a

…cks inside Stacks

Merge branch 'expo:main' into main

7607dbe

expo-bot added the bot: suggestions ExpoBot has some suggestions label Feb 3, 2026

coderabbitai bot reviewed Feb 3, 2026

View reviewed changes

apps/native-component-list/src/screens/UI/ModifiersScreen.ios.tsx Outdated Show resolved Hide resolved

added changelog entry for contentShape

c4251fe

expo-bot added bot: needs changes ExpoBot found things that don't meet our guidelines and removed bot: suggestions ExpoBot has some suggestions labels Feb 3, 2026

sam-shubham and others added 3 commits February 3, 2026 15:32

added package level changelog entry for contentShape

be8de8b

fixed stale state consumtipon inside testapp component form contentShape

2d218e9

updated changelog with sugeested formating

b009389

Co-authored-by: Expo Bot <34669131+expo-bot@users.noreply.github.com>

sam-shubham changed the title ~~[@expo/ui] feat(swift-ui) Added contentShape() modifier for SwiftUI~~ [@expo/ui] feat[iOS] Added contentShape() modifier for SwiftUI Feb 3, 2026

intergalacticspacehighway reviewed Feb 3, 2026

View reviewed changes

packages/expo-ui/CHANGELOG.md Outdated Show resolved Hide resolved

removed duplicate changelog entry

f0ed858

expo-bot added bot: passed checks ExpoBot has nothing to complain about and removed bot: needs changes ExpoBot found things that don't meet our guidelines labels Feb 3, 2026

intergalacticspacehighway reviewed Feb 3, 2026

View reviewed changes

CHANGELOG.md Outdated Show resolved Hide resolved

intergalacticspacehighway reviewed Feb 3, 2026

View reviewed changes

apps/native-component-list/src/screens/UI/ModifiersScreen.ios.tsx Outdated Show resolved Hide resolved

sam-shubham and others added 2 commits February 3, 2026 15:52

removed comented code

3f8d376

Apply suggestion from @intergalacticspacehighway

7cf637d

Co-authored-by: nishan (o^▽^o) <nishanbende@gmail.com>

expo-bot added bot: suggestions ExpoBot has some suggestions and removed bot: passed checks ExpoBot has nothing to complain about labels Feb 3, 2026

sam-shubham requested a review from intergalacticspacehighway February 3, 2026 10:51

intergalacticspacehighway approved these changes Feb 3, 2026

View reviewed changes

sam-shubham requested a review from intergalacticspacehighway February 3, 2026 11:11

amandeepmittal requested changes Feb 3, 2026

View reviewed changes

packages/expo-ui/src/swift-ui/modifiers/contentShape.ts Outdated Show resolved Hide resolved

removed other unneccasry documentation changes

1a41150

sam-shubham force-pushed the main branch from f12d2e5 to 1a41150 Compare February 3, 2026 11:30

sam-shubham and others added 2 commits February 3, 2026 21:54

Update packages/expo-ui/src/swift-ui/modifiers/contentShape.ts

de130a6

Co-authored-by: Aman Mittal <amandeepmittal@live.com>

fixed all CI errors

504859e

expo-bot reviewed Feb 3, 2026

View reviewed changes

packages/expo-ui/CHANGELOG.md Show resolved Hide resolved

sam-shubham requested a review from amandeepmittal February 3, 2026 16:39

amandeepmittal approved these changes Feb 3, 2026

View reviewed changes

intergalacticspacehighway approved these changes Feb 3, 2026

View reviewed changes

intergalacticspacehighway merged commit cfef54e into expo:main Feb 4, 2026
14 of 16 checks passed

bergstromdev mentioned this pull request Feb 7, 2026

[@expo/ui] Add contentShape() modifier for SwiftUI hit testing #42747

Closed

d1coach mentioned this pull request Feb 16, 2026

[@expo/ui][iOS] TextField multiline with frame has very small tappable area #43166

Closed

Conversation

sam-shubham commented Feb 3, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Why

How

iOS (SwiftUI)

JavaScript / TypeScript

Developer Experience

Test Plan

Manual Testing

Expected vs Actual

Checklist

Summary by CodeRabbit

Uh oh!

github-actions bot commented Feb 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot commented Feb 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Suggested labels

Suggested reviewers

Poem

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

intergalacticspacehighway left a comment

Choose a reason for hiding this comment

Uh oh!

sam-shubham commented Feb 3, 2026

Uh oh!

amandeepmittal left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

sam-shubham commented Feb 3, 2026

Uh oh!

intergalacticspacehighway commented Feb 3, 2026

Uh oh!

expo-bot commented Feb 3, 2026

Uh oh!

Uh oh!

sam-shubham commented Feb 3, 2026

Uh oh!

amandeepmittal left a comment

Choose a reason for hiding this comment

Uh oh!

sam-shubham commented Feb 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

sam-shubham commented Feb 3, 2026 •

edited by coderabbitai bot

Loading

github-actions bot commented Feb 3, 2026 •

edited

Loading

coderabbitai bot commented Feb 3, 2026 •

edited

Loading

amandeepmittal left a comment •

edited

Loading

sam-shubham commented Feb 3, 2026 •

edited

Loading