# React Native Components

> Master React Native 0.79.5 components, styling, performance optimization, and mobile UI best practices with real-world examples. Use when building React Native UI components, implementing StyleSheet or dynamic styling, optimizing list performance, or creating accessible mobile interfaces.

- Skill: `shipshitdev/react-native-components` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds add shipshitdev/react-native-components`
- Raw SKILL.md: https://api.skillmd.com/api/skills/shipshitdev/react-native-components/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-09
- Page: https://skillmd.com/skills/shipshitdev/react-native-components

---


# React Native Component Patterns Expert

## When to Use

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)