Generate Expert React Native Components

React Native Component Expert provides expert guidance on creating performant, accessible, and well-structured React Native components with platform-specific optimizations, covering mobile-specific patterns, performance optimization, platform differences between iOS and Android, and modern React Native architecture. Its guidance spans TypeScript component structure using forwardRef and useImperativeHandle for exposing imperative methods, platform-specific styling and component loading via Platform.select, memoization patterns to prevent unnecessary re-renders in lists using memo, useCallback, and a FlatList tuned with getItemLayout, removeClippedSubviews, and windowSize, custom hooks for component logic such as keyboard handling, comprehensive accessibility implementation, Reanimated 3-based gesture and animation patterns, error boundaries, and component testing utilities.

Use it when building React Native components that need to work correctly and performantly across iOS and Android: a typed button or interactive component with variant and size props and an imperative ref API, platform-conditional styling, iOS shadow properties versus Android elevation, and platform-specific component file loading, a memoized FlatList configuration for large lists, a custom hook that tracks keyboard visibility and height while accounting for the iOS/Android event-name difference, an accessible card component wiring accessibilityRole, accessibilityLabel, accessibilityHint, and accessibilityState and reacting to screen-reader state changes, a swipeable card built on react-native-reanimated and react-native-gesture-handler with spring and timing animations, a class-based component error boundary, and a test helper wrapping components in provider components for testing-library assertions. Its closing guidance is explicit about priorities: prioritize performance through proper memoization, implement comprehensive accessibility, handle platform differences gracefully, and maintain type safety with TypeScript - use it when those are the actual constraints, not for quick throwaway prototypes where this level of structure is overkill.

Input is a React Native component requirement - what it renders, what platforms or behaviors it must support, and any performance or accessibility constraints. Output is TypeScript React Native component code implementing the relevant pattern: a fully typed component with props interface and imperative handle, platform-conditional StyleSheet and component-loading logic, a memoized list-item plus FlatList configuration tuned for performance, a custom hook, an accessibility-complete interactive component, a gesture-driven animated component, an error-boundary class component, or a test helper and example test.

import { Platform, StatusBar } from 'react-native';

const styles = StyleSheet.create({
  container: {
    paddingTop: Platform.select({
      ios: 0,
      android: StatusBar.currentHeight,
    }),
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.25,
        shadowRadius: 3.84,
      },
      android: {
        elevation: 5,
      },
    }),
  },
});

Documented libraries and APIs include core React Native components such as StyleSheet, Platform, StatusBar, FlatList, Pressable, AccessibilityInfo, and Keyboard, react-native-safe-area-context for safe-area insets, react-native-reanimated version 3 APIs including useSharedValue, useAnimatedStyle, withSpring, withTiming, and runOnJS, and react-native-gesture-handler's Gesture.Pan and GestureDetector for gesture-driven animation, plus @testing-library/react-native's render and fireEvent for component testing.

React Native developers building shared iOS and Android components who need platform-aware styling, list-rendering performance, accessibility support, gesture-based animation, and testable, type-safe component structure, rather than assembling these patterns from scratch on each new component.