diff --git a/Libraries/Components/Pressable/Pressable.js b/Libraries/Components/Pressable/Pressable.js index 5560626ffea930..601758f999449f 100644 --- a/Libraries/Components/Pressable/Pressable.js +++ b/Libraries/Components/Pressable/Pressable.js @@ -232,6 +232,16 @@ type Props = $ReadOnly<{| */ enableFocusRing?: ?boolean, + /** + * Specifies whether the view ensures it is vibrant on top of other content. + * For more information, see the following apple documentation: + * https://developer.apple.com/documentation/appkit/nsview/1483793-allowsvibrancy + * https://developer.apple.com/documentation/appkit/nsvisualeffectview#1674177 + * + * @platform macos + */ + allowsVibrancy?: ?boolean, + /** * Specifies the Tooltip for the Pressable. * @platform macos diff --git a/Libraries/Components/View/ViewPropTypes.d.ts b/Libraries/Components/View/ViewPropTypes.d.ts index 56cfe79a45eda9..1ecaf549d213ae 100644 --- a/Libraries/Components/View/ViewPropTypes.d.ts +++ b/Libraries/Components/View/ViewPropTypes.d.ts @@ -173,6 +173,7 @@ export type DraggedTypesType = DraggedType | DraggedType[]; export interface ViewPropsMacOS { acceptsFirstMouse?: boolean | undefined; + allowsVibrancy?: boolean | undefined; mouseDownCanMoveWindow?: boolean | undefined; enableFocusRing?: boolean | undefined; onMouseEnter?: ((event: MouseEvent) => void) | undefined; diff --git a/Libraries/Components/View/ViewPropTypes.js b/Libraries/Components/View/ViewPropTypes.js index d845267e57373e..fc9d2ee20a79cc 100644 --- a/Libraries/Components/View/ViewPropTypes.js +++ b/Libraries/Components/View/ViewPropTypes.js @@ -553,6 +553,16 @@ type MacOSViewProps = $ReadOnly<{| */ mouseDownCanMoveWindow?: ?boolean, + /** + * Specifies whether the view ensures it is vibrant on top of other content. + * For more information, see the following apple documentation: + * https://developer.apple.com/documentation/appkit/nsview/1483793-allowsvibrancy + * https://developer.apple.com/documentation/appkit/nsvisualeffectview#1674177 + * + * @platform macos + */ + allowsVibrancy?: ?boolean, + /** * Specifies whether system focus ring should be drawn when the view has keyboard focus. * diff --git a/Libraries/NativeComponent/BaseViewConfig.macos.js b/Libraries/NativeComponent/BaseViewConfig.macos.js index fd71051f0ce638..e6ab3ea1765332 100644 --- a/Libraries/NativeComponent/BaseViewConfig.macos.js +++ b/Libraries/NativeComponent/BaseViewConfig.macos.js @@ -48,6 +48,7 @@ const directEventTypes = { const validAttributesForNonEventProps = { acceptsFirstMouse: true, accessibilityTraits: true, + allowsVibrancy: true, cursor: true, draggedTypes: true, enableFocusRing: true, diff --git a/React/Views/RCTView.h b/React/Views/RCTView.h index 6a24d44341de75..cfe7818b242ed1 100644 --- a/React/Views/RCTView.h +++ b/React/Views/RCTView.h @@ -156,6 +156,10 @@ extern const UIAccessibilityTraits SwitchAccessibilityTrait; @property (nonatomic, assign) CATransform3D transform3D; +// `allowsVibrancy` is readonly on NSView, so let's create a new property to make it assignable +// that we can set through JS and the getter for `allowsVibrancy` can read in RCTView. +@property (nonatomic, assign) BOOL allowsVibrancyInternal; + @property (nonatomic, copy) RCTDirectEventBlock onMouseEnter; @property (nonatomic, copy) RCTDirectEventBlock onMouseLeave; @property (nonatomic, copy) RCTDirectEventBlock onDragEnter; diff --git a/React/Views/RCTView.m b/React/Views/RCTView.m index 641eaa15c90036..9f33e4c2da8a1d 100644 --- a/React/Views/RCTView.m +++ b/React/Views/RCTView.m @@ -1519,6 +1519,9 @@ - (void)setMouseDownCanMoveWindow:(BOOL)mouseDownCanMoveWindow{ _mouseDownCanMoveWindow = mouseDownCanMoveWindow; } +- (BOOL)allowsVibrancy { + return _allowsVibrancyInternal; +} - (NSDictionary*)locationInfoFromEvent:(NSEvent*)event { diff --git a/React/Views/RCTViewManager.m b/React/Views/RCTViewManager.m index 0e3e0d12fb2ca5..c19843ce837bb7 100644 --- a/React/Views/RCTViewManager.m +++ b/React/Views/RCTViewManager.m @@ -430,6 +430,8 @@ - (RCTShadowView *)shadowView RCT_EXPORT_VIEW_PROPERTY(mouseDownCanMoveWindow, BOOL) +RCT_REMAP_VIEW_PROPERTY(allowsVibrancy, allowsVibrancyInternal, BOOL) + RCT_CUSTOM_VIEW_PROPERTY(focusable, BOOL, RCTView) { if ([view respondsToSelector:@selector(setFocusable:)]) {