playbooks

home / skills / shipshitdev / library / react-native-components

react-native-components skill

/bundles/frontend/skills/react-native-components

This skill helps you build high-performance React Native 0.79.5 components with accessible UI, styling patterns, and optimized lists.

npx playbooks add skill shipshitdev/library --skill react-native-components

Review the files below or copy the command above to add this skill to your agents.

Files (3)
SKILL.md
1.6 KB
---
name: react-native-components
description: Master React Native 0.79.5 components, styling, performance optimization, and mobile UI best practices with real-world examples
category: mobile
tags: [react-native, components, styling, performance, ui, accessibility, hooks]
version: 1.0.0
difficulty: advanced
---

# 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)

Overview

This skill teaches mastering React Native 0.79.5 component design, styling patterns, and mobile performance techniques. It focuses on practical, maintainable UI building blocks, accessible interfaces, and real-world optimization examples for production apps.

How this skill works

The skill inspects common component patterns (View, Text, Image, ScrollView, FlatList) and demonstrates StyleSheet strategies that reduce re-renders and improve runtime performance. It shows when to apply memoization, hooks like useCallback/useMemo, and list tuning options (initialNumToRender, windowSize) while recommending platform-specific adjustments and responsive patterns.

When to use it

  • Building reusable, maintainable React Native UI components
  • Applying StyleSheet.create, array styles, and dynamic/responsive layouts
  • Optimizing long lists and FlatList rendering for smooth scrolling
  • Adding accessibility and mobile-first UI improvements
  • Creating custom hooks to encapsulate mobile behavior

Best practices

  • Use StyleSheet.create for static styles and array syntax for conditional styles
  • Prefer React.memo for pure components and useCallback/useMemo for handlers and expensive computations
  • Tune FlatList with initialNumToRender, windowSize, and keyExtractor for large lists
  • Use useWindowDimensions and Platform.select for responsive and platform-specific styles
  • Swap to optimized image components (like expo-image) for better caching and performance

Example use cases

  • Build a performant feed using FlatList with memoized item components and tuned rendering windows
  • Create a reusable card component using StyleSheet.create and conditional styling arrays
  • Implement accessible form inputs and labels that follow mobile accessibility guidelines
  • Write a custom hook to manage orientation, safe-area insets, and responsive spacing
  • Optimize an image gallery by replacing Image with a caching image component and prefetching

FAQ

When should I use ScrollView vs FlatList?

Use ScrollView for small, bounded content and FlatList for long or unbounded lists (usually > 50 items) to avoid memory and performance issues.

How do I avoid unnecessary re-renders in lists?

Memoize item components with React.memo, provide stable keys, use useCallback for handlers, and tune FlatList props like initialNumToRender and windowSize.