Generate Expert React Native Components

This is a React Native component-development skill covering cross-platform architecture, performance, accessibility, animation, error handling, and testing patterns for iOS and Android. Its core component pattern combines memo, forwardRef, and useImperativeHandle to build typed, ref-controllable components:

export const CustomButton = memo(forwardRef<ButtonMethods, CustomButtonProps>(
  ({ variant, size, loading, leftIcon, rightIcon, children, style, ...props }, ref) => {
    const buttonRef = useRef<View>(null);
    
    useImperativeHandle(ref, () => ({
      focus: () => buttonRef.current?.focus(),
      blur: () => buttonRef.current?.blur(),
    }));

    return (
      <Pressable
        ref={buttonRef}
        style={({ pressed }) => [
          styles.base,
          styles[variant],
          styles[size],
          pressed && styles.pressed,
          loading && styles.loading,
          style,
        ]}
        disabled={loading}
        {...props}
      >
        {leftIcon}
        <Text style={[styles.text, styles[`${variant}Text`]]}>
          {children}
        </Text>
        {rightIcon}
      </Pressable>
    );
  }
));

Platform differences are handled through Platform.select (iOS shadow properties versus Android elevation, or loading a separate .ios/.android file per platform) rather than runtime branching inside a single component. Performance patterns cover memoized list items with useCallback-wrapped renderItem/keyExtractor/getItemLayout plus FlatList tuning props (removeClippedSubviews, maxToRenderPerBatch, updateCellsBatchingPeriod, windowSize), and a custom useKeyboard hook that tracks keyboard height and visibility via platform-specific keyboardWillShow/keyboardDidShow event names.

Use this skill when building reusable, typed React Native components that need to behave correctly on both iOS and Android - anywhere platform differences in styling, keyboard events, or native modules would otherwise require ad hoc branching. It also covers accessibility (AccessibilityInfo.isScreenReaderEnabled, full accessibilityRole/accessibilityLabel/accessibilityHint/accessibilityState wiring), gesture-driven animation via Reanimated 3 and react-native-gesture-handler, and component-level error boundaries. It is not a state-management or navigation skill - it's scoped to the component layer itself (structure, styling, performance, accessibility, animation, testing), so it isn't the right fit for app-wide architecture decisions like navigation stacks or global state.

Input is a component's props, typed via TypeScript interfaces like the CustomButtonProps example above, and its rendering logic; output is a memoized, forwardRef-capable, accessible React Native component. For lists, input is a data array and output is an OptimizedList built on FlatList with memoized item rendering. For animation, input is a Gesture.Pan handler's translation and output is an animated style driven by useSharedValue/useAnimatedStyle, with runOnJS used to call back into JS once a gesture threshold is crossed. For error handling, a ComponentErrorBoundary class component takes children and an optional fallback, catching errors via getDerivedStateFromError/componentDidCatch and rendering a "Try Again" reset UI on failure. For testing, a renderWithProviders helper wraps a component in SafeAreaProvider and ThemeProvider before rendering with @testing-library/react-native.

Built on React Native core APIs (Platform, StatusBar, AccessibilityInfo, Keyboard, FlatList), react-native-safe-area-context, react-native-reanimated (v3) with react-native-gesture-handler for gesture-driven animation, and @testing-library/react-native for component tests.

React Native developers building reusable, cross-platform UI components who need consistent patterns for typed props, platform-specific styling, list performance, accessibility, gesture animation, error boundaries, and component tests, rather than solving each concern differently per component.