Skip to main content

Welcome to React Native Molecules

React Native Molecules is a comprehensive library of React Native + Web components powered by Material 3 tokens. Every component ships with production-ready props, sensible defaults, and live playground examples inside this documentation site.

Why React Native Molecules?​

  • High Performance – Built on top of react-native-unistyles, delivering excellent performance. On the web, it leverages CSS variables for efficient theming.
  • Modular & Lightweight – No barrel files means better tree-shaking. Components are self-registerable, so you only need to install external dependencies (like @react-native-documents/picker) if you use the specific components that require them.
  • Fully Customizable – Easily replace any internal component implementation using our register pattern or customize styles to match your brand.
  • Unified Design – Ships with Material 3 tokens by default, ensuring a consistent look and feel across React Native and Web.

What you can find here​

  • Component deep dives with behavior notes, prop tables, and live code examples.
  • Hooks & utilities that complement the component catalog and simplify state, context, and accessibility.
  • Guides for theming, responsive layouts, and platform-specific optimizations.

Quick example​

import { Button } from 'react-native-molecules/components/Button';

export function MyComponent() {
    return <Button onPress={() => console.log('Pressed!')}>Click me</Button>;
}

Next steps​

  1. Review the Installation guide to add the package and peer dependencies.
  2. Walk through Customization to connect React Native Molecules to your design tokens.
  3. Explore the component, hooks, and utilities sections using the sidebar.