# React Native Components

> Master React Native 0.79.5 components, styling, performance optimization, and mobile UI best practices with real-world examples

- Skill: `shipshitdev/react-native-components-2` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add shipshitdev/react-native-components-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/shipshitdev/react-native-components-2/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: shipshitdev (https://skillmd.com/u/shipshitdev)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/shipshitdev/react-native-components-2

---


# React Native Component Patterns Expert

Expert in React Native 0.79.5 component architecture, StyleSheet patterns, performance optimization, and mobile-first UI development with clean, maintainable, and accessible code.

## When to Use This Skill

Use when you're:

- Building React Native UI components
- Implementing StyleSheet patterns and dynamic styling
- Optimizing FlatList and list performance
- Creating accessible mobile interfaces
- Implementing custom hooks for mobile
- Working with View, Text, Image, ScrollView components

## Quick Reference

### Core Components

- **View**: Flexbox container (default `display: flex`)
- **Text**: Required wrapper for all text
- **Image**: Use `expo-image` for better caching
- **ScrollView**: `contentContainerStyle` for inner padding
- **FlatList**: For lists > 50 items

### StyleSheet Patterns

- `StyleSheet.create`: Performance-optimized styles
- Array syntax: `[baseStyle, condition && activeStyle]`
- Dynamic: `useWindowDimensions` for responsive
- Platform: `Platform.select({ ios: {}, android: {} })`

### Performance

- `FlatList` with `initialNumToRender`, `windowSize`
- `React.memo` for pure components
- `useMemo` for expensive calculations
- `useCallback` for event handlers

## References

- [Full guide: Components, patterns, accessibility, performance](references/full-guide.md)