# React Native Elements — Cross-Platform UI Toolkit for React Native

> A collection of customizable, production-ready UI components for React Native that provide consistent styling across iOS, Android, and Web.

## Install

Save the content below to `.claude/skills/` or append to your `CLAUDE.md`:

# React Native Elements — Cross-Platform UI Toolkit for React Native

## Quick Use
```bash
npm install @rneui/themed @rneui/base
```
```jsx
import { Button, Input } from '@rneui/themed';
export default function App() {
  return (
    <>
      <Input placeholder="Email" />
      <Button title="Sign In" />
    </>
  );
}
```

## Introduction
React Native Elements provides a set of ready-to-use, themeable UI components for React Native. It eliminates the need to build common UI patterns from scratch by offering buttons, cards, inputs, avatars, and dozens more. Each component works across iOS, Android, and Web with minimal configuration.

## What React Native Elements Does
- Supplies 30+ pre-built components (Button, Card, ListItem, Overlay, etc.)
- Supports a global theme provider for consistent styling across the app
- Works on iOS, Android, and React Native Web
- Integrates with both Expo and bare React Native projects
- Provides TypeScript definitions for every component

## Architecture Overview
The library is organized into two packages: `@rneui/base` for unstyled primitives and `@rneui/themed` for components wrapped in a ThemeProvider. The ThemeProvider uses React Context to inject a theme object into every component. Each component merges default styles with theme overrides and inline props, allowing granular customization without forking.

## Self-Hosting & Configuration
- Install base and themed packages via npm or yarn
- Wrap your app root with `<ThemeProvider>` for global theming
- Override individual component styles through the `theme` prop or `createTheme()`
- Use `@rneui/themed` for themed components or `@rneui/base` for unstyled variants
- Compatible with Expo SDK and bare React Native CLI projects

## Key Features
- Consistent look and feel across platforms with one API
- Global theme system with light/dark mode support
- Fully typed with TypeScript generics
- Accessibility props forwarded to underlying native elements
- Smooth integration with React Navigation and other RN libraries

## Comparison with Similar Tools
- **NativeBase** — more opinionated design system with utility-style props
- **React Native Paper** — Material Design focused, tighter Material spec adherence
- **Tamagui** — compiler-driven, targets both web and native with shared styles
- **Gluestack UI** — newer universal component library with headless primitives
- **Shoutem UI** — smaller community, less actively maintained

## FAQ
**Q: Does it work with Expo?**
A: Yes, all components work with Expo out of the box. No native linking required.

**Q: How do I customize the default theme?**
A: Pass a custom theme object to `<ThemeProvider theme={myTheme}>` or use `createTheme()` to merge with defaults.

**Q: Can I use individual components without the theme provider?**
A: Yes, import from `@rneui/base` to use components without theme context.

**Q: Is React Native Web supported?**
A: Yes, most components render correctly on web through React Native Web.

## Sources
- https://github.com/react-native-elements/react-native-elements
- https://reactnativeelements.com

---
Source: https://tokrepo.com/en/workflows/react-native-elements-cross-platform-ui-toolkit-react-native-d37b36ac
Author: AI Open Source