From 200cfd8f5c6d00330656bfa5c87c1a1c9d7a9792 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 24 Oct 2025 20:15:40 +0000 Subject: [PATCH 1/4] Initial plan From 8d8c6a39c67df7ec6a0271e2b5a24ff5ce908f23 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 24 Oct 2025 20:34:27 +0000 Subject: [PATCH 2/4] Add macOS-specific View props and events documentation pages Co-authored-by: Saadnajmi <6722175+Saadnajmi@users.noreply.github.com> --- docsite/docs/api-reference/_category_.json | 9 + docsite/docs/api-reference/view-events.md | 294 +++++++++++++++++++++ docsite/docs/api-reference/view-props.md | 177 +++++++++++++ 3 files changed, 480 insertions(+) create mode 100644 docsite/docs/api-reference/_category_.json create mode 100644 docsite/docs/api-reference/view-events.md create mode 100644 docsite/docs/api-reference/view-props.md diff --git a/docsite/docs/api-reference/_category_.json b/docsite/docs/api-reference/_category_.json new file mode 100644 index 00000000000000..36082fab8724ca --- /dev/null +++ b/docsite/docs/api-reference/_category_.json @@ -0,0 +1,9 @@ +{ + "label": "API Reference", + "position": 4, + "link": { + "type": "generated-index", + "description": "API reference for macOS-specific props and events in React Native macOS." + }, + "collapsed": false +} diff --git a/docsite/docs/api-reference/view-events.md b/docsite/docs/api-reference/view-events.md new file mode 100644 index 00000000000000..e678829c86fa70 --- /dev/null +++ b/docsite/docs/api-reference/view-events.md @@ -0,0 +1,294 @@ +--- +sidebar_label: 'View Events (macOS)' +sidebar_position: 2 +--- + +# View Events (macOS) + +React Native macOS extends the standard React Native View component with additional events that are specific to macOS. These events allow you to respond to macOS-specific user interactions such as keyboard input, mouse movements, drag and drop operations, and more. + +## Events + +### `onBlur` + +Fired when the view loses focus. + +**Event Data:** Standard focus event + +This event is useful for implementing custom focus management and validation logic when a view loses keyboard focus. + +--- + +### `onDoubleClick` + +Fired when the user double-clicks on the view. + +**Event Data:** Mouse event with the following properties: +- `clientX`: Horizontal position in the target view +- `clientY`: Vertical position in the target view +- `screenX`: Horizontal position in the window +- `screenY`: Vertical position in the window +- `altKey`: Whether Alt/Option key is pressed +- `ctrlKey`: Whether Control key is pressed +- `shiftKey`: Whether Shift key is pressed +- `metaKey`: Whether Command key is pressed + +Example: +```javascript + { + console.log('Double clicked at', event.nativeEvent.clientX, event.nativeEvent.clientY); +}}> + Double click me + +``` + +--- + +### `onDragEnter` + +Fired when a drag operation enters the view's bounds. + +**Event Data:** Drag event with mouse position and data transfer information + +This event is fired when the user drags content over the view. Use this to provide visual feedback that the view can accept the dragged content. + +--- + +### `onDragLeave` + +Fired when a drag operation leaves the view's bounds. + +**Event Data:** Drag event with mouse position and data transfer information + +This event is fired when the user drags content away from the view. Use this to remove any visual feedback shown during drag enter. + +--- + +### `onDrop` + +Fired when the user drops content onto the view. + +**Event Data:** Drag event with the following properties: +- Mouse position (`clientX`, `clientY`, `screenX`, `screenY`) +- Modifier keys (`altKey`, `ctrlKey`, `shiftKey`, `metaKey`) +- `dataTransfer`: Object containing: + - `files`: Array of dropped files, each with: + - `name`: File name + - `type`: MIME type + - `uri`: File URI + - `size`: File size (optional) + - `width`: Image width (optional, for images) + - `height`: Image height (optional, for images) + - `items`: Array of data transfer items, each with: + - `kind`: Item kind (e.g., 'file', 'string') + - `type`: MIME type + - `types`: Array of available data types + +Example: +```javascript + { + const files = event.nativeEvent.dataTransfer.files; + files.forEach(file => { + console.log('Dropped file:', file.name, file.uri); + }); + }} +> + Drop files here + +``` + +--- + +### `onFocus` + +Fired when the view receives focus. + +**Event Data:** Standard focus event + +This event is useful for implementing custom focus management and showing focus-specific UI elements. + +--- + +### `onKeyDown` + +Fired when a key is pressed while the view has focus. + +**Event Data:** Key event with the following properties: +- `key`: The key value (aligned with [W3C UI Events](https://www.w3.org/TR/uievents-key/)) +- `altKey`: Whether Alt/Option key is pressed +- `ctrlKey`: Whether Control key is pressed +- `shiftKey`: Whether Shift key is pressed +- `metaKey`: Whether Command key is pressed +- `capsLockKey`: Whether Caps Lock is active +- `numericPadKey`: Whether the key is on the numeric keypad +- `helpKey`: Whether Help key is pressed +- `functionKey`: Whether a function key is pressed + +:::note +To receive key events, the view must have `focusable={true}` set, and you should specify which keys to handle using the `keyDownEvents` prop. +::: + +Example: +```javascript + { + const { key, metaKey } = event.nativeEvent; + if (key === 'Enter') { + console.log('Enter pressed'); + } else if (key === 's' && metaKey) { + console.log('Command+S pressed'); + } + }} +> + Press Enter or Cmd+S + +``` + +--- + +### `onKeyUp` + +Fired when a key is released while the view has focus. + +**Event Data:** Key event (same format as `onKeyDown`) + +:::note +To receive key events, the view must have `focusable={true}` set, and you should specify which keys to handle using the `keyUpEvents` prop. +::: + +--- + +### `onMouseEnter` + +Fired when the mouse cursor enters the view's bounds. + +**Event Data:** Mouse event with the following properties: +- `clientX`: Horizontal position in the target view +- `clientY`: Vertical position in the target view +- `screenX`: Horizontal position in the window +- `screenY`: Vertical position in the window +- `altKey`: Whether Alt/Option key is pressed +- `ctrlKey`: Whether Control key is pressed +- `shiftKey`: Whether Shift key is pressed +- `metaKey`: Whether Command key is pressed + +Example: +```javascript + { + console.log('Mouse entered at', event.nativeEvent.clientX, event.nativeEvent.clientY); +}}> + Hover over me + +``` + +--- + +### `onMouseLeave` + +Fired when the mouse cursor leaves the view's bounds. + +**Event Data:** Mouse event (same format as `onMouseEnter`) + +Example: +```javascript + setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + style={{ backgroundColor: isHovered ? 'lightblue' : 'white' }} +> + Hover state example + +``` + +--- + +## Complete Example + +Here's a comprehensive example showing multiple macOS-specific events: + +```javascript +import React, { useState } from 'react'; +import { View, Text, StyleSheet } from 'react-native'; + +function MacOSEventsExample() { + const [status, setStatus] = useState('Ready'); + const [isHovered, setIsHovered] = useState(false); + + return ( + + setStatus('Focused')} + onBlur={() => setStatus('Blurred')} + onKeyDown={(e) => setStatus(`Key down: ${e.nativeEvent.key}`)} + onKeyUp={(e) => setStatus(`Key up: ${e.nativeEvent.key}`)} + onMouseEnter={(e) => { + setIsHovered(true); + setStatus(`Mouse entered at (${e.nativeEvent.clientX}, ${e.nativeEvent.clientY})`); + }} + onMouseLeave={() => { + setIsHovered(false); + setStatus('Mouse left'); + }} + onDoubleClick={() => setStatus('Double clicked!')} + onDragEnter={() => setStatus('Drag entered')} + onDragLeave={() => setStatus('Drag left')} + onDrop={(e) => { + const files = e.nativeEvent.dataTransfer.files; + setStatus(`Dropped ${files.length} file(s)`); + }} + > + Interactive macOS View + {status} + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + }, + interactiveView: { + width: 300, + height: 200, + backgroundColor: 'white', + borderWidth: 2, + borderColor: 'gray', + padding: 20, + }, + hoveredView: { + backgroundColor: 'lightblue', + }, + statusText: { + marginTop: 10, + fontStyle: 'italic', + }, +}); + +export default MacOSEventsExample; +``` + +## See Also + +- [View Props (macOS)](./view-props.md) - macOS-specific props for View components +- [React Native View Component](https://reactnative.dev/docs/view) - Base View component documentation diff --git a/docsite/docs/api-reference/view-props.md b/docsite/docs/api-reference/view-props.md new file mode 100644 index 00000000000000..ffe161df2c7b2a --- /dev/null +++ b/docsite/docs/api-reference/view-props.md @@ -0,0 +1,177 @@ +--- +sidebar_label: 'View Props (macOS)' +sidebar_position: 1 +--- + +# View Props (macOS) + +React Native macOS extends the standard React Native View component with additional props that are specific to macOS. These props allow you to customize the behavior and appearance of views to take advantage of macOS-specific features. + +## Props + +### `acceptsFirstMouse` + +Controls whether the view accepts the first mouse click when the window is inactive. + +| Type | Default | +| ---- | ------- | +| bool | `false` | + +When `true`, the view will respond to mouse clicks even when the window is not in focus, without first bringing the window to the foreground. + +--- + +### `allowsVibrancy` + +Enables the vibrancy effect for the view, allowing it to blend with the content behind the window. + +| Type | Default | +| ---- | ------- | +| bool | `false` | + +When `true`, the view will use macOS vibrancy effects, creating a translucent appearance that adapts to the content behind the window. + +--- + +### `cursor` + +Specifies the mouse cursor to display when hovering over the view. + +| Type | +| ------ | +| string | + +Sets the cursor style. Common values include `'pointer'`, `'default'`, `'text'`, etc. + +--- + +### `draggedTypes` + +Specifies the types of dragged content that the view accepts for drag and drop operations. + +| Type | +| --------------- | +| array of string | + +An array of UTI (Uniform Type Identifier) strings that the view will accept. For example: `['public.file-url', 'public.text']`. + +--- + +### `enableFocusRing` + +Controls whether the standard macOS focus ring is displayed when the view has focus. + +| Type | Default | +| ---- | ------- | +| bool | `true` | + +When `true`, macOS will draw the standard focus ring around the view when it receives keyboard focus. + +--- + +### `focusable` + +Determines whether the view can receive keyboard focus. + +| Type | Default | +| ---- | ------- | +| bool | `false` | + +When `true`, the view can be focused using keyboard navigation (e.g., Tab key). + +--- + +### `keyDownEvents` + +Specifies which key down events should be handled by the view. + +| Type | +| ----------------------- | +| array of HandledKey | + +An array of key configurations that the view should handle. Each `HandledKey` object can specify: +- `key`: The key value (aligned with [W3C UI Events](https://www.w3.org/TR/uievents-key/)) +- `altKey` (optional): Whether Alt/Option key must be pressed +- `ctrlKey` (optional): Whether Control key must be pressed +- `shiftKey` (optional): Whether Shift key must be pressed +- `metaKey` (optional): Whether Command key must be pressed + +Example: +```javascript +keyDownEvents={[ + { key: 'Enter' }, + { key: 'a', metaKey: true } +]} +``` + +--- + +### `keyUpEvents` + +Specifies which key up events should be handled by the view. + +| Type | +| ----------------------- | +| array of HandledKey | + +An array of key configurations that the view should handle when keys are released. Uses the same format as `keyDownEvents`. + +--- + +### `mouseDownCanMoveWindow` + +Controls whether clicking and dragging on the view can move the window. + +| Type | Default | +| ---- | ------- | +| bool | `true` | + +When `true`, clicking and dragging on the view will allow the user to move the window. Set to `false` for interactive elements where you don't want this behavior. + +--- + +### `tooltip` + +Displays a tooltip when the user hovers over the view. + +| Type | +| ------ | +| string | + +The text to display in the tooltip. + +--- + +## Example Usage + +```javascript +import React from 'react'; +import { View, Text } from 'react-native'; + +function MacOSView() { + return ( + { + console.log('Key pressed:', event.nativeEvent.key); + }} + > + macOS View + + ); +} +``` + +## See Also + +- [View Events (macOS)](./view-events.md) - macOS-specific events for View components +- [React Native View Component](https://reactnative.dev/docs/view) - Base View component documentation From a38a146fb800a08aa30d95563c6c94a67b3fead6 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 3 Nov 2025 17:42:29 +0000 Subject: [PATCH 3/4] Move macOS API docs to separate navbar item Co-authored-by: Saadnajmi <6722175+Saadnajmi@users.noreply.github.com> --- docsite/api/intro.md | 17 ++++++++++++++++ .../api-reference => api}/view-events.md | 0 .../{docs/api-reference => api}/view-props.md | 0 docsite/docs/api-reference/_category_.json | 9 --------- docsite/docusaurus.config.ts | 20 +++++++++++++++++++ docsite/sidebarsApi.ts | 11 ++++++++++ 6 files changed, 48 insertions(+), 9 deletions(-) create mode 100644 docsite/api/intro.md rename docsite/{docs/api-reference => api}/view-events.md (100%) rename docsite/{docs/api-reference => api}/view-props.md (100%) delete mode 100644 docsite/docs/api-reference/_category_.json create mode 100644 docsite/sidebarsApi.ts diff --git a/docsite/api/intro.md b/docsite/api/intro.md new file mode 100644 index 00000000000000..353990352f80a5 --- /dev/null +++ b/docsite/api/intro.md @@ -0,0 +1,17 @@ +--- +sidebar_position: 1 +slug: / +--- + +# macOS API Reference + +Welcome to the React Native macOS API reference documentation. This section covers macOS-specific props and events that extend the standard React Native components. + +## View Component Extensions + +React Native macOS extends the standard View component with additional props and events designed specifically for macOS: + +- **[View Props](./view-props.md)** - macOS-specific properties for customizing view behavior +- **[View Events](./view-events.md)** - macOS-specific events for handling user interactions + +These extensions allow you to build truly native macOS experiences while leveraging the React Native framework. diff --git a/docsite/docs/api-reference/view-events.md b/docsite/api/view-events.md similarity index 100% rename from docsite/docs/api-reference/view-events.md rename to docsite/api/view-events.md diff --git a/docsite/docs/api-reference/view-props.md b/docsite/api/view-props.md similarity index 100% rename from docsite/docs/api-reference/view-props.md rename to docsite/api/view-props.md diff --git a/docsite/docs/api-reference/_category_.json b/docsite/docs/api-reference/_category_.json deleted file mode 100644 index 36082fab8724ca..00000000000000 --- a/docsite/docs/api-reference/_category_.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "label": "API Reference", - "position": 4, - "link": { - "type": "generated-index", - "description": "API reference for macOS-specific props and events in React Native macOS." - }, - "collapsed": false -} diff --git a/docsite/docusaurus.config.ts b/docsite/docusaurus.config.ts index 3140529a8f9a5c..9d9f24e9897a06 100644 --- a/docsite/docusaurus.config.ts +++ b/docsite/docusaurus.config.ts @@ -47,6 +47,19 @@ const config: Config = { ], ], + plugins: [ + [ + '@docusaurus/plugin-content-docs', + { + id: 'api', + path: 'api', + routeBasePath: 'api', + sidebarPath: './sidebarsApi.ts', + editUrl: docsiteUrl + "/", + }, + ], + ], + themeConfig: { image: 'img/react-logo.svg', navbar: { @@ -62,6 +75,13 @@ const config: Config = { position: 'left', label: 'Docs', }, + { + type: 'docSidebar', + sidebarId: 'apiSidebar', + docsPluginId: 'api', + position: 'left', + label: 'API', + }, { label: "Blog", position: "right", diff --git a/docsite/sidebarsApi.ts b/docsite/sidebarsApi.ts new file mode 100644 index 00000000000000..aa2ca6fcd88871 --- /dev/null +++ b/docsite/sidebarsApi.ts @@ -0,0 +1,11 @@ +import type {SidebarsConfig} from '@docusaurus/plugin-content-docs'; + +const sidebars: SidebarsConfig = { + apiSidebar: [ + 'intro', + 'view-props', + 'view-events', + ], +}; + +export default sidebars; From 6e8848618162c71ccf72e603c3dbdc3cf0f7f8e1 Mon Sep 17 00:00:00 2001 From: Saad Najmi Date: Mon, 3 Nov 2025 10:48:38 -0800 Subject: [PATCH 4/4] edits --- docsite/api/intro.md | 9 +- docsite/api/view-events.md | 205 +++++++++++++++++-------------------- docsite/api/view-props.md | 14 +-- 3 files changed, 104 insertions(+), 124 deletions(-) diff --git a/docsite/api/intro.md b/docsite/api/intro.md index 353990352f80a5..06c07fd761812b 100644 --- a/docsite/api/intro.md +++ b/docsite/api/intro.md @@ -7,11 +7,4 @@ slug: / Welcome to the React Native macOS API reference documentation. This section covers macOS-specific props and events that extend the standard React Native components. -## View Component Extensions - -React Native macOS extends the standard View component with additional props and events designed specifically for macOS: - -- **[View Props](./view-props.md)** - macOS-specific properties for customizing view behavior -- **[View Events](./view-events.md)** - macOS-specific events for handling user interactions - -These extensions allow you to build truly native macOS experiences while leveraging the React Native framework. +Most of the additional functionality out of React Native macOS directly is in the form of additional props and callback events implemented on ``, to provide macOS and desktop specific behavior diff --git a/docsite/api/view-events.md b/docsite/api/view-events.md index e678829c86fa70..d4c1bf4a7fbe06 100644 --- a/docsite/api/view-events.md +++ b/docsite/api/view-events.md @@ -1,115 +1,30 @@ --- -sidebar_label: 'View Events (macOS)' +sidebar_label: 'Events' sidebar_position: 2 --- -# View Events (macOS) +# Events React Native macOS extends the standard React Native View component with additional events that are specific to macOS. These events allow you to respond to macOS-specific user interactions such as keyboard input, mouse movements, drag and drop operations, and more. -## Events +## Focus -### `onBlur` - -Fired when the view loses focus. - -**Event Data:** Standard focus event - -This event is useful for implementing custom focus management and validation logic when a view loses keyboard focus. - ---- - -### `onDoubleClick` - -Fired when the user double-clicks on the view. - -**Event Data:** Mouse event with the following properties: -- `clientX`: Horizontal position in the target view -- `clientY`: Vertical position in the target view -- `screenX`: Horizontal position in the window -- `screenY`: Vertical position in the window -- `altKey`: Whether Alt/Option key is pressed -- `ctrlKey`: Whether Control key is pressed -- `shiftKey`: Whether Shift key is pressed -- `metaKey`: Whether Command key is pressed - -Example: -```javascript - { - console.log('Double clicked at', event.nativeEvent.clientX, event.nativeEvent.clientY); -}}> - Double click me - -``` - ---- - -### `onDragEnter` - -Fired when a drag operation enters the view's bounds. - -**Event Data:** Drag event with mouse position and data transfer information - -This event is fired when the user drags content over the view. Use this to provide visual feedback that the view can accept the dragged content. - ---- - -### `onDragLeave` - -Fired when a drag operation leaves the view's bounds. +This event is useful for implementing custom focus management and showing focus-specific UI elements. For these to fire, the prop [focusable](view-props#focusable) must be set. -**Event Data:** Drag event with mouse position and data transfer information +### `onFocus` -This event is fired when the user drags content away from the view. Use this to remove any visual feedback shown during drag enter. +Fired when the view receives focus. --- -### `onDrop` - -Fired when the user drops content onto the view. - -**Event Data:** Drag event with the following properties: -- Mouse position (`clientX`, `clientY`, `screenX`, `screenY`) -- Modifier keys (`altKey`, `ctrlKey`, `shiftKey`, `metaKey`) -- `dataTransfer`: Object containing: - - `files`: Array of dropped files, each with: - - `name`: File name - - `type`: MIME type - - `uri`: File URI - - `size`: File size (optional) - - `width`: Image width (optional, for images) - - `height`: Image height (optional, for images) - - `items`: Array of data transfer items, each with: - - `kind`: Item kind (e.g., 'file', 'string') - - `type`: MIME type - - `types`: Array of available data types +### `onBlur` -Example: -```javascript - { - const files = event.nativeEvent.dataTransfer.files; - files.forEach(file => { - console.log('Dropped file:', file.name, file.uri); - }); - }} -> - Drop files here - -``` +Fired when the view loses focus. This is supported for all Views --- -### `onFocus` - -Fired when the view receives focus. - -**Event Data:** Standard focus event - -This event is useful for implementing custom focus management and showing focus-specific UI elements. ---- +## Keyboard ### `onKeyDown` @@ -134,10 +49,10 @@ Example: ```javascript { const { key, metaKey } = event.nativeEvent; if (key === 'Enter') { @@ -165,6 +80,8 @@ To receive key events, the view must have `focusable={true}` set, and you should --- +## Mouse + ### `onMouseEnter` Fired when the mouse cursor enters the view's bounds. @@ -209,6 +126,88 @@ Example: --- +### `onDoubleClick` + +Fired when the user double-clicks on the view. + +**Event Data:** Mouse event with the following properties: +- `clientX`: Horizontal position in the target view +- `clientY`: Vertical position in the target view +- `screenX`: Horizontal position in the window +- `screenY`: Vertical position in the window +- `altKey`: Whether Alt/Option key is pressed +- `ctrlKey`: Whether Control key is pressed +- `shiftKey`: Whether Shift key is pressed +- `metaKey`: Whether Command key is pressed + +Example: +```javascript + { + console.log('Double clicked at', event.nativeEvent.clientX, event.nativeEvent.clientY); +}}> + Double click me + +``` + +--- + +### `onDragEnter` + +Fired when a drag operation enters the view's bounds. + +**Event Data:** Drag event with mouse position and data transfer information + +This event is fired when the user drags content over the view. Use this to provide visual feedback that the view can accept the dragged content. + +--- + +### `onDragLeave` + +Fired when a drag operation leaves the view's bounds. + +**Event Data:** Drag event with mouse position and data transfer information + +This event is fired when the user drags content away from the view. Use this to remove any visual feedback shown during drag enter. + +--- + +### `onDrop` + +Fired when the user drops content onto the view. + +**Event Data:** Drag event with the following properties: +- Mouse position (`clientX`, `clientY`, `screenX`, `screenY`) +- Modifier keys (`altKey`, `ctrlKey`, `shiftKey`, `metaKey`) +- `dataTransfer`: Object containing: + - `files`: Array of dropped files, each with: + - `name`: File name + - `type`: MIME type + - `uri`: File URI + - `size`: File size (optional) + - `width`: Image width (optional, for images) + - `height`: Image height (optional, for images) + - `items`: Array of data transfer items, each with: + - `kind`: Item kind (e.g., 'file', 'string') + - `type`: MIME type + - `types`: Array of available data types + +Example: +```javascript + { + const files = event.nativeEvent.dataTransfer.files; + files.forEach(file => { + console.log('Dropped file:', file.name, file.uri); + }); + }} +> + Drop files here + +``` + +--- + ## Complete Example Here's a comprehensive example showing multiple macOS-specific events: @@ -262,14 +261,7 @@ function MacOSEventsExample() { ); } -const styles = StyleSheet.create({ - container: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - }, - interactiveView: { - width: 300, + height: 200, backgroundColor: 'white', borderWidth: 2, @@ -287,8 +279,3 @@ const styles = StyleSheet.create({ export default MacOSEventsExample; ``` - -## See Also - -- [View Props (macOS)](./view-props.md) - macOS-specific props for View components -- [React Native View Component](https://reactnative.dev/docs/view) - Base View component documentation diff --git a/docsite/api/view-props.md b/docsite/api/view-props.md index ffe161df2c7b2a..21bd3f35d67bc2 100644 --- a/docsite/api/view-props.md +++ b/docsite/api/view-props.md @@ -1,11 +1,11 @@ --- -sidebar_label: 'View Props (macOS)' +sidebar_label: 'Props' sidebar_position: 1 --- -# View Props (macOS) +# Props -React Native macOS extends the standard React Native View component with additional props that are specific to macOS. These props allow you to customize the behavior and appearance of views to take advantage of macOS-specific features. +React Native macOS extends the standard React Native `` component with additional props that are specific to macOS. These props allow you to customize the behavior and appearance of views to take advantage of macOS-specific features. ## Props @@ -29,7 +29,7 @@ Enables the vibrancy effect for the view, allowing it to blend with the content | ---- | ------- | | bool | `false` | -When `true`, the view will use macOS vibrancy effects, creating a translucent appearance that adapts to the content behind the window. +When `true`, the view will use macOS vibrancy effects, creating a translucent appearance that adapts to the content behind the window. This makes a difference when content is placed on top of a native [NSVisualEffectView](https://developer.apple.com/documentation/appkit/nsvisualeffectview), such as with the native module [VibrancyView](https://github.com/microsoft/fluentui-react-native/tree/main/packages/experimental/VibrancyView) --- @@ -41,7 +41,7 @@ Specifies the mouse cursor to display when hovering over the view. | ------ | | string | -Sets the cursor style. Common values include `'pointer'`, `'default'`, `'text'`, etc. +Sets the cursor style. This extends the React Native prop to support a larger range of the W3C cursor types supported on web. --- @@ -53,7 +53,7 @@ Specifies the types of dragged content that the view accepts for drag and drop o | --------------- | | array of string | -An array of UTI (Uniform Type Identifier) strings that the view will accept. For example: `['public.file-url', 'public.text']`. +An array of UTI (Uniform Type Identifier) strings that the view will accept. Currently supported: `['fileUrl', 'image', 'string']`. --- @@ -71,7 +71,7 @@ When `true`, macOS will draw the standard focus ring around the view when it rec ### `focusable` -Determines whether the view can receive keyboard focus. +Determines whether the view can receive keyboard focus. This prop has been extended from React Native Core to support all views. | Type | Default | | ---- | ------- |