@jobber/components-native 0.108.2 → 0.109.0

package/dist/docs/Select/Select.md

@@ -0,0 +1,987 @@
+# Select
+
+Select presents a defined list of options to choose from. It is a prop-driven,
+labelled dropdown wrapped in a field structure that handles the label,
+description, and error messaging for you.
+
+```tsx
+import React, { useState } from "react";
+import { Select } from "@jobber/components/Select";
+
+export function SelectBasicExample() {
+  const [value, setValue] = useState<string | undefined>("active");
+
+  return (
+    <Select label="Status" value={value} onValueChange={setValue}>
+      <Select.Item value="active">Active</Select.Item>
+      <Select.Item value="archived">Archived</Select.Item>
+      <Select.Item value="draft">Draft</Select.Item>
+    </Select>
+  );
+}
+```
+
+## Design & usage guidelines
+
+Use Select when a user needs to pick a single value from a known, reasonably
+short list of options. Each option is declared with `Select.Item`, where the
+`value` is submitted and the children are shown as the label.
+
+Select is controlled: pass the current `value` and an `onValueChange` handler to
+keep your state in sync.
+
+## Empty state
+
+The `label` doubles as the placeholder: while no value is selected it sits
+centered inside the field, then rises to a floating mini-label once the user
+picks an option. There is no separate `placeholder` prop — the label fills that
+role.
+
+```tsx
+import React, { useState } from "react";
+import { Select } from "@jobber/components/Select";
+
+export function SelectEmptyExample() {
+  const [value, setValue] = useState<string | undefined>();
+
+  return (
+    <Select label="Status" value={value} onValueChange={setValue}>
+      <Select.Item value="active">Active</Select.Item>
+      <Select.Item value="archived">Archived</Select.Item>
+      <Select.Item value="draft">Draft</Select.Item>
+    </Select>
+  );
+}
+```
+
+## Description
+
+Use `description` to add supporting help text beneath the field.
+
+```tsx
+import React, { useState } from "react";
+import { Select } from "@jobber/components/Select";
+
+export function SelectDescriptionExample() {
+  const [value, setValue] = useState<string | undefined>();
+
+  return (
+    <Select
+      label="Status"
+      description="This controls who can see the record."
+      value={value}
+      onValueChange={setValue}
+    >
+      <Select.Item value="active">Active</Select.Item>
+      <Select.Item value="archived">Archived</Select.Item>
+      <Select.Item value="draft">Draft</Select.Item>
+    </Select>
+  );
+}
+```
+
+## States
+
+### Error
+
+Pass an `error` message to mark the field invalid and show the message beneath
+the field. The error replaces the description while it is present. Use `invalid`
+instead to apply the invalid styling without a message — for example when a form
+library such as React Hook Form renders the error text itself.
+
+```tsx
+import React, { useState } from "react";
+import { Select } from "@jobber/components/Select";
+
+export function SelectErrorExample() {
+  const [value, setValue] = useState<string | undefined>();
+
+  return (
+    <Select
+      label="Status"
+      description="This controls who can see the record."
+      error="Please choose a status."
+      value={value}
+      onValueChange={setValue}
+    >
+      <Select.Item value="active">Active</Select.Item>
+      <Select.Item value="archived">Archived</Select.Item>
+      <Select.Item value="draft">Draft</Select.Item>
+    </Select>
+  );
+}
+```
+
+### Disabled
+
+Set `disabled` to prevent interaction with the field.
+
+```tsx
+import React from "react";
+import { Select } from "@jobber/components/Select";
+
+export function SelectDisabledExample() {
+  return (
+    <Select label="Status" disabled value="active">
+      <Select.Item value="active">Active</Select.Item>
+      <Select.Item value="archived">Archived</Select.Item>
+      <Select.Item value="draft">Draft</Select.Item>
+    </Select>
+  );
+}
+```
+
+## Grouping
+
+Organize related options under section headers with `Select.Group` and
+`Select.GroupLabel`. Adjacent groups are divided automatically, so you don't
+need to add a separator between them. `Select.Separator` is available for adding
+a divider elsewhere in the list.
+
+```tsx
+import React, { useState } from "react";
+import { Select } from "@jobber/components/Select";
+
+export function SelectGroupedExample() {
+  const [value, setValue] = useState<string | undefined>();
+
+  return (
+    <Select label="Produce" value={value} onValueChange={setValue}>
+      <Select.Group>
+        <Select.GroupLabel>Fruits</Select.GroupLabel>
+        <Select.Item value="apple">Apple</Select.Item>
+        <Select.Item value="banana">Banana</Select.Item>
+      </Select.Group>
+      <Select.Group>
+        <Select.GroupLabel>Vegetables</Select.GroupLabel>
+        <Select.Item value="carrot">Carrot</Select.Item>
+        <Select.Item value="spinach">Spinach</Select.Item>
+      </Select.Group>
+    </Select>
+  );
+}
+```
+
+## Custom selected value
+
+The closed trigger shows the selected value capitalized by default. Pass
+`renderValue` to display something different from the option's label — here the
+list shows short labels (`Low`, `Medium`, `High`) while the trigger shows the
+full `"High priority"`. The open list always shows each `Select.Item`'s
+children.
+
+```tsx
+import React, { useState } from "react";
+import { Select } from "@jobber/components/Select";
+
+const PRIORITY_LABELS: Record<string, string> = {
+  low: "Low priority",
+  medium: "Medium priority",
+  high: "High priority",
+};
+
+export function SelectRenderValueExample() {
+  const [value, setValue] = useState<string | undefined>("high");
+
+  return (
+    <Select
+      label="Priority"
+      value={value}
+      onValueChange={setValue}
+      renderValue={selected => PRIORITY_LABELS[selected]}
+    >
+      <Select.Item value="low">Low</Select.Item>
+      <Select.Item value="medium">Medium</Select.Item>
+      <Select.Item value="high">High</Select.Item>
+    </Select>
+  );
+}
+```
+
+## Sizes
+
+Use the `size` prop to render a `small` control for tighter layouts. The
+floating mini-label is hidden at the `small` size, so the compact control keeps
+a single-line height.
+
+```tsx
+import React, { useState } from "react";
+import { Select } from "@jobber/components/Select";
+
+export function SelectSizeExample() {
+  const [value, setValue] = useState<string | undefined>("active");
+
+  return (
+    <Select label="Status" size="small" value={value} onValueChange={setValue}>
+      <Select.Item value="active">Active</Select.Item>
+      <Select.Item value="archived">Archived</Select.Item>
+      <Select.Item value="draft">Draft</Select.Item>
+    </Select>
+  );
+}
+```
+
+## Inline
+
+Set `inline` to embed the Select within a line of text. The description and
+error messaging are suppressed in inline mode.
+
+```tsx
+import React, { useState } from "react";
+import { Select } from "@jobber/components/Select";
+
+export function SelectInlineExample() {
+  const [value, setValue] = useState<string | undefined>("active");
+
+  return (
+    <div>
+      Set the record to{" "}
+      <Select label="Status" inline value={value} onValueChange={setValue}>
+        <Select.Item value="active">Active</Select.Item>
+        <Select.Item value="archived">Archived</Select.Item>
+        <Select.Item value="draft">Draft</Select.Item>
+      </Select>{" "}
+      today.
+    </div>
+  );
+}
+```
+
+## Mobile
+
+On small (touch-sized) web screens — viewport widths of `490px` or less — the
+options open as a bottom sheet instead of an anchored dropdown, matching the
+mobile pattern used by `Menu` and `Dialog`. This is automatic and requires no
+props; selection, keyboard, and focus behaviour are unchanged. Resize the
+preview narrow (or open the examples above on a phone) to see the sheet.
+
+
+## Content
+
+### Options and labels
+
+Declare each option with `Select.Item`. The `value` prop is what `onValueChange`
+reports and what is submitted with a form; the children are the human-readable
+label shown in the open list.
+
+### The selected value display
+
+The closed trigger shows the selected **value**, capitalized by default (e.g.
+`"active"` → `"Active"`). It does not read the option's children — so when the
+label differs from the capitalized value, pass `renderValue` to control what the
+trigger shows:
+
+```tsx
+<Select
+  label="Status"
+  value={value}
+  onValueChange={setValue}
+  renderValue={value => STATUS_LABELS[value]}
+>
+  {/* Select.Item options */}
+</Select>
+```
+
+### Grouping
+
+* `Select.Group`: wraps a set of related options.
+* `Select.GroupLabel`: the section header text for a group.
+* `Select.Separator`: an optional visual divider. Adjacent `Select.Group`s are
+  already divided automatically, so reach for this only to divide options
+  elsewhere in the list.
+
+## Component customization
+
+Select is intentionally opinionated: it exposes a curated set of props rather
+than the full underlying API. The subcomponents (`Select.Item`, `Select.Group`,
+`Select.GroupLabel`, `Select.Separator`) accept `className` and `style` for
+per-option styling; reach out to UXF if you need behaviour beyond what the props
+provide.
+
+### Controlled usage
+
+Select is controlled only. Always pass `value` and `onValueChange`; there is no
+uncontrolled `defaultValue`. The `id` and `name` are generated for you and wired
+to the label automatically.
+
+The change handler is named `onValueChange` to stay isomorphic with Base UI, and
+to encode the payload (the value, not an event) in its name.
+
+### Using with a form library
+
+Select is form-library-agnostic — it exposes plain controlled props, so any
+system (React Hook Form, Formik, TanStack Form, or plain `useState`) drives it
+by wiring:
+
+* `value` — the current value
+* `onValueChange` — the library's value setter
+* `onBlur` / `onFocus` — touched state and blur/focus-mode validation
+* `error` (message) or `invalid` (styling only) — validation feedback
+* `ref` — exposes `focus()`, so a form can focus this field on error
+
+Because the change prop is `onValueChange` (not `onChange`), spreading a field
+object whose handler is named `onChange` — for example React Hook Form's `field`
+via `<Select {...field} />` — will **not** wire up the change handler.
+`field.onChange` lands on a prop nothing reads, and JSX spread does not error,
+so the field silently stops updating. Wire the props explicitly instead:
+
+```tsx
+<Controller
+  control={control}
+  name="status"
+  render={({ field }) => (
+    <Select
+      label="Status"
+      name={field.name}
+      value={field.value}
+      onValueChange={field.onChange}
+      onBlur={field.onBlur}
+      ref={field.ref}
+    >
+      {/* Select.Item options */}
+    </Select>
+  )}
+/>
+```
+
+If you want spread ergonomics, keep the remap in your own app — the design
+system intentionally ships no form-library adapter:
+
+```tsx
+// app-side helper, not part of @jobber/components
+const toValueField = ({ onChange, ...field }) => ({
+  ...field,
+  onValueChange: onChange,
+});
+
+<Select label="Status" {...toValueField(field)}>
+  {/* Select.Item options */}
+</Select>;
+```
+
+> **Note:** Select is built on Base UI's `Field` primitive, but it is not yet
+> wired to participate in a surrounding Base UI `<Form>` — the `Form` `errors`
+> prop and `Form`-driven focus-on-error do not reach Select. Drive validation
+> through the `error` / `invalid` props for now.
+
+## Related components
+
+* [LegacySelect](/components/LegacySelect): the previous native `<select>`-based
+  implementation.
+
+
+## Props
+
+### Mobile
+
+#### Option
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `children` | `string` | Yes | — | Text that shows up as the option |
+| `value` | `string` | Yes | — | The value that gets returned when an option is selected |
+
+#### Select
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `children` | `ReactElement<SelectOption, string | JSXElementConstructor<any>>[]` | Yes | — | The options to select from |
+| `accessibilityHint` | `string` | No | — | Helps users understand what will happen when they perform an action |
+| `accessibilityLabel` | `string` | No | — | VoiceOver will read this string when a user selects the element |
+| `assistiveText` | `string` | No | — | Help text shown below the control. |
+| `defaultValue` | `string` | No | — | Default value for when the component is uncontrolled |
+| `disabled` | `boolean` | No | — | Disables input selection |
+| `invalid` | `boolean` | No | — | Indicates the current selection is invalid |
+| `label` | `string` | No | — | Label text shown above the selection. |
+| `name` | `string` | No | — | Name of the input. |
+| `onChange` | `(newValue?: string) => void` | No | — | Callback that provides the new value when the selection changes |
+| `placeholder` | `string` | No | — | Adds a first option to let users select a "no value". Placeholder item selected by default until a selection is made. |
+| `testID` | `string` | No | — | Used to locate this view in end-to-end tests. |
+| `validations` | `RegisterOptions` | No | — | The validations that will mark this component as invalid |
+| `value` | `string` | No | — | Current value of the component |
+
+#### Select.Content
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `accessibilityActions` | `readonly Readonly<{ name: string; label?: string; }>[]` | No | — | Provides an array of custom actions available for accessibility. |
+| `accessibilityElementsHidden` | `boolean` | No | — | A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden ... |
+| `accessibilityHint` | `string` | No | — | An accessibility hint helps users understand what will happen when they perform an action on the accessibility elemen... |
+| `accessibilityIgnoresInvertColors` | `boolean` | No | — | https://reactnative.dev/docs/accessibility#accessibilityignoresinvertcolorsios @platform ios |
+| `accessibilityLabel` | `string` | No | — | Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label i... |
+| `accessibilityLabelledBy` | `string | string[]` | No | — | Identifies the element that labels the element it is applied to. When the assistive technology focuses on the compone... |
+| `accessibilityLanguage` | `string` | No | — | By using the accessibilityLanguage property, the screen reader will understand which language to use while reading th... |
+| `accessibilityLargeContentTitle` | `string` | No | — | When `accessibilityShowsLargeContentViewer` is set, this string will be used as title for the large content viewer. h... |
+| `accessibilityLiveRegion` | `"assertive" | "none" | "polite"` | No | — | Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API... |
+| `accessibilityRespondsToUserInteraction` | `boolean` | No | — | Blocks the user from interacting with the component through keyboard while still allowing screen reader to interact w... |
+| `accessibilityRole` | `AccessibilityRole` | No | — | Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on Android the type of element that is fo... |
+| `accessibilityShowsLargeContentViewer` | `boolean` | No | — | A Boolean value that indicates whether or not to show the item in the large content viewer. Available on iOS 13.0+ ht... |
+| `accessibilityState` | `AccessibilityState` | No | — | Accessibility State tells a person using either VoiceOver on iOS or TalkBack on Android the state of the element curr... |
+| `accessibilityValue` | `AccessibilityValue` | No | — | Represents the current value of a component. It can be a textual description of a component's value, or for range-bas... |
+| `accessibilityViewIsModal` | `boolean` | No | — | A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receive... |
+| `accessible` | `boolean` | No | — | When true, indicates that the view is an accessibility element. By default, all the touchable elements are accessible. |
+| `align` | `"center" | "end" | "start"` | No | — |  |
+| `alignOffset` | `number` | No | — |  |
+| `aria-busy` | `boolean` | No | — | alias for accessibilityState  see https://reactnative.dev/docs/accessibility#accessibilitystate |
+| `aria-checked` | `"mixed" | boolean` | No | — |  |
+| `aria-disabled` | `boolean` | No | — |  |
+| `aria-expanded` | `boolean` | No | — |  |
+| `aria-hidden` | `boolean` | No | — | A value indicating whether the accessibility elements contained within this accessibility element are hidden. |
+| `aria-label` | `string` | No | — | Alias for accessibilityLabel  https://reactnative.dev/docs/view#accessibilitylabel https://github.com/facebook/react-... |
+| `aria-labelledby` | `string` | No | — | Identifies the element that labels the element it is applied to. When the assistive technology focuses on the compone... |
+| `aria-live` | `"assertive" | "off" | "polite"` | No | — | Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API... |
+| `aria-modal` | `boolean` | No | — |  |
+| `aria-selected` | `boolean` | No | — |  |
+| `aria-valuemax` | `number` | No | — |  |
+| `aria-valuemin` | `number` | No | — |  |
+| `aria-valuenow` | `number` | No | — |  |
+| `aria-valuetext` | `string` | No | — |  |
+| `asChild` | `boolean` | No | — |  |
+| `avoidCollisions` | `boolean` | No | — |  |
+| `collapsable` | `boolean` | No | — | Views that are only used to layout their children or otherwise don't draw anything may be automatically removed from ... |
+| `collapsableChildren` | `boolean` | No | — | Setting to false prevents direct children of the view from being removed from the native view hierarchy, similar to t... |
+| `collisionBoundary` | `Element | Element[]` | No | — | Platform: WEB ONLY |
+| `disablePositioningStyle` | `boolean` | No | — | Platform: NATIVE ONLY |
+| `focusable` | `boolean` | No | — | Whether this `View` should be focusable with a non-touch input device, eg. receive focus with a hardware keyboard. |
+| `forceMount` | `true` | No | — |  |
+| `hasTVPreferredFocus` | `boolean` | No | — | *(Apple TV only)* May be set to true to force the Apple TV focus engine to move focus to this view. @platform ios @de... |
+| `hideWhenDetached` | `boolean` | No | — | Platform: WEB ONLY |
+| `hitSlop` | `Insets | number` | No | — | This defines how far a touch event can start away from the view. Typical interface guidelines recommend touch targets... |
+| `id` | `string` | No | — | Used to reference react managed views from native code. |
+| `importantForAccessibility` | `"auto" | "no" | "no-hide-descendants" | "yes"` | No | — | [Android] Controlling if a view fires accessibility events and if it is reported to accessibility services. |
+| `insets` | `Insets` | No | — |  |
+| `isTVSelectable` | `boolean` | No | — | *(Apple TV only)* When set to true, this view will be focusable and navigable using the Apple TV remote. @platform ios |
+| `loop` | `boolean` | No | — | Platform: WEB ONLY |
+| `nativeID` | `string` | No | — | Used to reference react managed views from native code. |
+| `needsOffscreenAlphaCompositing` | `boolean` | No | — | Whether this view needs to rendered offscreen and composited with an alpha in order to preserve 100% correct colors a... |
+| `onAccessibilityAction` | `(event: AccessibilityActionEvent) => void` | No | — | When `accessible` is true, the system will try to invoke this function when the user performs an accessibility custom... |
+| `onAccessibilityEscape` | `() => void` | No | — | When accessible is true, the system will invoke this function when the user performs the escape gesture (scrub with t... |
+| `onAccessibilityTap` | `() => void` | No | — | When `accessible` is true, the system will try to invoke this function when the user performs accessibility tap gestu... |
+| `onBlur` | `(e: BlurEvent) => void` | No | — | Callback that is called when the view is blurred.  Note: This will only be called if the view is focusable. |
+| `onCloseAutoFocus` | `(event: Event) => void` | No | — | Platform: WEB ONLY |
+| `onEscapeKeyDown` | `(event: KeyboardEvent) => void` | No | — | Platform: WEB ONLY |
+| `onFocus` | `(e: FocusEvent) => void` | No | — | Callback that is called when the view is focused.  Note: This will only be called if the view is focusable. |
+| `onFocusOutside` | `(event: FocusOutsideEvent) => void` | No | — | Platform: WEB ONLY |
+| `onInteractOutside` | `(event: PointerDownOutsideEvent | FocusOutsideEvent) => void` | No | — | Platform: WEB ONLY |
+| `onLayout` | `(event: LayoutChangeEvent) => void` | No | — | Invoked on mount and layout changes with  {nativeEvent: { layout: {x, y, width, height}}}. |
+| `onMagicTap` | `() => void` | No | — | When accessible is true, the system will invoke this function when the user performs the magic tap gesture. @platform... |
+| `onMoveShouldSetResponder` | `(event: GestureResponderEvent) => boolean` | No | — | Called for every touch move on the View when it is not the responder: does this view want to "claim" touch responsive... |
+| `onMoveShouldSetResponderCapture` | `(event: GestureResponderEvent) => boolean` | No | — | onStartShouldSetResponder and onMoveShouldSetResponder are called with a bubbling pattern, where the deepest node is ... |
+| `onPointerCancel` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerCancelCapture` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerDown` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerDownCapture` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerDownOutside` | `(event: PointerDownOutsideEvent) => void` | No | — | Platform: WEB ONLY |
+| `onPointerEnter` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerEnterCapture` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerLeave` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerLeaveCapture` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerMove` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerMoveCapture` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerUp` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerUpCapture` | `(event: PointerEvent) => void` | No | — |  |
+| `onResponderEnd` | `(event: GestureResponderEvent) => void` | No | — | If the View returns true and attempts to become the responder, one of the following will happen: |
+| `onResponderGrant` | `(event: GestureResponderEvent) => void` | No | — | The View is now responding for touch events. This is the time to highlight and show the user what is happening |
+| `onResponderMove` | `(event: GestureResponderEvent) => void` | No | — | The user is moving their finger |
+| `onResponderReject` | `(event: GestureResponderEvent) => void` | No | — | Something else is the responder right now and will not release it |
+| `onResponderRelease` | `(event: GestureResponderEvent) => void` | No | — | Fired at the end of the touch, ie "touchUp" |
+| `onResponderStart` | `(event: GestureResponderEvent) => void` | No | — |  |
+| `onResponderTerminate` | `(event: GestureResponderEvent) => void` | No | — | The responder has been taken from the View. Might be taken by other views after a call to onResponderTerminationReque... |
+| `onResponderTerminationRequest` | `(event: GestureResponderEvent) => boolean` | No | — | Something else wants to become responder. Should this view release the responder? Returning true allows release |
+| `onStartShouldSetResponder` | `(event: GestureResponderEvent) => boolean` | No | — | Does this view want to become responder on the start of a touch? |
+| `onStartShouldSetResponderCapture` | `(event: GestureResponderEvent) => boolean` | No | — | onStartShouldSetResponder and onMoveShouldSetResponder are called with a bubbling pattern, where the deepest node is ... |
+| `onTouchCancel` | `(event: GestureResponderEvent) => void` | No | — |  |
+| `onTouchEnd` | `(event: GestureResponderEvent) => void` | No | — |  |
+| `onTouchEndCapture` | `(event: GestureResponderEvent) => void` | No | — |  |
+| `onTouchMove` | `(event: GestureResponderEvent) => void` | No | — |  |
+| `onTouchStart` | `(event: GestureResponderEvent) => void` | No | — |  |
+| `pointerEvents` | `"auto" | "box-none" | "box-only" | "none"` | No | — | In the absence of auto property, none is much like CSS's none value. box-none is as if you had applied the CSS class:... |
+| `position` | `"item-aligned" | "popper"` | No | — | Platform: WEB ONLY |
+| `ref` | `Ref<View>` | No | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (... |
+| `removeClippedSubviews` | `boolean` | No | — | This is a special performance property exposed by RCTView and is useful for scrolling content when there are many sub... |
+| `renderToHardwareTextureAndroid` | `boolean` | No | — | Whether this view should render itself (and all of its children) into a single hardware texture on the GPU.  On Andro... |
+| `role` | `Role` | No | — | Indicates to accessibility services to treat UI component like a specific role. |
+| `screenReaderFocusable` | `boolean` | No | — | Enables the view to be screen reader focusable, not keyboard focusable. @platform android |
+| `shouldRasterizeIOS` | `boolean` | No | — | Whether this view should be rendered as a bitmap before compositing.  On iOS, this is useful for animations and inter... |
+| `side` | `"bottom" | "top"` | No | — |  |
+| `sideOffset` | `number` | No | — |  |
+| `sticky` | `"always" | "partial"` | No | — | Platform: WEB ONLY |
+| `style` | `StyleProp<ViewStyle>` | No | — |  |
+| `tabIndex` | `-1 | 0` | No | — | Indicates whether this `View` should be focusable with a non-touch input device, eg. receive focus with a hardware ke... |
+| `testID` | `string` | No | — | Used to locate this view in end-to-end tests. |
+| `tvParallaxMagnification` | `number` | No | — | *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out ... |
+| `tvParallaxShiftDistanceX` | `number` | No | — | *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out ... |
+| `tvParallaxShiftDistanceY` | `number` | No | — | *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out ... |
+| `tvParallaxTiltAngle` | `number` | No | — | *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out ... |
+
+#### Select.Group
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `accessibilityActions` | `readonly Readonly<{ name: string; label?: string; }>[]` | No | — | Provides an array of custom actions available for accessibility. |
+| `accessibilityElementsHidden` | `boolean` | No | — | A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden ... |
+| `accessibilityHint` | `string` | No | — | An accessibility hint helps users understand what will happen when they perform an action on the accessibility elemen... |
+| `accessibilityIgnoresInvertColors` | `boolean` | No | — | https://reactnative.dev/docs/accessibility#accessibilityignoresinvertcolorsios @platform ios |
+| `accessibilityLabel` | `string` | No | — | Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label i... |
+| `accessibilityLabelledBy` | `string | string[]` | No | — | Identifies the element that labels the element it is applied to. When the assistive technology focuses on the compone... |
+| `accessibilityLanguage` | `string` | No | — | By using the accessibilityLanguage property, the screen reader will understand which language to use while reading th... |
+| `accessibilityLargeContentTitle` | `string` | No | — | When `accessibilityShowsLargeContentViewer` is set, this string will be used as title for the large content viewer. h... |
+| `accessibilityLiveRegion` | `"assertive" | "none" | "polite"` | No | — | Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API... |
+| `accessibilityRespondsToUserInteraction` | `boolean` | No | — | Blocks the user from interacting with the component through keyboard while still allowing screen reader to interact w... |
+| `accessibilityRole` | `AccessibilityRole` | No | — | Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on Android the type of element that is fo... |
+| `accessibilityShowsLargeContentViewer` | `boolean` | No | — | A Boolean value that indicates whether or not to show the item in the large content viewer. Available on iOS 13.0+ ht... |
+| `accessibilityState` | `AccessibilityState` | No | — | Accessibility State tells a person using either VoiceOver on iOS or TalkBack on Android the state of the element curr... |
+| `accessibilityValue` | `AccessibilityValue` | No | — | Represents the current value of a component. It can be a textual description of a component's value, or for range-bas... |
+| `accessibilityViewIsModal` | `boolean` | No | — | A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receive... |
+| `accessible` | `boolean` | No | — | When true, indicates that the view is an accessibility element. By default, all the touchable elements are accessible. |
+| `aria-busy` | `boolean` | No | — | alias for accessibilityState  see https://reactnative.dev/docs/accessibility#accessibilitystate |
+| `aria-checked` | `"mixed" | boolean` | No | — |  |
+| `aria-disabled` | `boolean` | No | — |  |
+| `aria-expanded` | `boolean` | No | — |  |
+| `aria-hidden` | `boolean` | No | — | A value indicating whether the accessibility elements contained within this accessibility element are hidden. |
+| `aria-label` | `string` | No | — | Alias for accessibilityLabel  https://reactnative.dev/docs/view#accessibilitylabel https://github.com/facebook/react-... |
+| `aria-labelledby` | `string` | No | — | Identifies the element that labels the element it is applied to. When the assistive technology focuses on the compone... |
+| `aria-live` | `"assertive" | "off" | "polite"` | No | — | Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API... |
+| `aria-modal` | `boolean` | No | — |  |
+| `aria-selected` | `boolean` | No | — |  |
+| `aria-valuemax` | `number` | No | — |  |
+| `aria-valuemin` | `number` | No | — |  |
+| `aria-valuenow` | `number` | No | — |  |
+| `aria-valuetext` | `string` | No | — |  |
+| `asChild` | `boolean` | No | — |  |
+| `collapsable` | `boolean` | No | — | Views that are only used to layout their children or otherwise don't draw anything may be automatically removed from ... |
+| `collapsableChildren` | `boolean` | No | — | Setting to false prevents direct children of the view from being removed from the native view hierarchy, similar to t... |
+| `focusable` | `boolean` | No | — | Whether this `View` should be focusable with a non-touch input device, eg. receive focus with a hardware keyboard. |
+| `hasTVPreferredFocus` | `boolean` | No | — | *(Apple TV only)* May be set to true to force the Apple TV focus engine to move focus to this view. @platform ios @de... |
+| `hitSlop` | `Insets | number` | No | — | This defines how far a touch event can start away from the view. Typical interface guidelines recommend touch targets... |
+| `id` | `string` | No | — | Used to reference react managed views from native code. |
+| `importantForAccessibility` | `"auto" | "no" | "no-hide-descendants" | "yes"` | No | — | [Android] Controlling if a view fires accessibility events and if it is reported to accessibility services. |
+| `isTVSelectable` | `boolean` | No | — | *(Apple TV only)* When set to true, this view will be focusable and navigable using the Apple TV remote. @platform ios |
+| `nativeID` | `string` | No | — | Used to reference react managed views from native code. |
+| `needsOffscreenAlphaCompositing` | `boolean` | No | — | Whether this view needs to rendered offscreen and composited with an alpha in order to preserve 100% correct colors a... |
+| `onAccessibilityAction` | `(event: AccessibilityActionEvent) => void` | No | — | When `accessible` is true, the system will try to invoke this function when the user performs an accessibility custom... |
+| `onAccessibilityEscape` | `() => void` | No | — | When accessible is true, the system will invoke this function when the user performs the escape gesture (scrub with t... |
+| `onAccessibilityTap` | `() => void` | No | — | When `accessible` is true, the system will try to invoke this function when the user performs accessibility tap gestu... |
+| `onBlur` | `(e: BlurEvent) => void` | No | — | Callback that is called when the view is blurred.  Note: This will only be called if the view is focusable. |
+| `onFocus` | `(e: FocusEvent) => void` | No | — | Callback that is called when the view is focused.  Note: This will only be called if the view is focusable. |
+| `onLayout` | `(event: LayoutChangeEvent) => void` | No | — | Invoked on mount and layout changes with  {nativeEvent: { layout: {x, y, width, height}}}. |
+| `onMagicTap` | `() => void` | No | — | When accessible is true, the system will invoke this function when the user performs the magic tap gesture. @platform... |
+| `onMoveShouldSetResponder` | `(event: GestureResponderEvent) => boolean` | No | — | Called for every touch move on the View when it is not the responder: does this view want to "claim" touch responsive... |
+| `onMoveShouldSetResponderCapture` | `(event: GestureResponderEvent) => boolean` | No | — | onStartShouldSetResponder and onMoveShouldSetResponder are called with a bubbling pattern, where the deepest node is ... |
+| `onPointerCancel` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerCancelCapture` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerDown` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerDownCapture` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerEnter` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerEnterCapture` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerLeave` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerLeaveCapture` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerMove` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerMoveCapture` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerUp` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerUpCapture` | `(event: PointerEvent) => void` | No | — |  |
+| `onResponderEnd` | `(event: GestureResponderEvent) => void` | No | — | If the View returns true and attempts to become the responder, one of the following will happen: |
+| `onResponderGrant` | `(event: GestureResponderEvent) => void` | No | — | The View is now responding for touch events. This is the time to highlight and show the user what is happening |
+| `onResponderMove` | `(event: GestureResponderEvent) => void` | No | — | The user is moving their finger |
+| `onResponderReject` | `(event: GestureResponderEvent) => void` | No | — | Something else is the responder right now and will not release it |
+| `onResponderRelease` | `(event: GestureResponderEvent) => void` | No | — | Fired at the end of the touch, ie "touchUp" |
+| `onResponderStart` | `(event: GestureResponderEvent) => void` | No | — |  |
+| `onResponderTerminate` | `(event: GestureResponderEvent) => void` | No | — | The responder has been taken from the View. Might be taken by other views after a call to onResponderTerminationReque... |
+| `onResponderTerminationRequest` | `(event: GestureResponderEvent) => boolean` | No | — | Something else wants to become responder. Should this view release the responder? Returning true allows release |
+| `onStartShouldSetResponder` | `(event: GestureResponderEvent) => boolean` | No | — | Does this view want to become responder on the start of a touch? |
+| `onStartShouldSetResponderCapture` | `(event: GestureResponderEvent) => boolean` | No | — | onStartShouldSetResponder and onMoveShouldSetResponder are called with a bubbling pattern, where the deepest node is ... |
+| `onTouchCancel` | `(event: GestureResponderEvent) => void` | No | — |  |
+| `onTouchEnd` | `(event: GestureResponderEvent) => void` | No | — |  |
+| `onTouchEndCapture` | `(event: GestureResponderEvent) => void` | No | — |  |
+| `onTouchMove` | `(event: GestureResponderEvent) => void` | No | — |  |
+| `onTouchStart` | `(event: GestureResponderEvent) => void` | No | — |  |
+| `pointerEvents` | `"auto" | "box-none" | "box-only" | "none"` | No | — | In the absence of auto property, none is much like CSS's none value. box-none is as if you had applied the CSS class:... |
+| `ref` | `Ref<View>` | No | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (... |
+| `removeClippedSubviews` | `boolean` | No | — | This is a special performance property exposed by RCTView and is useful for scrolling content when there are many sub... |
+| `renderToHardwareTextureAndroid` | `boolean` | No | — | Whether this view should render itself (and all of its children) into a single hardware texture on the GPU.  On Andro... |
+| `role` | `Role` | No | — | Indicates to accessibility services to treat UI component like a specific role. |
+| `screenReaderFocusable` | `boolean` | No | — | Enables the view to be screen reader focusable, not keyboard focusable. @platform android |
+| `shouldRasterizeIOS` | `boolean` | No | — | Whether this view should be rendered as a bitmap before compositing.  On iOS, this is useful for animations and inter... |
+| `style` | `StyleProp<ViewStyle>` | No | — |  |
+| `tabIndex` | `-1 | 0` | No | — | Indicates whether this `View` should be focusable with a non-touch input device, eg. receive focus with a hardware ke... |
+| `testID` | `string` | No | — | Used to locate this view in end-to-end tests. |
+| `tvParallaxMagnification` | `number` | No | — | *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out ... |
+| `tvParallaxShiftDistanceX` | `number` | No | — | *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out ... |
+| `tvParallaxShiftDistanceY` | `number` | No | — | *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out ... |
+| `tvParallaxTiltAngle` | `number` | No | — | *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out ... |
+
+#### Select.GroupLabel
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `accessibilityActions` | `readonly Readonly<{ name: string; label?: string; }>[]` | No | — | Provides an array of custom actions available for accessibility. |
+| `accessibilityElementsHidden` | `boolean` | No | — | A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden ... |
+| `accessibilityHint` | `string` | No | — | An accessibility hint helps users understand what will happen when they perform an action on the accessibility elemen... |
+| `accessibilityIgnoresInvertColors` | `boolean` | No | — | https://reactnative.dev/docs/accessibility#accessibilityignoresinvertcolorsios @platform ios |
+| `accessibilityLabel` | `string` | No | — | Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label i... |
+| `accessibilityLabelledBy` | `string | string[]` | No | — | Identifies the element that labels the element it is applied to. When the assistive technology focuses on the compone... |
+| `accessibilityLanguage` | `string` | No | — | By using the accessibilityLanguage property, the screen reader will understand which language to use while reading th... |
+| `accessibilityLargeContentTitle` | `string` | No | — | When `accessibilityShowsLargeContentViewer` is set, this string will be used as title for the large content viewer. h... |
+| `accessibilityLiveRegion` | `"assertive" | "none" | "polite"` | No | — | Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API... |
+| `accessibilityRespondsToUserInteraction` | `boolean` | No | — | Blocks the user from interacting with the component through keyboard while still allowing screen reader to interact w... |
+| `accessibilityRole` | `AccessibilityRole` | No | — | Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on Android the type of element that is fo... |
+| `accessibilityShowsLargeContentViewer` | `boolean` | No | — | A Boolean value that indicates whether or not to show the item in the large content viewer. Available on iOS 13.0+ ht... |
+| `accessibilityState` | `AccessibilityState` | No | — | Accessibility State tells a person using either VoiceOver on iOS or TalkBack on Android the state of the element curr... |
+| `accessibilityValue` | `AccessibilityValue` | No | — | Represents the current value of a component. It can be a textual description of a component's value, or for range-bas... |
+| `accessibilityViewIsModal` | `boolean` | No | — | A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receive... |
+| `accessible` | `boolean` | No | — | When true, indicates that the view is an accessibility element. By default, all the touchable elements are accessible. |
+| `adjustsFontSizeToFit` | `boolean` | No | — | Specifies whether font should be scaled down automatically to fit given style constraints. |
+| `allowFontScaling` | `boolean` | No | — | Specifies whether fonts should scale to respect Text Size accessibility settings. The default is `true`. |
+| `android_hyphenationFrequency` | `"full" | "none" | "normal"` | No | — | Hyphenation strategy |
+| `aria-busy` | `boolean` | No | — | alias for accessibilityState  see https://reactnative.dev/docs/accessibility#accessibilitystate |
+| `aria-checked` | `"mixed" | boolean` | No | — |  |
+| `aria-disabled` | `boolean` | No | — |  |
+| `aria-expanded` | `boolean` | No | — |  |
+| `aria-hidden` | `boolean` | No | — | A value indicating whether the accessibility elements contained within this accessibility element are hidden. |
+| `aria-label` | `string` | No | — | Alias for accessibilityLabel  https://reactnative.dev/docs/view#accessibilitylabel https://github.com/facebook/react-... |
+| `aria-labelledby` | `string` | No | — | Identifies the element that labels the element it is applied to. When the assistive technology focuses on the compone... |
+| `aria-live` | `"assertive" | "off" | "polite"` | No | — | Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API... |
+| `aria-modal` | `boolean` | No | — |  |
+| `aria-selected` | `boolean` | No | — |  |
+| `aria-valuemax` | `number` | No | — |  |
+| `aria-valuemin` | `number` | No | — |  |
+| `aria-valuenow` | `number` | No | — |  |
+| `aria-valuetext` | `string` | No | — |  |
+| `asChild` | `boolean` | No | — |  |
+| `dataDetectorType` | `"all" | "email" | "link" | "none" | "phoneNumber"` | No | — | Determines the types of data converted to clickable URLs in the text element. By default no data types are detected. |
+| `disabled` | `boolean` | No | — | Specifies the disabled state of the text view for testing purposes. |
+| `dynamicTypeRamp` | `"body" | "callout" | "caption1" | "caption2" | "footnote" | "headline" | "largeTitle" | "subheadline" | "title1" | "title2" | "title3"` | No | — | The Dynamic Type scale ramp to apply to this element on iOS. |
+| `ellipsizeMode` | `"clip" | "head" | "middle" | "tail"` | No | — | This can be one of the following values:  - `head` - The line is displayed so that the end fits in the container and ... |
+| `id` | `string` | No | — | Used to reference react managed views from native code. |
+| `importantForAccessibility` | `"auto" | "no" | "no-hide-descendants" | "yes"` | No | — | [Android] Controlling if a view fires accessibility events and if it is reported to accessibility services. |
+| `lineBreakMode` | `"clip" | "head" | "middle" | "tail"` | No | — | Line Break mode. Works only with numberOfLines. clip is working only for iOS |
+| `lineBreakStrategyIOS` | `"hangul-word" | "none" | "push-out" | "standard"` | No | — | Set line break strategy on iOS. |
+| `maxFontSizeMultiplier` | `number` | No | — | Specifies largest possible scale a font can reach when allowFontScaling is enabled. Possible values: - null/undefined... |
+| `minimumFontScale` | `number` | No | — | Specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0). |
+| `nativeID` | `string` | No | — | Used to reference react managed views from native code. |
+| `numberOfLines` | `number` | No | — | Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the to... |
+| `onAccessibilityAction` | `(event: AccessibilityActionEvent) => void` | No | — | When `accessible` is true, the system will try to invoke this function when the user performs an accessibility custom... |
+| `onAccessibilityEscape` | `() => void` | No | — | When accessible is true, the system will invoke this function when the user performs the escape gesture (scrub with t... |
+| `onAccessibilityTap` | `() => void` | No | — | When `accessible` is true, the system will try to invoke this function when the user performs accessibility tap gestu... |
+| `onLayout` | `(event: LayoutChangeEvent) => void` | No | — | Invoked on mount and layout changes with  {nativeEvent: { layout: {x, y, width, height}}}. |
+| `onLongPress` | `(event: GestureResponderEvent) => void` | No | — | This function is called on long press. e.g., `onLongPress={this.increaseSize}>` |
+| `onMagicTap` | `() => void` | No | — | When accessible is true, the system will invoke this function when the user performs the magic tap gesture. @platform... |
+| `onPress` | `(event: GestureResponderEvent) => void` | No | — | This function is called on press. Text intrinsically supports press handling with a default highlight state (which ca... |
+| `onPressIn` | `(event: GestureResponderEvent) => void` | No | — |  |
+| `onPressOut` | `(event: GestureResponderEvent) => void` | No | — |  |
+| `onTextLayout` | `(event: TextLayoutEvent) => void` | No | — | Invoked on Text layout |
+| `pointerEvents` | `"auto" | "box-none" | "box-only" | "none"` | No | — | Controls how touch events are handled. Similar to `View`'s `pointerEvents`. |
+| `pressRetentionOffset` | `{ top: number; left: number; bottom: number; right: number; }` | No | — | Defines how far your touch may move off of the button, before deactivating the button. |
+| `ref` | `Ref<View>` | No | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (... |
+| `role` | `Role` | No | — | Indicates to accessibility services to treat UI component like a specific role. |
+| `screenReaderFocusable` | `boolean` | No | — | Enables the view to be screen reader focusable, not keyboard focusable. @platform android |
+| `selectable` | `boolean` | No | — | Lets the user select text, to use the native copy and paste functionality. |
+| `selectionColor` | `ColorValue` | No | — | The highlight color of the text. |
+| `style` | `StyleProp<TextStyle>` | No | — | @see https://reactnative.dev/docs/text#style |
+| `suppressHighlighting` | `boolean` | No | — | When `true`, no visual change is made when text is pressed down. By default, a gray oval highlights the text on press... |
+| `testID` | `string` | No | — | Used to locate this view in end-to-end tests. |
+| `textBreakStrategy` | `"balanced" | "highQuality" | "simple"` | No | — | Set text break strategy on Android API Level 23+ default is `highQuality`. |
+
+#### Select.Item
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `label` | `string` | Yes | — | The option's label — rendered as the row text and used as the value label. |
+| `value` | `string` | Yes | — | The option's value. |
+| `closeOnPress` | `boolean` | No | — | Close the dropdown when this option is pressed (default behaviour). |
+| `disabled` | `boolean` | No | — | Disables selection and greys the label. |
+| `indicator` | `ReactNode` | No | — | Overrides the default checkmark marker shown on the selected row. |
+| `prefix` | `ReactNode` | No | — | Leading content, before the label — typically a `Select.ItemPrefix`. |
+| `suffix` | `ReactNode` | No | — | Trailing content, after the label — typically a `Select.ItemSuffix`. |
+
+#### Select.Label
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `children` | `ReactNode` | No | — | The label content. Its placement (above the trigger vs. inside it) is set by the `labelPlacement` prop on `Select.Roo... |
+
+#### Select.Root
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `accessibilityActions` | `readonly Readonly<{ name: string; label?: string; }>[]` | No | — | Provides an array of custom actions available for accessibility. |
+| `accessibilityElementsHidden` | `boolean` | No | — | A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden ... |
+| `accessibilityHint` | `string` | No | — | An accessibility hint helps users understand what will happen when they perform an action on the accessibility elemen... |
+| `accessibilityIgnoresInvertColors` | `boolean` | No | — | https://reactnative.dev/docs/accessibility#accessibilityignoresinvertcolorsios @platform ios |
+| `accessibilityLabel` | `string` | No | — | Explicit accessible name for the trigger. Auto-derived from a string `Select.Label`; supply this when the label conte... |
+| `accessibilityLabelledBy` | `string | string[]` | No | — | Identifies the element that labels the element it is applied to. When the assistive technology focuses on the compone... |
+| `accessibilityLanguage` | `string` | No | — | By using the accessibilityLanguage property, the screen reader will understand which language to use while reading th... |
+| `accessibilityLargeContentTitle` | `string` | No | — | When `accessibilityShowsLargeContentViewer` is set, this string will be used as title for the large content viewer. h... |
+| `accessibilityLiveRegion` | `"assertive" | "none" | "polite"` | No | — | Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API... |
+| `accessibilityRespondsToUserInteraction` | `boolean` | No | — | Blocks the user from interacting with the component through keyboard while still allowing screen reader to interact w... |
+| `accessibilityRole` | `AccessibilityRole` | No | — | Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on Android the type of element that is fo... |
+| `accessibilityShowsLargeContentViewer` | `boolean` | No | — | A Boolean value that indicates whether or not to show the item in the large content viewer. Available on iOS 13.0+ ht... |
+| `accessibilityState` | `AccessibilityState` | No | — | Accessibility State tells a person using either VoiceOver on iOS or TalkBack on Android the state of the element curr... |
+| `accessibilityValue` | `AccessibilityValue` | No | — | Represents the current value of a component. It can be a textual description of a component's value, or for range-bas... |
+| `accessibilityViewIsModal` | `boolean` | No | — | A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receive... |
+| `accessible` | `boolean` | No | — | When true, indicates that the view is an accessibility element. By default, all the touchable elements are accessible. |
+| `aria-busy` | `boolean` | No | — | alias for accessibilityState  see https://reactnative.dev/docs/accessibility#accessibilitystate |
+| `aria-checked` | `"mixed" | boolean` | No | — |  |
+| `aria-disabled` | `boolean` | No | — |  |
+| `aria-expanded` | `boolean` | No | — |  |
+| `aria-hidden` | `boolean` | No | — | A value indicating whether the accessibility elements contained within this accessibility element are hidden. |
+| `aria-label` | `string` | No | — | Alias for accessibilityLabel  https://reactnative.dev/docs/view#accessibilitylabel https://github.com/facebook/react-... |
+| `aria-labelledby` | `string` | No | — | Identifies the element that labels the element it is applied to. When the assistive technology focuses on the compone... |
+| `aria-live` | `"assertive" | "off" | "polite"` | No | — | Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API... |
+| `aria-modal` | `boolean` | No | — |  |
+| `aria-selected` | `boolean` | No | — |  |
+| `aria-valuemax` | `number` | No | — |  |
+| `aria-valuemin` | `number` | No | — |  |
+| `aria-valuenow` | `number` | No | — |  |
+| `aria-valuetext` | `string` | No | — |  |
+| `asChild` | `boolean` | No | — |  |
+| `collapsable` | `boolean` | No | — | Views that are only used to layout their children or otherwise don't draw anything may be automatically removed from ... |
+| `collapsableChildren` | `boolean` | No | — | Setting to false prevents direct children of the view from being removed from the native view hierarchy, similar to t... |
+| `defaultValue` | `{ value: string; label: string; }` | No | — |  |
+| `description` | `ReactNode` | No | — | Supporting text rendered below the trigger. A string renders as neutral `HelperText`; a `ReactNode` renders verbatim.... |
+| `dir` | `"ltr" | "rtl"` | No | — | Platform: WEB ONLY |
+| `disabled` | `boolean` | No | — |  |
+| `error` | `ReactNode` | No | — | Error message rendered below the trigger as critical `HelperText` (string) or verbatim (`ReactNode`). Takes priority ... |
+| `focusable` | `boolean` | No | — | Whether this `View` should be focusable with a non-touch input device, eg. receive focus with a hardware keyboard. |
+| `hasTVPreferredFocus` | `boolean` | No | — | *(Apple TV only)* May be set to true to force the Apple TV focus engine to move focus to this view. @platform ios @de... |
+| `hitSlop` | `Insets | number` | No | — | This defines how far a touch event can start away from the view. Typical interface guidelines recommend touch targets... |
+| `id` | `string` | No | — | Used to reference react managed views from native code. |
+| `importantForAccessibility` | `"auto" | "no" | "no-hide-descendants" | "yes"` | No | — | [Android] Controlling if a view fires accessibility events and if it is reported to accessibility services. |
+| `invalid` | `boolean` | No | — | Applies the critical trigger styling without rendering an error message. |
+| `isTVSelectable` | `boolean` | No | — | *(Apple TV only)* When set to true, this view will be focusable and navigable using the Apple TV remote. @platform ios |
+| `labelPlacement` | `"above" | "inside"` | No | `inside` | Where the field label renders: `"inside"` the trigger (small, above the value) or `"above"` it. DS-owned default (`"i... |
+| `name` | `string` | No | — | Platform: WEB ONLY |
+| `nativeID` | `string` | No | — | Used to reference react managed views from native code. |
+| `needsOffscreenAlphaCompositing` | `boolean` | No | — | Whether this view needs to rendered offscreen and composited with an alpha in order to preserve 100% correct colors a... |
+| `onAccessibilityAction` | `(event: AccessibilityActionEvent) => void` | No | — | When `accessible` is true, the system will try to invoke this function when the user performs an accessibility custom... |
+| `onAccessibilityEscape` | `() => void` | No | — | When accessible is true, the system will invoke this function when the user performs the escape gesture (scrub with t... |
+| `onAccessibilityTap` | `() => void` | No | — | When `accessible` is true, the system will try to invoke this function when the user performs accessibility tap gestu... |
+| `onBlur` | `(e: BlurEvent) => void` | No | — | Callback that is called when the view is blurred.  Note: This will only be called if the view is focusable. |
+| `onFocus` | `(e: FocusEvent) => void` | No | — | Callback that is called when the view is focused.  Note: This will only be called if the view is focusable. |
+| `onLayout` | `(event: LayoutChangeEvent) => void` | No | — | Invoked on mount and layout changes with  {nativeEvent: { layout: {x, y, width, height}}}. |
+| `onMagicTap` | `() => void` | No | — | When accessible is true, the system will invoke this function when the user performs the magic tap gesture. @platform... |
+| `onMoveShouldSetResponder` | `(event: GestureResponderEvent) => boolean` | No | — | Called for every touch move on the View when it is not the responder: does this view want to "claim" touch responsive... |
+| `onMoveShouldSetResponderCapture` | `(event: GestureResponderEvent) => boolean` | No | — | onStartShouldSetResponder and onMoveShouldSetResponder are called with a bubbling pattern, where the deepest node is ... |
+| `onOpenChange` | `(open: boolean) => void` | No | — |  |
+| `onPointerCancel` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerCancelCapture` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerDown` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerDownCapture` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerEnter` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerEnterCapture` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerLeave` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerLeaveCapture` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerMove` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerMoveCapture` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerUp` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerUpCapture` | `(event: PointerEvent) => void` | No | — |  |
+| `onResponderEnd` | `(event: GestureResponderEvent) => void` | No | — | If the View returns true and attempts to become the responder, one of the following will happen: |
+| `onResponderGrant` | `(event: GestureResponderEvent) => void` | No | — | The View is now responding for touch events. This is the time to highlight and show the user what is happening |
+| `onResponderMove` | `(event: GestureResponderEvent) => void` | No | — | The user is moving their finger |
+| `onResponderReject` | `(event: GestureResponderEvent) => void` | No | — | Something else is the responder right now and will not release it |
+| `onResponderRelease` | `(event: GestureResponderEvent) => void` | No | — | Fired at the end of the touch, ie "touchUp" |
+| `onResponderStart` | `(event: GestureResponderEvent) => void` | No | — |  |
+| `onResponderTerminate` | `(event: GestureResponderEvent) => void` | No | — | The responder has been taken from the View. Might be taken by other views after a call to onResponderTerminationReque... |
+| `onResponderTerminationRequest` | `(event: GestureResponderEvent) => boolean` | No | — | Something else wants to become responder. Should this view release the responder? Returning true allows release |
+| `onStartShouldSetResponder` | `(event: GestureResponderEvent) => boolean` | No | — | Does this view want to become responder on the start of a touch? |
+| `onStartShouldSetResponderCapture` | `(event: GestureResponderEvent) => boolean` | No | — | onStartShouldSetResponder and onMoveShouldSetResponder are called with a bubbling pattern, where the deepest node is ... |
+| `onTouchCancel` | `(event: GestureResponderEvent) => void` | No | — |  |
+| `onTouchEnd` | `(event: GestureResponderEvent) => void` | No | — |  |
+| `onTouchEndCapture` | `(event: GestureResponderEvent) => void` | No | — |  |
+| `onTouchMove` | `(event: GestureResponderEvent) => void` | No | — |  |
+| `onTouchStart` | `(event: GestureResponderEvent) => void` | No | — |  |
+| `onValueChange` | `(option: { value: string; label: string; }) => void` | No | — |  |
+| `pointerEvents` | `"auto" | "box-none" | "box-only" | "none"` | No | — | In the absence of auto property, none is much like CSS's none value. box-none is as if you had applied the CSS class:... |
+| `readOnly` | `boolean` | No | — | Renders the trigger as non-interactive read-only presentation (subtle surface, no chevron, value as text). `disabled`... |
+| `removeClippedSubviews` | `boolean` | No | — | This is a special performance property exposed by RCTView and is useful for scrolling content when there are many sub... |
+| `renderToHardwareTextureAndroid` | `boolean` | No | — | Whether this view should render itself (and all of its children) into a single hardware texture on the GPU.  On Andro... |
+| `required` | `boolean` | No | — | Platform: WEB ONLY |
+| `role` | `Role` | No | — | Indicates to accessibility services to treat UI component like a specific role. |
+| `screenReaderFocusable` | `boolean` | No | — | Enables the view to be screen reader focusable, not keyboard focusable. @platform android |
+| `shouldRasterizeIOS` | `boolean` | No | — | Whether this view should be rendered as a bitmap before compositing.  On iOS, this is useful for animations and inter... |
+| `status` | `"critical" | "neutral"` | No | — | `critical` applies the critical trigger styling. Defaults to `neutral`. |
+| `style` | `StyleProp<ViewStyle>` | No | — |  |
+| `tabIndex` | `-1 | 0` | No | — | Indicates whether this `View` should be focusable with a non-touch input device, eg. receive focus with a hardware ke... |
+| `testID` | `string` | No | — | Used to locate this view in end-to-end tests. |
+| `tvParallaxMagnification` | `number` | No | — | *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out ... |
+| `tvParallaxShiftDistanceX` | `number` | No | — | *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out ... |
+| `tvParallaxShiftDistanceY` | `number` | No | — | *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out ... |
+| `tvParallaxTiltAngle` | `number` | No | — | *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out ... |
+| `value` | `{ value: string; label: string; }` | No | — |  |
+
+#### Select.Separator
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `accessibilityActions` | `readonly Readonly<{ name: string; label?: string; }>[]` | No | — | Provides an array of custom actions available for accessibility. |
+| `accessibilityElementsHidden` | `boolean` | No | — | A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden ... |
+| `accessibilityHint` | `string` | No | — | An accessibility hint helps users understand what will happen when they perform an action on the accessibility elemen... |
+| `accessibilityIgnoresInvertColors` | `boolean` | No | — | https://reactnative.dev/docs/accessibility#accessibilityignoresinvertcolorsios @platform ios |
+| `accessibilityLabel` | `string` | No | — | Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label i... |
+| `accessibilityLabelledBy` | `string | string[]` | No | — | Identifies the element that labels the element it is applied to. When the assistive technology focuses on the compone... |
+| `accessibilityLanguage` | `string` | No | — | By using the accessibilityLanguage property, the screen reader will understand which language to use while reading th... |
+| `accessibilityLargeContentTitle` | `string` | No | — | When `accessibilityShowsLargeContentViewer` is set, this string will be used as title for the large content viewer. h... |
+| `accessibilityLiveRegion` | `"assertive" | "none" | "polite"` | No | — | Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API... |
+| `accessibilityRespondsToUserInteraction` | `boolean` | No | — | Blocks the user from interacting with the component through keyboard while still allowing screen reader to interact w... |
+| `accessibilityRole` | `AccessibilityRole` | No | — | Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on Android the type of element that is fo... |
+| `accessibilityShowsLargeContentViewer` | `boolean` | No | — | A Boolean value that indicates whether or not to show the item in the large content viewer. Available on iOS 13.0+ ht... |
+| `accessibilityState` | `AccessibilityState` | No | — | Accessibility State tells a person using either VoiceOver on iOS or TalkBack on Android the state of the element curr... |
+| `accessibilityValue` | `AccessibilityValue` | No | — | Represents the current value of a component. It can be a textual description of a component's value, or for range-bas... |
+| `accessibilityViewIsModal` | `boolean` | No | — | A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receive... |
+| `accessible` | `boolean` | No | — | When true, indicates that the view is an accessibility element. By default, all the touchable elements are accessible. |
+| `aria-busy` | `boolean` | No | — | alias for accessibilityState  see https://reactnative.dev/docs/accessibility#accessibilitystate |
+| `aria-checked` | `"mixed" | boolean` | No | — |  |
+| `aria-disabled` | `boolean` | No | — |  |
+| `aria-expanded` | `boolean` | No | — |  |
+| `aria-hidden` | `boolean` | No | — | A value indicating whether the accessibility elements contained within this accessibility element are hidden. |
+| `aria-label` | `string` | No | — | Alias for accessibilityLabel  https://reactnative.dev/docs/view#accessibilitylabel https://github.com/facebook/react-... |
+| `aria-labelledby` | `string` | No | — | Identifies the element that labels the element it is applied to. When the assistive technology focuses on the compone... |
+| `aria-live` | `"assertive" | "off" | "polite"` | No | — | Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API... |
+| `aria-modal` | `boolean` | No | — |  |
+| `aria-selected` | `boolean` | No | — |  |
+| `aria-valuemax` | `number` | No | — |  |
+| `aria-valuemin` | `number` | No | — |  |
+| `aria-valuenow` | `number` | No | — |  |
+| `aria-valuetext` | `string` | No | — |  |
+| `asChild` | `boolean` | No | — |  |
+| `collapsable` | `boolean` | No | — | Views that are only used to layout their children or otherwise don't draw anything may be automatically removed from ... |
+| `collapsableChildren` | `boolean` | No | — | Setting to false prevents direct children of the view from being removed from the native view hierarchy, similar to t... |
+| `decorative` | `boolean` | No | — |  |
+| `focusable` | `boolean` | No | — | Whether this `View` should be focusable with a non-touch input device, eg. receive focus with a hardware keyboard. |
+| `hasTVPreferredFocus` | `boolean` | No | — | *(Apple TV only)* May be set to true to force the Apple TV focus engine to move focus to this view. @platform ios @de... |
+| `hitSlop` | `Insets | number` | No | — | This defines how far a touch event can start away from the view. Typical interface guidelines recommend touch targets... |
+| `id` | `string` | No | — | Used to reference react managed views from native code. |
+| `importantForAccessibility` | `"auto" | "no" | "no-hide-descendants" | "yes"` | No | — | [Android] Controlling if a view fires accessibility events and if it is reported to accessibility services. |
+| `isTVSelectable` | `boolean` | No | — | *(Apple TV only)* When set to true, this view will be focusable and navigable using the Apple TV remote. @platform ios |
+| `nativeID` | `string` | No | — | Used to reference react managed views from native code. |
+| `needsOffscreenAlphaCompositing` | `boolean` | No | — | Whether this view needs to rendered offscreen and composited with an alpha in order to preserve 100% correct colors a... |
+| `onAccessibilityAction` | `(event: AccessibilityActionEvent) => void` | No | — | When `accessible` is true, the system will try to invoke this function when the user performs an accessibility custom... |
+| `onAccessibilityEscape` | `() => void` | No | — | When accessible is true, the system will invoke this function when the user performs the escape gesture (scrub with t... |
+| `onAccessibilityTap` | `() => void` | No | — | When `accessible` is true, the system will try to invoke this function when the user performs accessibility tap gestu... |
+| `onBlur` | `(e: BlurEvent) => void` | No | — | Callback that is called when the view is blurred.  Note: This will only be called if the view is focusable. |
+| `onFocus` | `(e: FocusEvent) => void` | No | — | Callback that is called when the view is focused.  Note: This will only be called if the view is focusable. |
+| `onLayout` | `(event: LayoutChangeEvent) => void` | No | — | Invoked on mount and layout changes with  {nativeEvent: { layout: {x, y, width, height}}}. |
+| `onMagicTap` | `() => void` | No | — | When accessible is true, the system will invoke this function when the user performs the magic tap gesture. @platform... |
+| `onMoveShouldSetResponder` | `(event: GestureResponderEvent) => boolean` | No | — | Called for every touch move on the View when it is not the responder: does this view want to "claim" touch responsive... |
+| `onMoveShouldSetResponderCapture` | `(event: GestureResponderEvent) => boolean` | No | — | onStartShouldSetResponder and onMoveShouldSetResponder are called with a bubbling pattern, where the deepest node is ... |
+| `onPointerCancel` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerCancelCapture` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerDown` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerDownCapture` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerEnter` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerEnterCapture` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerLeave` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerLeaveCapture` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerMove` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerMoveCapture` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerUp` | `(event: PointerEvent) => void` | No | — |  |
+| `onPointerUpCapture` | `(event: PointerEvent) => void` | No | — |  |
+| `onResponderEnd` | `(event: GestureResponderEvent) => void` | No | — | If the View returns true and attempts to become the responder, one of the following will happen: |
+| `onResponderGrant` | `(event: GestureResponderEvent) => void` | No | — | The View is now responding for touch events. This is the time to highlight and show the user what is happening |
+| `onResponderMove` | `(event: GestureResponderEvent) => void` | No | — | The user is moving their finger |
+| `onResponderReject` | `(event: GestureResponderEvent) => void` | No | — | Something else is the responder right now and will not release it |
+| `onResponderRelease` | `(event: GestureResponderEvent) => void` | No | — | Fired at the end of the touch, ie "touchUp" |
+| `onResponderStart` | `(event: GestureResponderEvent) => void` | No | — |  |
+| `onResponderTerminate` | `(event: GestureResponderEvent) => void` | No | — | The responder has been taken from the View. Might be taken by other views after a call to onResponderTerminationReque... |
+| `onResponderTerminationRequest` | `(event: GestureResponderEvent) => boolean` | No | — | Something else wants to become responder. Should this view release the responder? Returning true allows release |
+| `onStartShouldSetResponder` | `(event: GestureResponderEvent) => boolean` | No | — | Does this view want to become responder on the start of a touch? |
+| `onStartShouldSetResponderCapture` | `(event: GestureResponderEvent) => boolean` | No | — | onStartShouldSetResponder and onMoveShouldSetResponder are called with a bubbling pattern, where the deepest node is ... |
+| `onTouchCancel` | `(event: GestureResponderEvent) => void` | No | — |  |
+| `onTouchEnd` | `(event: GestureResponderEvent) => void` | No | — |  |
+| `onTouchEndCapture` | `(event: GestureResponderEvent) => void` | No | — |  |
+| `onTouchMove` | `(event: GestureResponderEvent) => void` | No | — |  |
+| `onTouchStart` | `(event: GestureResponderEvent) => void` | No | — |  |
+| `pointerEvents` | `"auto" | "box-none" | "box-only" | "none"` | No | — | In the absence of auto property, none is much like CSS's none value. box-none is as if you had applied the CSS class:... |
+| `ref` | `Ref<View>` | No | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (... |
+| `removeClippedSubviews` | `boolean` | No | — | This is a special performance property exposed by RCTView and is useful for scrolling content when there are many sub... |
+| `renderToHardwareTextureAndroid` | `boolean` | No | — | Whether this view should render itself (and all of its children) into a single hardware texture on the GPU.  On Andro... |
+| `role` | `Role` | No | — | Indicates to accessibility services to treat UI component like a specific role. |
+| `screenReaderFocusable` | `boolean` | No | — | Enables the view to be screen reader focusable, not keyboard focusable. @platform android |
+| `shouldRasterizeIOS` | `boolean` | No | — | Whether this view should be rendered as a bitmap before compositing.  On iOS, this is useful for animations and inter... |
+| `style` | `StyleProp<ViewStyle>` | No | — |  |
+| `tabIndex` | `-1 | 0` | No | — | Indicates whether this `View` should be focusable with a non-touch input device, eg. receive focus with a hardware ke... |
+| `testID` | `string` | No | — | Used to locate this view in end-to-end tests. |
+| `tvParallaxMagnification` | `number` | No | — | *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out ... |
+| `tvParallaxShiftDistanceX` | `number` | No | — | *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out ... |
+| `tvParallaxShiftDistanceY` | `number` | No | — | *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out ... |
+| `tvParallaxTiltAngle` | `number` | No | — | *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out ... |
+
+#### Select.Trigger
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `children` | `ReactNode` | No | — | Trigger content — typically `Select.Value` (and optionally a label part). |
+| `ref` | `Ref<TriggerRef>` | No | — | Imperative handle exposing `open()` / `close()`. Stays `null` when the field is `readOnly` (no interactive trigger is... |
+| `testID` | `string` | No | — | Used verbatim to locate the trigger in end-to-end tests. Defaults to `ATL-Select-Trigger`. |
+
+#### Select.Value
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `placeholder` | `string` | Yes | — |  |
+| `accessibilityActions` | `readonly Readonly<{ name: string; label?: string; }>[]` | No | — | Provides an array of custom actions available for accessibility. |
+| `accessibilityElementsHidden` | `boolean` | No | — | A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden ... |
+| `accessibilityHint` | `string` | No | — | An accessibility hint helps users understand what will happen when they perform an action on the accessibility elemen... |
+| `accessibilityIgnoresInvertColors` | `boolean` | No | — | https://reactnative.dev/docs/accessibility#accessibilityignoresinvertcolorsios @platform ios |
+| `accessibilityLabel` | `string` | No | — | Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label i... |
+| `accessibilityLabelledBy` | `string | string[]` | No | — | Identifies the element that labels the element it is applied to. When the assistive technology focuses on the compone... |
+| `accessibilityLanguage` | `string` | No | — | By using the accessibilityLanguage property, the screen reader will understand which language to use while reading th... |
+| `accessibilityLargeContentTitle` | `string` | No | — | When `accessibilityShowsLargeContentViewer` is set, this string will be used as title for the large content viewer. h... |
+| `accessibilityLiveRegion` | `"assertive" | "none" | "polite"` | No | — | Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API... |
+| `accessibilityRespondsToUserInteraction` | `boolean` | No | — | Blocks the user from interacting with the component through keyboard while still allowing screen reader to interact w... |
+| `accessibilityRole` | `AccessibilityRole` | No | — | Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on Android the type of element that is fo... |
+| `accessibilityShowsLargeContentViewer` | `boolean` | No | — | A Boolean value that indicates whether or not to show the item in the large content viewer. Available on iOS 13.0+ ht... |
+| `accessibilityState` | `AccessibilityState` | No | — | Accessibility State tells a person using either VoiceOver on iOS or TalkBack on Android the state of the element curr... |
+| `accessibilityValue` | `AccessibilityValue` | No | — | Represents the current value of a component. It can be a textual description of a component's value, or for range-bas... |
+| `accessibilityViewIsModal` | `boolean` | No | — | A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receive... |
+| `accessible` | `boolean` | No | — | When true, indicates that the view is an accessibility element. By default, all the touchable elements are accessible. |
+| `adjustsFontSizeToFit` | `boolean` | No | — | Specifies whether font should be scaled down automatically to fit given style constraints. |
+| `allowFontScaling` | `boolean` | No | — | Specifies whether fonts should scale to respect Text Size accessibility settings. The default is `true`. |
+| `android_hyphenationFrequency` | `"full" | "none" | "normal"` | No | — | Hyphenation strategy |
+| `aria-busy` | `boolean` | No | — | alias for accessibilityState  see https://reactnative.dev/docs/accessibility#accessibilitystate |
+| `aria-checked` | `"mixed" | boolean` | No | — |  |
+| `aria-disabled` | `boolean` | No | — |  |
+| `aria-expanded` | `boolean` | No | — |  |
+| `aria-hidden` | `boolean` | No | — | A value indicating whether the accessibility elements contained within this accessibility element are hidden. |
+| `aria-label` | `string` | No | — | Alias for accessibilityLabel  https://reactnative.dev/docs/view#accessibilitylabel https://github.com/facebook/react-... |
+| `aria-labelledby` | `string` | No | — | Identifies the element that labels the element it is applied to. When the assistive technology focuses on the compone... |
+| `aria-live` | `"assertive" | "off" | "polite"` | No | — | Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API... |
+| `aria-modal` | `boolean` | No | — |  |
+| `aria-selected` | `boolean` | No | — |  |
+| `aria-valuemax` | `number` | No | — |  |
+| `aria-valuemin` | `number` | No | — |  |
+| `aria-valuenow` | `number` | No | — |  |
+| `aria-valuetext` | `string` | No | — |  |
+| `asChild` | `boolean` | No | — |  |
+| `dataDetectorType` | `"all" | "email" | "link" | "none" | "phoneNumber"` | No | — | Determines the types of data converted to clickable URLs in the text element. By default no data types are detected. |
+| `disabled` | `boolean` | No | — | Specifies the disabled state of the text view for testing purposes. |
+| `dynamicTypeRamp` | `"body" | "callout" | "caption1" | "caption2" | "footnote" | "headline" | "largeTitle" | "subheadline" | "title1" | "title2" | "title3"` | No | — | The Dynamic Type scale ramp to apply to this element on iOS. |
+| `ellipsizeMode` | `"clip" | "head" | "middle" | "tail"` | No | — | This can be one of the following values:  - `head` - The line is displayed so that the end fits in the container and ... |
+| `id` | `string` | No | — | Used to reference react managed views from native code. |
+| `importantForAccessibility` | `"auto" | "no" | "no-hide-descendants" | "yes"` | No | — | [Android] Controlling if a view fires accessibility events and if it is reported to accessibility services. |
+| `lineBreakMode` | `"clip" | "head" | "middle" | "tail"` | No | — | Line Break mode. Works only with numberOfLines. clip is working only for iOS |
+| `lineBreakStrategyIOS` | `"hangul-word" | "none" | "push-out" | "standard"` | No | — | Set line break strategy on iOS. |
+| `maxFontSizeMultiplier` | `number` | No | — | Specifies largest possible scale a font can reach when allowFontScaling is enabled. Possible values: - null/undefined... |
+| `minimumFontScale` | `number` | No | — | Specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0). |
+| `nativeID` | `string` | No | — | Used to reference react managed views from native code. |
+| `numberOfLines` | `number` | No | — | Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the to... |
+| `onAccessibilityAction` | `(event: AccessibilityActionEvent) => void` | No | — | When `accessible` is true, the system will try to invoke this function when the user performs an accessibility custom... |
+| `onAccessibilityEscape` | `() => void` | No | — | When accessible is true, the system will invoke this function when the user performs the escape gesture (scrub with t... |
+| `onAccessibilityTap` | `() => void` | No | — | When `accessible` is true, the system will try to invoke this function when the user performs accessibility tap gestu... |
+| `onLayout` | `(event: LayoutChangeEvent) => void` | No | — | Invoked on mount and layout changes with  {nativeEvent: { layout: {x, y, width, height}}}. |
+| `onLongPress` | `(event: GestureResponderEvent) => void` | No | — | This function is called on long press. e.g., `onLongPress={this.increaseSize}>` |
+| `onMagicTap` | `() => void` | No | — | When accessible is true, the system will invoke this function when the user performs the magic tap gesture. @platform... |
+| `onPress` | `(event: GestureResponderEvent) => void` | No | — | This function is called on press. Text intrinsically supports press handling with a default highlight state (which ca... |
+| `onPressIn` | `(event: GestureResponderEvent) => void` | No | — |  |
+| `onPressOut` | `(event: GestureResponderEvent) => void` | No | — |  |
+| `onTextLayout` | `(event: TextLayoutEvent) => void` | No | — | Invoked on Text layout |
+| `pointerEvents` | `"auto" | "box-none" | "box-only" | "none"` | No | — | Controls how touch events are handled. Similar to `View`'s `pointerEvents`. |
+| `pressRetentionOffset` | `{ top: number; left: number; bottom: number; right: number; }` | No | — | Defines how far your touch may move off of the button, before deactivating the button. |
+| `role` | `Role` | No | — | Indicates to accessibility services to treat UI component like a specific role. |
+| `screenReaderFocusable` | `boolean` | No | — | Enables the view to be screen reader focusable, not keyboard focusable. @platform android |
+| `selectable` | `boolean` | No | — | Lets the user select text, to use the native copy and paste functionality. |
+| `selectionColor` | `ColorValue` | No | — | The highlight color of the text. |
+| `style` | `StyleProp<TextStyle>` | No | — | @see https://reactnative.dev/docs/text#style |
+| `suppressHighlighting` | `boolean` | No | — | When `true`, no visual change is made when text is pressed down. By default, a gray oval highlights the text on press... |
+| `testID` | `string` | No | — | Used to locate this view in end-to-end tests. |
+| `textBreakStrategy` | `"balanced" | "highQuality" | "simple"` | No | — | Set text break strategy on Android API Level 23+ default is `highQuality`. |