RN Primitives Documentation

React Native Primitives provides unstyled, accessible building blocks for React Native applications. It offers a unified API that works across iOS, Android, and Web.

Key characteristics include:

• Truly Universal: Uses a single API for all platforms. The web implementation is powered by Radix UI, while native platforms use native implementations.
• Accessible by Default: Includes built-in screen-reader support, focus management, and platform-correct semantics.
• Unstyled: Components ship with zero styles, allowing you to integrate them into any design system without fighting existing CSS or style objects.
• Flexible Integration: You can either install the components via npm packages or copy the source code directly into your project to have full control.

RN Primitives is a collection of universal, style-agnostic, and accessible React Native components.

Key characteristics:

• Unstyled Nature: Components are provided without predefined styles, giving developers full freedom to implement their own aesthetics and match their app's design system.
• Accessibility: Components are designed and tested to align with accessibility standards, including appropriate labels, roles, and behaviors to ensure an inclusive user experience.

A Starlight project follows a specific directory structure for content and assets:

• src/content/docs/: The primary location for documentation. Starlight treats every .md or .mdx file in this directory as a route based on its filename.
• src/assets/: Place images here to embed them in Markdown using relative links.
• public/: Place static assets like favicons here.
• astro.config.mjs: The main configuration file for Astro.
• tailwind.config.mjs: Configuration for Tailwind CSS.

.
├── public/
├── src/
│   ├── assets/
│   ├── content/
│   │   ├── docs/
│   │   └── config.ts
│   └── env.d.ts
├── astro.config.mjs
├── package.json
├── tailwind.config.mjs
└── tsconfig.json

If you are building custom components that need to interact with the Toggle Group state, use the provided context hooks:

• useRootContext: Must be used within a Root component. It provides access to value, onValueChange, type, and disabled.
• useItemContext: Must be used within a ToggleItem component. It provides access to the item's value.

Portals allow you to render children into a different part of your application tree. The system relies on two main components:

1. PortalHost: The destination where content will be rendered. By default, there is a single implicit host.
2. Portal: The component that wraps the content you want to teleport.

Default Behavior: If you don't specify a hostName on a <Portal />, its children will render into the default <PortalHost />.

When a prop exists on both the Slot and its child, they are combined according to these rules:

You can access the internal state of the dropdown menu using context hooks if you are building custom components inside the menu hierarchy.

• useRootContext: Must be used within a Root component. It provides open and onOpenChange.
• useSubContext: Must be used within a Sub component. It provides open and onOpenChange.

You can use context hooks to access the state of the accordion or specific items within your custom components.

• useRootContext: Must be used within a Root component. It provides access to type, disabled, collapsible, value, and onValueChange.
• useItemContext: Must be used within an Item component. It provides access to value, disabled, and isExpanded.

You can install the Dialog component via NPM. Note that it requires @rn-primitives/portal as a peer dependency. If you don't have it, install both.

npx expo install @rn-primitives/dialog
# If you don't have portal installed:
npx expo install @rn-primitives/portal

If you choose to install manually, you must copy the component code and its types to your local directory. Note that this primitive depends on @rn-primitives/types and @rn-primitives/slot. If these are not already in your project, you must add them first.

1. Copy the component implementation to ~/components/primitives/avatar/index.tsx.
2. Copy the type definitions to ~/components/primitives/avatar/types.ts.