Built for iOS & Android
35+ native-grade mobile components with platform-specific variants, touch target specs, and React Native code. Every component follows iOS Human Interface Guidelines and Android Material You.
App Bar iOSAndroid
The top navigation bar shows context, title, and primary actions. iOS centers the title; Android left-aligns it.
| Property | iOS (pt) | Android (dp) |
|---|---|---|
| Height | 44pt | 64dp |
| Title size | 17pt · 600 | 20sp · 500 |
| Icon touch target | 44×44pt | 48×48dp |
Bottom Tab Bar iOSAndroid
Primary navigation for switching between top-level sections. iOS uses icon+label; Android uses an active indicator pill.
| Property | iOS (pt) | Android (dp) |
|---|---|---|
| Bar height | 82pt (incl. safe area) | 80dp |
| Icon size | 25×25pt | 24×24dp |
| Max items | 5 | 5 |
| Badge size | 8pt dot / 16pt label | 8dp dot / 16dp label |
Bottom Sheet iOSAndroid
Surfaces that slide up from the bottom edge. Use for contextual actions without a full-screen takeover.
// Install: @gorhom/bottom-sheet import BottomSheet, {BottomSheetView} from '@gorhom/bottom-sheet'; const MySheet = () => { const snapPoints = ['40%', '85%']; return ( <BottomSheet snapPoints={snapPoints} backgroundStyle={{ backgroundColor: '#fff', borderRadius: 14 }}> <BottomSheetView> // content </BottomSheetView> </BottomSheet> ); };
Action Sheet iOS
iOS-native contextual menu that appears at the bottom. Always include a Cancel button as a separate grouped card.
Floating Action Button AndroidiOS
The primary action on a screen. Use one FAB per view. The extended variant adds a label for clarity.
| Variant | Size | Token |
|---|---|---|
| Standard FAB | 56×56dp | --radius-full |
| Mini FAB | 40×40dp | --radius-full |
| Extended FAB | 56dp height | --radius-full |
Chips AndroidiOS
Compact, interactive elements for filtering, input, and suggestions. Chips are smaller and more specific than buttons.
List Items iOSAndroid
The most common mobile pattern. Minimum touch target 44pt (iOS) / 48dp (Android). Every row must be tappable end-to-end.
Swipe Actions iOSAndroid
Reveal contextual actions by swiping a list row. Left swipe for secondary actions (archive), right swipe for destructive (delete).
Cards iOSAndroid
Cards group related content into a scannable unit. On mobile, prefer full-width cards with clear hierarchy.
Text Fields AndroidiOS
Material Filled is the default Android style. iOS uses a bordered or underline approach. Always float the label on focus.
const styles = StyleSheet.create({ container: { marginHorizontal: 16, marginBottom: 16 }, label: { fontSize: 13, fontWeight: '500', color: '#000', marginBottom: 6 }, input: { borderWidth: 1.5, borderColor: 'rgba(60,60,67,.2)', borderRadius: 10, padding: 12, fontSize: 16, backgroundColor: '#fff', }, inputFocused: { borderColor: '#7a5af8' }, inputError: { borderColor: '#ff3b30' }, });
Search Bar iOSAndroid
iOS uses an inline rounded pill. Android uses an elevated bar that expands. A Cancel/back button always appears on focus.
Snackbar AndroidiOS
Brief, non-blocking feedback at the bottom of the screen. Auto-dismisses after 4 seconds. One optional action, no icons.
Skeleton Loading iOSAndroid
Show skeleton screens instead of spinners whenever content structure is known. Reduces perceived load time.
Empty State iOSAndroid
When a list or view has no content. Always explain why it's empty and provide a clear next action.
Safe Areas iOSAndroid
Respect the status bar, Dynamic Island, and home indicator. Never place interactive elements inside safe area insets.
| Zone | iOS (pt) | Android (dp) |
|---|---|---|
| Status bar | 44–59pt | 24dp |
| Home indicator | 34pt | 0 (gesture nav) |
| Side insets (notch) | 0pt (vertical notch) | varies |
| RN SafeAreaView | react-native-safe-area-context | |
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context'; // Wrap app root <SafeAreaProvider> <App /> </SafeAreaProvider> // In screen components <SafeAreaView edges={['top', 'bottom']} style={{ flex: 1 }}> // screen content </SafeAreaView>
Touch Targets iOSAndroid
Every interactive element must meet the minimum touch target size even if the visual appears smaller.
| Platform | Minimum Touch Target | Recommended | Note |
|---|---|---|---|
| iOS (HIG) | 44×44pt | 44×44pt | Use hitSlop to expand small targets |
| Android (Material) | 48×48dp | 48×48dp | Minimum 8dp gap between targets |
| WCAG 2.5.5 | 44×44px CSS | 44×44px | Level AA requirement |
// Expand touch area beyond visual bounds <TouchableOpacity hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }} onPress={handlePress} > <Icon size={20} /> // Visual 20px, touch 44×44 </TouchableOpacity>