DOCSEARCHbyAlgolia
Submit Docs

Reacticx Documentation

repository·main·Indexed 23 days ago

https://github.com/rit3zh/reacticx

A library of accessible React Native components for mobile applications. Features include a comprehensive UI kit with components such as Card, Dialog, Breadcrumbs, ExpandableButton, AvatarGroup, and Center, as well as the reacticx-ui package (v1.21.0).

Tokens
73.8K
Snippets
175
Records
544
Agent score
79%

What's inside Reacticx

  2. Key features of Reactix

    main

    Reactix distinguishes itself from other UI libraries through several core principles:

    • Copy & Paste: Unlike traditional libraries, there is no mandatory package installation required. You can simply copy the code you need directly into your project.
    • Transparent Code: Components are designed to be readable and modifiable, allowing you to learn from them and customize them to your specific needs.
    • Mobile First: The library is built specifically for mobile environments, prioritizing gestures, transitions, and touch feedback.
    • Production Ready: It utilizes React Native Reanimated and Skia to ensure smooth, 60fps animations and professional-grade performance.

  3. How Settings V1 components work together

    main

    Settings V1 uses a compound component pattern (similar to Radix UI). You compose the screen declaratively by nesting primitives. The components do not manage their own state; you are responsible for managing state (like toggle values) and passing them down as props.

    Every settings screen follows this hierarchy:

    1. Root: The top-level container.
    2. Section: Groups related items, optionally containing a Label (header) and a Footer.
    3. Group: A card-like container with rounded corners that automatically handles separators between items.
    4. Item or LargeItem: The individual rows within a group.
    5. Content: A flex container inside an item to hold Title, Subtitle, or Value components.
    <Settings.Root>
  <Settings.Section>
    <Settings.Label>Section Title</Settings.Label>
    <Settings.Group>
      <Settings.Item>
        {/* children */}
      </Settings.Item>
    </Settings.Group>
    <Settings.Footer>Helper text goes here.</Settings.Footer>
  </Settings.Section>
</Settings.Root>

  4. The component request lifecycle

    main

    Once a request is submitted, it typically follows these steps:

    1. Community feedback: Other users upvote and comment. Higher interest leads to higher priority.
    2. Triage: Maintainers review the request and apply labels for tracking.
    3. Implementation: Accepted components are added to the roadmap and built.
    4. Release: The component is shipped in a future release and documented in the official docs.

  5. How to use custom components in toasts

    main
    Instead of passing a simple string to Toast.show or toast.show, you can pass any valid React component. This allows you to create highly customized notification layouts with specific icons, colors, and internal structures.