Skip to content

fix(ios): allow transparent safe area views - #763

Open
huytdps13400 wants to merge 1 commit into
appandflow:mainfrom
huytdps13400:fix/197-transparent-safe-area-view
Open

fix(ios): allow transparent safe area views#763
huytdps13400 wants to merge 1 commit into
appandflow:mainfrom
huytdps13400:fix/197-transparent-safe-area-view

Conversation

@huytdps13400

Copy link
Copy Markdown

Fixes #197

Summary

  • mark the legacy iOS SafeAreaView as non-opaque during initialization
  • apply the same invariant to the Fabric component view
  • keep layout, background-color handling, and the public JavaScript API unchanged

UIView defaults to opaque. Apple documents that a fully or partially transparent view must set opaque to false; otherwise rendering is unpredictable. SafeAreaView accepts transparent backgrounds, so both native implementations now opt into normal compositing.

Apple reference: https://developer.apple.com/documentation/uikit/uiview/isopaque

Test Plan

  • RED on current main: instrumented the example app on an iPhone 17 Pro simulator (iOS 26.5, Xcode 26.6, React Native 0.85.3); Fabric SafeAreaView initialized with opaque=YES
  • GREEN after the change: the same runtime probe reported opaque=NO, and the red/blue background remained visible through the top safe-area inset
  • yarn format:clang:check
  • yarn validate:typescript
  • yarn validate:eslint (0 errors; 3 pre-existing React Native deep-import warnings)
  • yarn validate:jest --runInBand (4 suites, 21 tests, 11 snapshots)
  • xcodebuild -workspace example/ios/RNSACExample.xcworkspace -scheme safe-area-example -configuration Debug -destination platform=iOS Simulator,id=D463F2F5-3B09-4E46-8919-C69E61AB557E CODE_SIGNING_ALLOWED=NO build

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

SafeAreaView can't be transparent

1 participant