DOCSEARCHbyAlgolia
Submit Docs

React Native Molecules

website·Indexed 32 days ago

https://molecules.taylordb.ai

A comprehensive library of React Native and Web components featuring Material 3 compliant UI elements. It includes a wide array of components such as Appbar, Button, Dialog, and NavigationRail, along with performance utilities like FastContext and ContextBridge for managing complex state and render boundaries.

Tokens
34.1K
Snippets
160
Records
200
Agent score
50%

What's inside React Native Molecules

  1. Overview of the Chip component

    The Chip component is used to display inline metadata, attributes, selections, or quick filters that can be toggled. It is ideal for representing tokens such as skills, tags, or statuses, and for implementing inline filters in tables or feeds. The component supports icon and avatar slots, as well as onPress and onClose gestures.

  2. Overview of FastContext performance benefits

    FastContext is designed for large applications with complex state where traditional React Context would cause excessive re-renders. Key benefits include:

    • Selector-based subscriptions: Components only re-render when the specific data returned by a selector changes.
    • Ref-based store access: Use useStoreRef to read current values without triggering a component re-render.
    • Fine-grained updates: Update specific parts of the store without affecting unrelated components.
    • Customizable equality: Use custom equality functions to determine if a selector's result has actually changed.

  3. Overview of ContextBridge for React context bridging

    ContextBridge is a utility designed to bridge React contexts across render boundaries. It is primarily used when components are rendered outside the normal React tree (e.g., via portals or modals) but still require access to context values from the parent tree. It supports dynamic context registration at runtime and provides full TypeScript support.

  4. Overview of React Native Molecules

    React Native Molecules is a comprehensive library of React Native and Web components powered by Material 3 tokens. It is built on top of react-native-unistyles for high performance and uses CSS variables for efficient theming on the web. The library is modular and avoids barrel files to ensure better tree-shaking. It allows for full customization of internal component implementations via a register pattern and provides a unified design across platforms.

  5. Select Compound Components Reference

    The Select component uses a compound component architecture to allow high customization of the trigger and dropdown areas.
    Select.Trigger // The wrapper for the selection trigger
Select.Value   // The display value/placeholder of the select
Select.Content // The container for options (supports render function)
Select.Option  // An individual selectable item
Select.Dropdown // The wrapper for the dropdown menu
Select.SearchInput // The search field for filtering options

  6. Use the Badge component for status and count indicators

    The Badge component is a compact indicator used to surface unread counts, severity states, or quick metadata. It is typically attached to icons, avatars, or text. Common use cases include showing numeric counters on navigation icons or indicating object states such as 'live', 'draft', or 'offline'.

  7. Use the Rating component for star ratings

    The Rating component is used to capture user feedback scores or display aggregated ratings (typically 1-5 stars). It supports fractional display, animations, and custom icon/color tokens. It is ideal for content reviews or inline analytics that require quick scanning.
    import { Rating } from 'react-native-molecules/components/Rating';

export default function Example() {
  return <Rating count={5} />;
}

  8. Prerequisites for React Native Molecules

    Before installing React Native Molecules, ensure your project meets these requirements:

    • React Native New Architecture: The library is built specifically for the New Architecture (Fabric).
    • React 19+: Requires React version 19 or higher.

  9. Use LoadingIndicator for indeterminate progress

    The LoadingIndicator component provides a visually engaging, morphing shape animation (7 distinct shapes) to indicate that an asynchronous operation is in progress. It is intended for use when a standard spinner is insufficient for the desired app aesthetic.
    import { LoadingIndicator } from 'react-native-molecules/components/LoadingIndicator';

export default function Example() {
  return <LoadingIndicator />;
}

  10. Implement a cross-platform file picker with FilePicker

    The FilePicker component provides a unified experience for selecting documents, media, or arbitrary files, abstracting the differences between native DocumentPicker and web upload mechanisms. It is ideal for forms requiring attachments where preview and metadata extraction occur client-side.

  11. Implement a Card component

    The Card component is a composable surface used to group related content. It inherits from Surface for elevation and can be used for preview tiles in dashboards or media-rich summaries with call-to-actions (CTAs).

  12. Use the Divider component for layout separation

    The Divider component provides a thin separator for lists, toolbars, and stacked layouts. It is horizontal by default and can be used to separate list rows, settings sections, or split inline actions in an Appbar or toolbar.