### Install @rn-primitives/context-menu

Source: https://rnprimitives.com/context-menu

Install the context-menu primitive via the command line.

```bash
npx expo install @rn-primitives/context-menu
```

--------------------------------

### Install @radix-ui/react-context-menu

Source: https://rnprimitives.com/context-menu

Install the Radix UI context-menu package for web support.

```bash
npx expo install @radix-ui/react-context-menu
```

--------------------------------

### Install @radix-ui/react-switch

Source: https://rnprimitives.com/switch

Install the Radix UI switch for web support.

```bash
npx expo install @radix-ui/react-switch
```

--------------------------------

### Install Toolbar with npx expo install

Source: https://rnprimitives.com/toolbar

Install the @rn-primitives/toolbar component via the command line using npx expo install.

```bash
npx expo install @rn-primitives/toolbar

```

--------------------------------

### Installation (NPM)

Source: https://rnprimitives.com/select

Install the Select component and its required portal primitive via the command line.

```APIDOC
## Installation

### NPM

Install the component via your command line.

```bash
npx expo install @rn-primitives/select
```

If you do not have the portal primitive in your project, you will need to add it as well.

```bash
npx expo install @rn-primitives/portal
```
```

--------------------------------

### Install @radix-ui/react-popover

Source: https://rnprimitives.com/popover

Install the @radix-ui/react-popover package for web support.

```bash
npx expo install @radix-ui/react-popover
```

--------------------------------

### Basic Dialog Example

Source: https://rnprimitives.com/dialog

Shows a complete dialog with trigger, portal, overlay, content, title, description, and close button. Use this as a starting point for implementing a dialog in your app.

```tsx
import * as DialogPrimitive from '@rn-primitives/dialog';
import { Text } from 'react-native';


function Example() {
  return (
    <DialogPrimitive.Root>
      <DialogPrimitive.Trigger>
        <Text>Show Dialog</Text>
      </DialogPrimitive.Trigger>


      <DialogPrimitive.Portal>
        <DialogPrimitive.Overlay>
          <DialogPrimitive.Content>
              <DialogPrimitive.Title>Dialog Title</DialogPrimitive.Title>
              <DialogPrimitive.Description>
                Dialog description.
              </DialogPrimitive.Description>
              <DialogPrimitive.Close><Text>Close</Text></DialogPrimitive.Close>
          </DialogPrimitive.Content>
        </DialogPrimitive.Overlay>
      </DialogPrimitive.Portal>
    </DialogPrimitive.Root>
  );
}
```

--------------------------------

### Install Radix UI Tooltip for Universal Projects

Source: https://rnprimitives.com/tooltip

For universal projects, install @radix-ui/react-tooltip.

```bash
npx expo install @radix-ui/react-tooltip
```

--------------------------------

### Install @radix-ui/react-toggle via npx expo install

Source: https://rnprimitives.com/toggle

Run this command to install the @radix-ui/react-toggle package for web support.

```bash
npx expo install @radix-ui/react-toggle
```

--------------------------------

### Installation (Manual - Web)

Source: https://rnprimitives.com/select

Install the Radix UI select dependency and copy the provided code for the web implementation.

```APIDOC
## Installation

### Manual - Web

Install @radix-ui/react-select

```bash
npx expo install @radix-ui/react-select
```

Copy/paste the following code for web to `~/components/primitives/select/select.web.tsx`

```tsx
import * as Select from '@radix-ui/react-select';
import {
  useComposedRefs,
  useControllableState,
  useEffectEvent,
  useIsomorphicLayoutEffect,
} from '~/components/primitives/hooks';
import { Slot } from '~/components/primitives/slot';
import * as React from 'react';
import { type GestureResponderEvent, Pressable, Text, View } from 'react-native';
import type {
  ContentProps,
  ContentRef,
  GroupProps,
  GroupRef,
  ItemIndicatorProps,
  ItemIndicatorRef,
  ItemProps,
  ItemRef,
  ItemTextProps,
  ItemTextRef,
  LabelProps,
  LabelRef,
  OverlayProps,
  OverlayRef,
  PortalProps,
  RootProps,
  RootRef,
  ScrollDownButtonProps,
  ScrollUpButtonProps,
  SeparatorProps,
  SeparatorRef,
  SharedRootContext,
  TriggerProps,
  TriggerRef,
  ValueProps,
  ValueRef,
  ViewportProps,
} from './types';


const SelectContext = React.createContext<
  | (SharedRootContext & {
    open: boolean;
    onOpenChange: (open: boolean) => void;
  })
  | null
>(null);
type RootComponentProps = RootProps & React.RefAttributes<RootRef>;


const Root = ({
  asChild,
  value: valueProp,
  defaultValue,
  onValueChange: onValueChangeProp,
  onOpenChange: onOpenChangeProp,
  ref,
  ...viewProps
}: RootComponentProps) => {
  const [value, onValueChange] = useControllableState({
    prop: valueProp,
    defaultProp: defaultValue,
    onChange: onValueChangeProp,
  });
  const [open, setOpen] = React.useState(false);


  function onOpenChange(value: boolean) {
    setOpen(value);
    onOpenChangeProp?.(value);
  }


  function onStrValueChange(val: string) {
    onValueChange({ value: val, label: val });
  }


  const Component = asChild ? Slot : View;
  return (
    <SelectContext.Provider
      value={{
        value,
        onValueChange,
        open,
        onOpenChange,
      }}
    >
      <Select.Root
        value={value?.value}
        defaultValue={defaultValue?.value}
        onValueChange={onStrValueChange}
        open={open}
        onOpenChange={onOpenChange}
      >
        <Component ref={ref} {...viewProps} />
      </Select.Root>
    </SelectContext.Provider>
  );
};


Root.displayName = 'RootWebSelect';


function useRootContext() {
  const context = React.useContext(SelectContext);
  if (!context) {
    throw new Error('Select compound components cannot be rendered outside the Select component');
  }
  return context;
}
type TriggerComponentProps = TriggerProps & React.RefAttributes<TriggerRef>;


const Trigger = ({
  asChild,
  role: _role,
  disabled,
  ref,
  onTouchStart: onTouchStartProp,
  ...props
}: TriggerComponentProps) => {
  const { open, onOpenChange } = useRootContext();
  const triggerRef = React.useRef<TriggerRef>(null);


  const openTriggerEvent = useEffectEvent(() => {
    onOpenChange(true);
  });
  const closeTriggerEvent = useEffectEvent(() => {
    onOpenChange(false);
  });


  const composedRef = useComposedRefs(
    triggerRef,
    ref,
    React.useCallback((node: TriggerRef | null) => {
      if (!node) return;
      node.open = () => openTriggerEvent();
      node.close = () => closeTriggerEvent();
    }, [])
  );


  useIsomorphicLayoutEffect(() => {
    if (triggerRef.current) {
      const augRef = triggerRef.current as unknown as HTMLButtonElement;
      augRef.dataset.state = open ? 'open' : 'closed';
      augRef.type = 'button';
    }
  }, [open]);


  function onTouchStart(ev: GestureResponderEvent) {
    onTouchStartProp?.(ev);
    if (!ev.defaultPrevented) {
      onOpenChange(true);
    }
  }


  const Component = asChild ? Slot : Pressable;
  return (
    <Select.Trigger disabled={disabled ?? undefined} asChild>
      <Component
        ref={composedRef}
        role='button'
        disabled={disabled}
        onTouchStart={onTouchStart}
        {...props}
      />
    </Select.Trigger>
  );
};


Trigger.displayName = 'TriggerWebSelect';
type ValueComponentProps = ValueProps & React.RefAttributes<ValueRef>;


const Value = ({ asChild, placeholder, children, ref, ...props }: ValueComponentProps) => {
  return (
    <Slot ref={ref} {...props}>
      <Select.Value placeholder={placeholder}>{children}</Select.Value>
    </Slot>
  );
};


Value.displayName = 'ValueWebSelect';
```
```

--------------------------------

### Install @rn-primitives/accordion via npx expo install

Source: https://rnprimitives.com/accordion

Install the component via your command line using npx expo install.

```bash
npx expo install @rn-primitives/accordion
```

--------------------------------

### Install @radix-ui/react-accordion via npx expo install

Source: https://rnprimitives.com/accordion

Install the @radix-ui/react-accordion package for web support.

```bash
npx expo install @radix-ui/react-accordion
```

--------------------------------

### Install @rn-primitives/toggle via npx expo install

Source: https://rnprimitives.com/toggle

Run this command to install the @rn-primitives/toggle package.

```bash
npx expo install @rn-primitives/toggle
```

--------------------------------

### Install Popover with npx expo install

Source: https://rnprimitives.com/popover

Install the @rn-primitives/popover package using the command line.

```bash
npx expo install @rn-primitives/popover
```

--------------------------------

### Install @radix-ui/react-hover-card

Source: https://rnprimitives.com/hover-card

Install the Radix UI hover-card package for web.

```bash
npx expo install @radix-ui/react-hover-card
```

--------------------------------

### Install @rn-primitives/types via npx expo install

Source: https://rnprimitives.com/types

Install the types package using the command line. This is the recommended installation method.

```bash
npx expo install @rn-primitives/types
```

--------------------------------

### Install @radix-ui/react-select

Source: https://rnprimitives.com/select

Install the Radix UI select package for web support.

```bash
npx expo install @radix-ui/react-select

```

--------------------------------

### Install @rn-primitives/hover-card

Source: https://rnprimitives.com/hover-card

Install the hover-card component via the command line.

```bash
npx expo install @rn-primitives/hover-card
```

--------------------------------

### Install @radix-ui/react-dropdown-menu

Source: https://rnprimitives.com/dropdown-menu

Install the Radix UI dropdown menu package for web support.

```bash
npx expo install @radix-ui/react-dropdown-menu
```

--------------------------------

### Installation Command

Source: https://rnprimitives.com/accordion

Command to install the accordion component dependencies.

```bash
npx create-expo-app@latest
```

--------------------------------

### Install @rn-primitives/switch

Source: https://rnprimitives.com/switch

Install the universal switch component via npm.

```bash
npx expo install @rn-primitives/switch
```

--------------------------------

### Install @rn-primitives/table with npx expo install

Source: https://rnprimitives.com/table

Install the @rn-primitives/table component via the command line using Expo.

```bash
npx expo install @rn-primitives/table
```

--------------------------------

### Install @radix-ui/react-navigation-menu

Source: https://rnprimitives.com/navigation-menu

Installs the Radix UI navigation menu package for native-only usage.

```bash
npx expo install @radix-ui/react-navigation-menu
```

--------------------------------

### Install @rn-primitives/select and @rn-primitives/portal

Source: https://rnprimitives.com/select

Install the select and portal primitives via the command line. The portal primitive is required if not already present in the project.

```bash
npx expo install @rn-primitives/select

```

```bash
npx expo install @rn-primitives/portal

```

--------------------------------

### Install Radix Alert Dialog

Source: https://rnprimitives.com/alert-dialog

Install @radix-ui/react-alert-dialog for web support.

```bash
npx expo install @radix-ui/react-alert-dialog
```

--------------------------------

### Manual setup: index.ts (exporting)

Source: https://rnprimitives.com/label

Copy this code to ~/components/primitives/label/index.ts to export the label and types.

```ts
export * from './label';
export * from './types';

```

--------------------------------

### Install @rn-primitives/dropdown-menu and @rn-primitives/portal

Source: https://rnprimitives.com/dropdown-menu

Install the dropdown menu and portal primitives via the command line. The portal primitive is required if not already present in your project.

```bash
npx expo install @rn-primitives/dropdown-menu
```

```bash
npx expo install @rn-primitives/portal
```

--------------------------------

### Install @rn-primitives/toast and @rn-primitives/portal

Source: https://rnprimitives.com/toast

Install the toast component and its required portal primitive. Run the portal command if you do not have the portal primitive in your project.

```bash
npx expo install @rn-primitives/toast
```

```bash
npx expo install @rn-primitives/portal
```

--------------------------------

### Install Alert Dialog via npm

Source: https://rnprimitives.com/alert-dialog

Install the @rn-primitives/alert-dialog package using npx expo install.

```bash
npx expo install @rn-primitives/alert-dialog
```

--------------------------------

### Install @rn-primitives/slider

Source: https://rnprimitives.com/slider

Install the slider component via the command line.

```bash
npx expo install @rn-primitives/slider
```

--------------------------------

### Install @radix-ui/react-radio-group

Source: https://rnprimitives.com/radio-group

Install the @radix-ui/react-radio-group package for web support.

```bash
npx expo install @radix-ui/react-radio-group
```

--------------------------------

### Install @rn-primitives/separator with npx expo install

Source: https://rnprimitives.com/separator

Install the @rn-primitives/separator component via the command line using Expo.

```bash
npx expo install @rn-primitives/separator
```

--------------------------------

### Install Tooltip Primitive via npm

Source: https://rnprimitives.com/tooltip

Run this command to install the @rn-primitives/tooltip package.

```bash
npx expo install @rn-primitives/tooltip
```

--------------------------------

### Install @radix-ui/react-progress via NPM

Source: https://rnprimitives.com/progress

Install the Radix UI progress package for web support. Run this command in your project directory.

```bash
npx expo install @radix-ui/react-progress

```

--------------------------------

### Install Tabs via npx expo install

Source: https://rnprimitives.com/tabs

Install the @rn-primitives/tabs package using the Expo CLI.

```bash
npx expo install @rn-primitives/tabs
```

--------------------------------

### Install @rn-primitives/avatar with npx expo install

Source: https://rnprimitives.com/avatar

Install the @rn-primitives/avatar component via the command line using Expo.

```bash
npx expo install @rn-primitives/avatar
```

--------------------------------

### Install @radix-ui/react-tabs for web

Source: https://rnprimitives.com/tabs

Install the Radix UI Tabs package required for web support.

```bash
npx expo install @radix-ui/react-tabs
```

--------------------------------

### Install Navigation Menu with npx expo install

Source: https://rnprimitives.com/navigation-menu

Installs the @rn-primitives/navigation-menu package via the command line. Required for using the Navigation Menu primitive.

```bash
npx expo install @rn-primitives/navigation-menu
```

--------------------------------

### Install @radix-ui/react-menubar

Source: https://rnprimitives.com/menubar

Install the Radix UI Menubar package for web support. Required for the web implementation.

```bash
npx expo install @radix-ui/react-menubar
```

--------------------------------

### Install @radix-ui/react-toolbar

Source: https://rnprimitives.com/toolbar

Install the @radix-ui/react-toolbar package, required for the web implementation of the Toolbar primitive.

```bash
npx expo install @radix-ui/react-toolbar

```

--------------------------------

### Install @radix-ui/react-collapsible with npx expo

Source: https://rnprimitives.com/collapsible

Installs the @radix-ui/react-collapsible package via Expo CLI. This is required for the Native Only installation variant.

```bash
npx expo install @radix-ui/react-collapsible
```

--------------------------------

### Install @radix-ui/react-slider

Source: https://rnprimitives.com/slider

Install the Radix UI slider package for web support.

```bash
npx expo install @radix-ui/react-slider
```

--------------------------------

### Install @rn-primitives/hooks via npx expo install

Source: https://rnprimitives.com/hooks

Install the hooks package using the Expo CLI. Run this command in your project root to add the dependency.

```bash
npx expo install @rn-primitives/hooks
```

--------------------------------

### Menubar example with menus, submenus, and items

Source: https://rnprimitives.com/menubar

Complete example of a menubar using @rn-primitives/menubar. Includes state management for open menus, a submenu with animated content, checkbox items, separators, and disabled items. Demonstrates the component API with File, Edit, and View menus.

```tsx
import * as React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import Animated, { FadeIn } from 'react-native-reanimated';
import * as MenubarPrimitive from '@rn-primitives/menubar';


function Example() {
  const [value, setValue] = React.useState<string | undefined>();
  const [isSubOpen, setIsSubOpen] = React.useState(false);
  const [isChecked, setIsChecked] = React.useState(false);
  const [radio, setRadio] = React.useState('michael');


  // TODO: handle closing menus when pressing/clicking outside of this Example component. Ex: when navigating to another screen


  function closeSubs() {
    setIsSubOpen(false);
  }


  function onValueChange(val: string | undefined) {
    if (typeof val === 'string') {
      setValue(val);
      return;
    }
    closeSubs();
    setValue(undefined);
  }


  return (
    <>
      {!!value && (
        <MenubarPrimitive.Overlay
          style={StyleSheet.absoluteFillObject}
        />
      )}
      <MenubarPrimitive.Root value={value} onValueChange={onValueChange}>
        <MenubarPrimitive.Menu value='file'>
          <MenubarPrimitive.Trigger onPress={closeSubs}>
            <Text>File</Text>
          </MenubarPrimitive.Trigger>
          <MenubarPrimitive.Portal>
            <MenubarPrimitive.Content>
              <MenubarPrimitive.Item>
                <Text>New Tab</Text>
              </MenubarPrimitive.Item>
              <MenubarPrimitive.Item>
                <Text>New Window</Text>
              </MenubarPrimitive.Item>
              <MenubarPrimitive.Item disabled>
                <Text>New Incognito Window</Text>
              </MenubarPrimitive.Item>
              <MenubarPrimitive.Separator />
              <MenubarPrimitive.Sub open={isSubOpen} onOpenChange={setIsSubOpen}>
                <MenubarPrimitive.SubTrigger>
                  <Text>Share</Text>
                </MenubarPrimitive.SubTrigger>
                <MenubarPrimitive.SubContent>
                  <Animated.View entering={FadeIn.duration(200)}>
                    <MenubarPrimitive.Item>
                      <Text>Email link</Text>
                    </MenubarPrimitive.Item>
                    <MenubarPrimitive.Item>
                      <Text>Messages</Text>
                    </MenubarPrimitive.Item>
                    <MenubarPrimitive.Item>
                      <Text>Notes</Text>
                    </MenubarPrimitive.Item>
                  </Animated.View>
                </MenubarPrimitive.SubContent>
              </MenubarPrimitive.Sub>
              <MenubarPrimitive.Separator />
              <MenubarPrimitive.Item>
                <Text>Print...</Text>
              </MenubarPrimitive.Item>
            </MenubarPrimitive.Content>
          </MenubarPrimitive.Portal>
        </MenubarPrimitive.Menu>
        <MenubarPrimitive.Menu value='edit'>
          <MenubarPrimitive.Trigger onPress={closeSubs}>
            <Text>Edit</Text>
          </MenubarPrimitive.Trigger>
          <MenubarPrimitive.Content className='native:w-48'>
            <MenubarPrimitive.Item>
              <Text>Undo</Text>
            </MenubarPrimitive.Item>
            <MenubarPrimitive.Item>
              <Text>Redo</Text>
            </MenubarPrimitive.Item>
            <MenubarPrimitive.Separator />
            <MenubarPrimitive.Item>
              <Text>Cut</Text>
            </MenubarPrimitive.Item>
            <MenubarPrimitive.Item>
              <Text>Copy</Text>
            </MenubarPrimitive.Item>
            <MenubarPrimitive.Item>
              <Text>Paste</Text>
            </MenubarPrimitive.Item>
          </MenubarPrimitive.Content>
        </MenubarPrimitive.Menu>
        <MenubarPrimitive.Menu value='view'>
          <MenubarPrimitive.Trigger onPress={closeSubs}>
            <Text>View</Text>
          </MenubarPrimitive.Trigger>
          <MenubarPrimitive.Portal>
            <MenubarPrimitive.Content>
              <MenubarPrimitive.CheckboxItem
                checked={isChecked}
                onCheckedChange={setIsChecked}
                closeOnPress={false}
              >
                <Text>Always Show Bookmarks Bar</Text>
              </MenubarPrimitive.CheckboxItem>
              <MenubarPrimitive.Item>
                <Text>Reload</Text>
              </MenubarPrimitive.Item>
              <MenubarPrimitive.Item disabled>
                <Text>Force Reload</Text>
              </MenubarPrimitive.Item>
              <MenubarPrimitive.Separator />
              <MenubarPrimitive.Item>
                <Text>Toggle Fullscreen</Text>
              </MenubarPrimitive.Item>
            </MenubarPrimitive.Content>
          </MenubarPrimitive.Portal>
        </MenubarPrimitive.Menu>
      </MenubarPrimitive.Root>
    </>
  );
}
```

--------------------------------

### Install @rn-primitives/dialog and @rn-primitives/portal

Source: https://rnprimitives.com/dialog

Install the dialog and portal primitives via the command line. The portal primitive is required if not already present in the project.

```bash
npx expo install @rn-primitives/dialog
```

```bash
npx expo install @rn-primitives/portal
```

--------------------------------

### Install @rn-primitives/progress via NPM

Source: https://rnprimitives.com/progress

Install the component using Expo. Run this command in your project directory.

```bash
npx expo install @rn-primitives/progress

```

--------------------------------

### Install @rn-primitives/slot with npx expo install

Source: https://rnprimitives.com/slot

Install the @rn-primitives/slot package via the command line using Expo's CLI.

```bash
npx expo install @rn-primitives/slot
```

--------------------------------

### Install @rn-primitives/aspect-ratio

Source: https://rnprimitives.com/aspect-ratio

Install the @rn-primitives/aspect-ratio component via the command line using Expo.

```bash
npx expo install @rn-primitives/aspect-ratio
```

--------------------------------

### Install @radix-ui/react-dialog

Source: https://rnprimitives.com/dialog

Install the Radix UI dialog package for web support. Required for the web implementation of the dialog primitive.

```bash
npx expo install @radix-ui/react-dialog
```

--------------------------------

### Install @rn-primitives/collapsible with npx expo

Source: https://rnprimitives.com/collapsible

Installs the @rn-primitives/collapsible package via Expo CLI. This is the recommended installation method for the collapsible primitive.

```bash
npx expo install @rn-primitives/collapsible
```

--------------------------------

### Switch Usage Example

Source: https://rnprimitives.com/switch

Example of using the Switch component with Root and Thumb subcomponents.

```APIDOC
## Switch Usage

### Description
Example of using the Switch component with Root and Thumb subcomponents.

### Code Example
```jsx
import * as React from 'react';
import * as SwitchPrimitive from '@rn-primitives/switch';

export default function SwitchScreen() {
  const [checked, setChecked] = React.useState(false);

  return (
    <SwitchPrimitive.Root checked={checked} onCheckedChange={setChecked}>
      <SwitchPrimitive.Thumb />
    </SwitchPrimitive.Root>
  );
}
```
```

--------------------------------

### Install zustand dependency

Source: https://rnprimitives.com/portal

Install the zustand dependency required by the portal component.

```bash
npx expo install zustand
```

--------------------------------

### Install @radix-ui/react-toggle-group with npx expo

Source: https://rnprimitives.com/toggle-group

Installs the @radix-ui/react-toggle-group dependency for web support.

```bash
npx expo install @radix-ui/react-toggle-group
```

--------------------------------

### Install @rn-primitives/utils via npx expo

Source: https://rnprimitives.com/utils

Install the utility package using the Expo CLI. Run this command in your project root to add the dependency.

```bash
npx expo install @rn-primitives/utils
```

--------------------------------

### Usage example

Source: https://rnprimitives.com/aspect-ratio

Example usage of the AspectRatio primitive with a 16:9 ratio.

```tsx
import * as AspectRatio from '@rn-primitives/aspect-ratio';


function Example() {
  return (
     <AspectRatio.Root ratio={16 / 9} />
  );
}
```

--------------------------------

### Install @radix-ui/react-label via npx expo

Source: https://rnprimitives.com/label

Install the Radix UI label package for web support.

```bash
npx expo install @radix-ui/react-label

```

--------------------------------

### Install @rn-primitives/menubar

Source: https://rnprimitives.com/menubar

Install the Menubar component via npm using Expo. Required for the Menubar primitive.

```bash
npx expo install @rn-primitives/menubar
```

--------------------------------

### Setup PortalHost in Root Layout

Source: https://rnprimitives.com/navigation-menu

Requires a <PortalHost /> as the last child of your <Root/> component in app/_layout.tsx. This is a one-per-app setup.

```tsx
import { PortalHost } from '@rn-primitives/portal';


function Root() {
  return (
    <>
      <Stack />
      {/* Default Portal Host (one per app) */}
      <PortalHost />
    </>
  );
}
```

--------------------------------

### Install @rn-primitives/radio-group

Source: https://rnprimitives.com/radio-group

Install the @rn-primitives/radio-group package via the command line using Expo.

```bash
npx expo install @rn-primitives/radio-group
```

--------------------------------

### Install @rn-primitives/toggle-group with npx expo

Source: https://rnprimitives.com/toggle-group

Installs the @rn-primitives/toggle-group component via the command line.

```bash
npx expo install @rn-primitives/toggle-group
```

--------------------------------

### Manual setup: types.ts

Source: https://rnprimitives.com/label

Copy this code to ~/components/primitives/label/types.ts. Defines RootProps, TextProps, RootRef, and TextRef types.

```ts
import type {
  PressableRef,
  SlottablePressableProps,
  SlottableTextProps,
  TextRef,
} from '~/components/primitives/types';
import type { ViewStyle } from 'react-native';


type RootProps = Omit<SlottablePressableProps, 'children' | 'hitSlop' | 'style'> & {
  children: React.ReactNode;
  style?: ViewStyle;
};


type TextProps = SlottableTextProps & {
  /**
   * Equivalent to `id` so that the same value can be passed as `aria-labelledby` to the input element.
   */
  nativeID?: string;
  /**
   * WEB ONLY
   */
  htmlFor?: string;
};


type RootRef = PressableRef;


export type { RootProps, RootRef, TextProps, TextRef };

```

--------------------------------

### Manual setup: label.tsx (native)

Source: https://rnprimitives.com/label

Copy this code to ~/components/primitives/label/label.tsx for native support. It uses Slot and Pressable/Text without Radix UI.

```tsx
import { Slot } from '~/components/primitives/slot';
import * as React from 'react';
import { Pressable, Text as RNText } from 'react-native';
import type { RootProps, RootRef, TextProps, TextRef } from './types';
type RootComponentProps = RootProps & React.RefAttributes<RootRef>;


const Root = ({ asChild, ref, ...props }: RootComponentProps) => {
  const Component = asChild ? Slot : Pressable;
  return <Component ref={ref} {...props} />;
};


Root.displayName = 'RootNativeLabel';
type TextComponentProps = TextProps & React.RefAttributes<TextRef>;


const Text = ({ asChild, ref, ...props }: TextComponentProps) => {
  const Component = asChild ? Slot : RNText;
  return <Component ref={ref} {...props} />;
};


Text.displayName = 'TextNativeLabel';


export { Root, Text };

```

--------------------------------

### Toggle usage example

Source: https://rnprimitives.com/toggle

Example of using TogglePrimitive.Root with pressed and onPressedChange props to create a toggle button.

```tsx
import * as React from 'react';
import { Text } from 'react-native';
import * as TogglePrimitive from '@rn-primitives/toggle';


function Example() {
  const [isActive, setIsActive] = React.useState(false);
  return (
      <TogglePrimitive.Root pressed={isActive} onPressedChange={setIsActive}>
         <Text>Bold</Text>
      </TogglePrimitive.Root>
  );
}

```

--------------------------------

### Navigation Menu Example

Source: https://rnprimitives.com/navigation-menu

Complete example of a navigation menu using @rn-primitives/navigation-menu. It manages open state with useState, closes menus on outside press on non-web platforms, and includes items with triggers, content, links, and a portal for one item.

```tsx
import * as React from 'react';
import { Platform, StyleSheet, Pressable, Text } from 'react-native';
import * as NavigationMenuPrimitive from '@rn-primitives/navigation-menu';


function Example() {
  const [value, setValue] = React.useState<string>();


  function closeAll() {
    setValue('');
  }


  // TODO: handle closing menus when pressing/clicking outside of this Example component. Ex: when navigating to another screen


  return (
    <>
      {Platform.OS !== 'web' && !!value && (
        <Pressable
          onPress={closeAll}
          style={StyleSheet.absoluteFillObject}
        />
      )}
      <NavigationMenuPrimitive.Root value={value} onValueChange={setValue}>
        <NavigationMenuPrimitive.List>
          <NavigationMenuPrimitive.Item value='getting-started'>
            <NavigationMenuPrimitive.Trigger>
              <Text>Getting started</Text>
            </NavigationMenuPrimitive.Trigger>
            <NavigationMenuPrimitive.Portal>
              <NavigationMenuPrimitive.Content>
                <NavigationMenuPrimitive.Link >
                  <Text>
                    react-native-reusables
                  </Text>
                </NavigationMenuPrimitive.Link>
              </NavigationMenuPrimitive.Content>
            </ NavigationMenuPrimitive.Portal>
          </NavigationMenuPrimitive.Item>
          <NavigationMenuPrimitive.Item value='components'>
            <NavigationMenuPrimitive.Trigger>
              <Text>Components</Text>
            </NavigationMenuPrimitive.Trigger>
            <NavigationMenuPrimitive.Content>
                  <NavigationMenuPrimitive.Link>
                    Navigation Menu
                  </NavigationMenuPrimitive.Link>
              </View>
            </NavigationMenuPrimitive.Content>
          </NavigationMenuPrimitive.Item>
          <NavigationMenuPrimitive.Item value='documentation'>
            <NavigationMenuPrimitive.Link onPress={closeAll}>
              <Text>Documentation</Text>
            </NavigationMenuPrimitive.Link>
          </NavigationMenuPrimitive.Item>
        </NavigationMenuPrimitive.List>
      </NavigationMenuPrimitive.Root>
    </>
  );
}
```

--------------------------------

### Basic AlertDialog Example

Source: https://rnprimitives.com/alert-dialog

Basic alert dialog example using the @rn-primitives/alert-dialog primitives. Shows the required structure: Root, Trigger, Portal, Overlay, Content, Title, Description, Cancel, and Action.

```tsx
import * as AlertDialogPrimitive from '@rn-primitives/alert-dialog';
import { Text } from 'react-native';


function Example() {
  return (
    <AlertDialogPrimitive.Root>
      <AlertDialogPrimitive.Trigger>
        <Text>Show Alert Dialog</Text>
      </AlertDialogPrimitive.Trigger>


      <AlertDialogPrimitive.Portal>
        <AlertDialogPrimitive.Overlay>
          <AlertDialogPrimitive.Content>
              <AlertDialogPrimitive.Title>Are you absolutely sure?</AlertDialogPrimitive.Title>
              <AlertDialogPrimitive.Description>
                This action cannot be undone. This will permanently delete your account and remove your data from our servers.
              </AlertDialogPrimitive.Description>


              <AlertDialogPrimitive.Cancel><Text>Cancel</Text></AlertDialogPrimitive.Cancel>
              <AlertDialogPrimitive.Action><Text>Continue</Text></AlertDialogPrimitive.Action>
          </AlertDialogPrimitive.Content>
        </AlertDialogPrimitive.Overlay>
      </AlertDialogPrimitive.Portal>
    </AlertDialogPrimitive.Root>
  );
}

```

--------------------------------

### Install @rn-primitives/portal via npx expo

Source: https://rnprimitives.com/label

Required if the portal primitive is not already in your project.

```bash
npx expo install @rn-primitives/portal

```

--------------------------------

### Usage example for SeparatorPrimitive.Root

Source: https://rnprimitives.com/separator

Example usage of the separator primitive. Import the package and render the Root component.

```tsx
import * as SeparatorPrimitive from '@rn-primitives/separator';


function Example() {
  return <SeparatorPrimitive.Root />
}

```

--------------------------------

### Dropdown Menu Example with Checkbox and Radio Items

Source: https://rnprimitives.com/dropdown-menu

A complete example of a dropdown menu using @rn-primitives/dropdown-menu. It demonstrates items, submenu, separators, checkbox items with indicators, and a radio group with custom styling. The example uses React state for checkbox and radio values.

```tsx
import * as DropdownMenuPrimitive from "@rn-primitives/dropdown-menu";
import * as React from "react";
import { StyleSheet, Text, ViewStyle } from "react-native";


const INDICATOR_STYLE: ViewStyle = {
  height: 5,
  width: 5,
  backgroundColor: "red",
  borderRadius: 50,
  position: "absolute",
  left: -10,
  top: 6,
};


function Example() {
  const [checkboxValue, setCheckboxValue] = React.useState(false);
  const [subCheckboxValue, setSubCheckboxValue] = React.useState(false);
  const [radioValue, setRadioValue] = React.useState('pedro');


  return (
      <DropdownMenuPrimitive.Root>
        <DropdownMenuPrimitive.Trigger>
          <Text>Open Dropdown Menu</Text>
        </DropdownMenuPrimitive.Trigger>


        <DropdownMenuPrimitive.Portal>
          <DropdownMenuPrimitive.Overlay style={StyleSheet.absoluteFill}>
            <DropdownMenuPrimitive.Content>
              <DropdownMenuPrimitive.Item>
                <Text>Back</Text>
              </DropdownMenuPrimitive.Item>
              <DropdownMenuPrimitive.Item>
                <Text>Forward</Text>
              </DropdownMenuPrimitive.Item>
              <DropdownMenuPrimitive.Item>
                <Text>Reload</Text>
              </DropdownMenuPrimitive.Item>


              <DropdownMenuPrimitive.Sub>
                <DropdownMenuPrimitive.SubTrigger>
                  <Text>More Tools</Text>
                </DropdownMenuPrimitive.SubTrigger>
                <DropdownMenuPrimitive.SubContent>
                  <DropdownMenuPrimitive.Item>
                    <Text>Save Page As...</Text>
                  </DropdownMenuPrimitive.Item>
                  <DropdownMenuPrimitive.Item>
                    <Text>Create Shortcut...</Text>
                  </DropdownMenuPrimitive.Item>


                  <DropdownMenuPrimitive.Separator />
                  <DropdownMenuPrimitive.Item>
                    <Text>Developer Tools</Text>
                  </DropdownMenuPrimitive.Item>
                </DropdownMenuPrimitive.SubContent>
              </DropdownMenuPrimitive.Sub>


              <DropdownMenuPrimitive.Separator />
              <DropdownMenuPrimitive.CheckboxItem
                checked={checkboxValue}
                onCheckedChange={setCheckboxValue}
                closeOnPress={false}
              >
                <Text>Show Bookmarks Bar</Text>
                <DropdownMenuPrimitive.ItemIndicator style={INDICATOR_STYLE} />
              </DropdownMenuPrimitive.CheckboxItem>
              <DropdownMenuPrimitive.CheckboxItem
                checked={subCheckboxValue}
                onCheckedChange={setSubCheckboxValue}
                closeOnPress={false}
              >
                <Text>Show Full URLs</Text>
                <DropdownMenuPrimitive.ItemIndicator style={INDICATOR_STYLE} />
              </DropdownMenuPrimitive.CheckboxItem>
              <DropdownMenuPrimitive.Separator />
              <DropdownMenuPrimitive.RadioGroup
                value={radioValue}
                onValueChange={setRadioValue}
              >
                <DropdownMenuPrimitive.Label>
                  People
                </DropdownMenuPrimitive.Label>
                <DropdownMenuPrimitive.Separator />
                <DropdownMenuPrimitive.RadioItem
                  value="pedro"
                  closeOnPress={false}
                >
                  <Text>Elmer Fudd</Text>
                  <DropdownMenuPrimitive.ItemIndicator
                    style={INDICATOR_STYLE}
                  />
                </DropdownMenuPrimitive.RadioItem>
                <DropdownMenuPrimitive.RadioItem
                  value="colm"
                  closeOnPress={false}
                >
                  <Text>Foghorn Leghorn</Text>
                  <DropdownMenuPrimitive.ItemIndicator
                    style={INDICATOR_STYLE}
                  />
                </DropdownMenuPrimitive.RadioItem>
              </DropdownMenuPrimitive.RadioGroup>
            </DropdownMenuPrimitive.Content>
          </DropdownMenuPrimitive.Overlay>
        </DropdownMenuPrimitive.Portal>
      </DropdownMenuPrimitive.Root>
  );
}
```

--------------------------------

### Toast example with auto-dismiss and actions

Source: https://rnprimitives.com/toast

Complete example of a toast using Portal, ToastPrimitive, and useSafeAreaInsets. It shows a toast with a title, description, action and close buttons, and a trigger. The toast auto-dismisses after a countdown (default 3 seconds).

```tsx
import * React from 'react';
import { Pressable, Text, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Portal } from '@rn-primitives/portal';
import * as ToastPrimitive from '@rn-primitives/toast';


function Example() {
  const [open, setOpen] = React.useState(false);
  const [seconds, setSeconds] = React.useState(3);
  const insets = useSafeAreaInsets();


  React.useEffect(() => {
    let interval: ReturnType<typeof setInterval> | null = null;


    if (open) {
      interval = setInterval(() => {
        setSeconds((prevSeconds) => {
          if (prevSeconds <= 1) {
            setOpen(false);
            if (interval) {
              clearInterval(interval);
            }
            return 3;
          }
          return prevSeconds - 1;
        });
      }, 1000);
    } else {
      if (interval) {
        clearInterval(interval);
      }
      setSeconds(3);
    }


    if (interval && !open) {
      clearInterval(interval);
    }


    return () => {
      if (interval) {
        clearInterval(interval);
      }
    };
  }, [open, seconds]);


  return (
    <>
      {open && (
        <Portal name='toast-example'>
          <View style={{ top: insets.top + 4 }} className='px-4 absolute w-full'>
            <ToastPrimitive.Root
              type='foreground'
              open={open}
              onOpenChange={setOpen}
              className='opacity-95 bg-secondary border-border flex-row justify-between items-center p-4 rounded-xl'
            >
              <View className='gap-1.5'>
                <ToastPrimitive.Title className='text-foreground text-3xl'>Here is a toast</ToastPrimitive.Title>
                <ToastPrimitive.Description className='text-foreground text-lg'>
                  It will disappear in {seconds} seconds
                </ToastPrimitive.Description>
              </View>
              <View className='gap-2'>
                <ToastPrimitive.Action className='border border-primary px-4 py-2'>
                  <Text className='text-foreground'>Action</Text>
                </ToastPrimitive.Action>
                <ToastPrimitive.Close className='border border-primary px-4 py-2'>
                  <Text className='text-foreground'>Close</Text>
                </ToastPrimitive.Close>
              </View>
            </ToastPrimitive.Root>
          </View>
        </Portal>
      )}
      <View className='flex-1 justify-center items-center p-6 gap-12'>
        <Pressable onPress={() => setOpen((prev) => !prev)}>
          <Text className='text-foreground text-xl'>Show Toast</Text>
        </Pressable>
      </View>
    </>
  );
}
```

--------------------------------

### Install @rn-primitives/label via npx expo

Source: https://rnprimitives.com/label

Run this command to install the @rn-primitives/label component in your Expo project.

```bash
npx expo install @rn-primitives/label

```

--------------------------------

### Install @radix-ui/react-checkbox via npx expo

Source: https://rnprimitives.com/checkbox

Install the @radix-ui/react-checkbox package for the web implementation. This is required for the web checkbox component.

```bash
npx expo install @radix-ui/react-checkbox
```

--------------------------------

### Toolbar usage example with ToggleGroup and ToggleItem

Source: https://rnprimitives.com/toolbar

Example usage of the Toolbar component with single and multiple toggle groups, separators, and a button. Demonstrates controlled state for toggle values.

```tsx
import * as React from 'react';
import { Text, View } from 'react-native';
import * as ToolbarPrimitive from '@rn-primitives/toolbar';


function Example() {
  const [singleValue, setSingleValue] = React.useState<string>();
  const [multipleValue, setMultipleValue] = React.useState<string[]>([]);
  return (
    <ToolbarPrimitive.Root>
      <ToolbarPrimitive.ToggleGroup type='multiple' value={multipleValue} onValueChange={setMultipleValue}>
        <ToolbarPrimitive.ToggleItem value='bold'>
          <Text>Bold</Text>
        </ToolbarPrimitive.ToggleItem>
        <ToolbarPrimitive.ToggleItem value='italic'>
          <Text>Italic</Text>
        </ToolbarPrimitive.ToggleItem>
      </ToolbarPrimitive.ToggleGroup>
      <ToolbarPrimitive.Separator />
      <ToolbarPrimitive.ToggleGroup type='single' value={singleValue} onValueChange={setSingleValue}>
        <ToolbarPrimitive.ToggleItem value='left'>
          <Text>AlignLeft</Text>
        </ToolbarPrimitive.ToggleItem>
        <ToolbarPrimitive.ToggleItem value='center'>
          <Text>AlignCenter</Text>
        </ToolbarPrimitive.ToggleItem>
      </ToolbarPrimitive.ToggleGroup>
      <ToolbarPrimitive.Separator />
      <View>
        <ToolbarPrimitive.Button>
          <Text>Button</Text>
        </ToolbarPrimitive.Button>
      </View>
    </ToolbarPrimitive.Root>
  );
}
```

--------------------------------

### Basic Accordion Example with @rn-primitives/accordion

Source: https://rnprimitives.com/accordion

Shows a basic accordion using AccordionPrimitive.Root, Item, Trigger, and Content. The Root uses type='multiple' and collapsible, with defaultValue set to ['item-1']. Each Item has a Trigger and Content with text. This example demonstrates the WAI-ARIA design pattern.

```tsx
import * as AccordionPrimitive from '@rn-primitives/accordion';


function Example() {
  return (
    <AccordionPrimitive.Root
        type='multiple'
        collapsible
        defaultValue={['item-1']}
      >
        <AccordionPrimitive.Item value='item-1'>
          <AccordionPrimitive.Trigger>
            <Text>Is it accessible?</Text>
          </AccordionPrimitive.Trigger>
          <AccordionPrimitive.Content>
            <Text>Yes. It adheres to the WAI-ARIA design pattern.</Text>
          </AccordionPrimitive.Content>
        </AccordionPrimitive.Item>
        <AccordionPrimitive.Item value='item-2'>
          <AccordionPrimitive.Trigger>
            <Text>What are universal components?</Text>
          </AccordionPrimitive.Trigger>
          <AccordionPrimitive.Content>
            <Text>
              In the world of React Native, universal components are components that work on both
              web and native platforms.
            </Text>
          </AccordionPrimitive.Content>
        </AccordionPrimitive.Item>
      </AccordionPrimitive.Root>
  );
}
```

--------------------------------

### Basic HoverCard example

Source: https://rnprimitives.com/hover-card

Shows a basic HoverCard with a trigger and content. The trigger displays '@nextjs' and the content shows a description and metadata.

```tsx
import * as HoverCardPrimitive from '@rn-primitives/hover-card';
import { Text, View } from 'react-native';


function Example() {
  return (
        <HoverCardPrimitive.Root>
          <HoverCardPrimitive.Trigger>
              <Text>@nextjs</Text>
          </HoverCardPrimitive.Trigger>
          <HoverCardPrimitive.Content>
            <View>
              <Text>@nextjs</Text>
              <Text>
                The React Framework – created and maintained by @vercel.
              </Text>
              <View>
                <Text>
                  Joined December 2021
                </Text>
              </View>
            </View>
          </HoverCardPrimitive.Content>
        </HoverCardPrimitive.Root>
  );
}
```

--------------------------------

### Manual setup: label.web.tsx

Source: https://rnprimitives.com/label

Copy this code to ~/components/primitives/label/label.web.tsx for web support. It uses @radix-ui/react-label and Slot to render a Pressable or Text component.

```tsx
import * as Label from '@radix-ui/react-label';
import { Slot } from '~/components/primitives/slot';
import * as React from 'react';
import { Pressable, Text as RNText } from 'react-native';
import type { RootProps, RootRef, TextProps, TextRef } from './types';
type RootComponentProps = RootProps & React.RefAttributes<RootRef>;


const Root = ({ asChild, tabIndex = -1, ref, ...props }: RootComponentProps) => {
  const Component = asChild ? Slot : Pressable;
  return <Component ref={ref} tabIndex={tabIndex} {...props} />;
};


Root.displayName = 'RootWebLabel';
type TextComponentProps = TextProps & React.RefAttributes<TextRef>;


const Text = ({ asChild, nativeID, htmlFor, ref, ...props }: TextComponentProps) => {
  const Component = asChild ? Slot : RNText;
  return (
    <Label.Root asChild={!htmlFor} id={nativeID} htmlFor={htmlFor}>
      <Component ref={ref} {...props} />
    </Label.Root>
  );
};


Text.displayName = 'TextWebLabel';


export { Root, Text };

```

--------------------------------

### Install @rn-primitives/checkbox via npx expo

Source: https://rnprimitives.com/checkbox

Install the @rn-primitives/checkbox component using the Expo CLI. Run this command in your project root to add the dependency.

```bash
npx expo install @rn-primitives/checkbox
```

--------------------------------

### Collapsible usage example

Source: https://rnprimitives.com/collapsible

Shows how to use the Collapsible component with Root, Trigger, and Content. The Trigger toggles the visibility of the Content. The example uses the @rn-primitives/collapsible package.

```tsx
import * as CollapsiblePrimitive from '@rn-primitives/collapsible';


function Example() {
  return (
      <CollapsiblePrimitive.Root>
            <CollapsiblePrimitive.Trigger >
               <Text>Toggle</Text>
            </CollapsiblePrimitive.Trigger>
            <CollapsiblePrimitive.Content >
              <Text>@radix-ui/react</Text>
            </CollapsiblePrimitive.Content>
      </CollapsiblePrimitive.Root>
  );
}

```

--------------------------------

### useControllableState example

Source: https://rnprimitives.com/hooks

Demonstrates a controlled/uncontrolled pattern using useControllableState for an open state with defaultOpen, open, and onOpenChange props.

```typescript
import * as React from 'react';
import { Pressable } from 'react-native';
import { useControllableState } from '@rn-primitives/hooks';
import type { PressableRef, SlottablePressableProps } from '@rn-primitives/types';


type ThingProps = SlottablePressableProps &
  React.RefAttributes<PressableRef> & {
    defaultOpen?: boolean;
    open?: boolean;
    onOpenChange?: (open: boolean) => void;
  };


function Thing({
  defaultOpen,
  open: openProp,
  onOpenChange: onOpenChangeProp,
  onPress: onPressProp,
  ref,
  ...props
}: ThingProps) {
  const [open = false, onOpenChange] = useControllableState({
    prop: openProp,
    defaultProp: defaultOpen,
    onChange: onOpenChangeProp,
  });


  function onPress() {
    onOpenChange(!open);
    onPressProp?.();
  }


  return <Pressable ref={ref} onPress={onPress} {...props} />;
}

```