Cross-platform mobile UI component libraries provide pre-built, customizable interface elements that work consistently across iOS, Android, and web platforms. These libraries implement platform-specific design languages—Material Design for Android, Human Interface Guidelines for iOS—while enabling code reuse and maintaining native look-and-feel. Modern component libraries support theming through design tokens, offer built-in accessibility compliance, and provide adaptive patterns that respond to screen size, platform conventions, and user preferences. Understanding how to leverage these libraries accelerates development while ensuring polished, accessible user experiences across all target platforms.
What This Cheat Sheet Covers
This topic spans 12 focused tables and 81 indexed concepts. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.
Table 1: React Native Component Libraries
These are the go-to UI kits for React Native, each making a different bet on design language and styling approach—Paper leans into Material Design 3, Elements aims for neutral cross-platform consistency, and UI Kitten ships its own Eva Design System with runtime theme switching. The most important nuance to catch is that NativeBase is now deprecated in favor of gluestack-ui, so new projects should reach for the successor.
| Library | Example | Description |
|---|---|---|
import { Button } from 'react-native-paper';<br><Button mode="contained">Press</Button> | • Material Design 3 implementation for React Native with 40+ components, theming support, and automatic platform adaptation • supports Material You dynamic colors on Android 12+. | |
import { Button } from '@rneui/base';<br><Button title="Click" /> | • Cross-platform toolkit with 30+ customizable components • consistent design across iOS, Android, and web • built in TypeScript with full type definitions | |
import { Button } from 'native-base';<br><Button>Text</Button> | • Accessible component library with 40+ widgets • now deprecated in favor of gluestack-ui • provides utility props powered by Styled System for rapid styling |