react-native-component-generator_skill

Overview

This skill generates production-ready React Native components with TypeScript, platform-specific code paths, animations, and mobile-first patterns. It scaffolds components (including platform-specific files), hooks, optimized lists, and native module wrappers to accelerate mobile UI development.

How this skill works

I ask for component name, target platforms, prop types, styling preference, animation needs, and any native modules. Then I output a TypeScript component structure with optional Platform.select or platform-specific filename variants, TypeScript interfaces, styles, hooks for state/validation, and example usage. I can also produce optimized FlatList implementations, animated wrappers, and native integration stubs.

When to use it

• You need a new React Native UI component scaffolded with TypeScript and platform differences.
• You want a cross-platform component with ios/android-specific behavior or files.
• You need an animated or performance-optimized list component (FlatList) quickly.
• You want a form input with validation and accessibility-ready markup.
• You need a native module wrapper (biometrics, sensors) scaffolded for integration.

Best practices

• Provide a PascalCase component name and explicit prop types to generate clear interfaces.
• Choose a styling strategy up front (StyleSheet vs styled-components) for consistent output.
• Prefer Platform.select for small differences and platform-specific files for large divergences.
• Include accessibility props, testIDs, and activeOpacity for interactive components.
• Use useCallback and keyExtractor for FlatList items to avoid unnecessary re-renders.

Example use cases

• Create a Button component with size/variant props and TypeScript types.
• Generate a DatePicker with DatePicker.ios.tsx and DatePicker.android.tsx files.
• Scaffold a SearchInput with debounce, loading indicator, and clear action.
• Produce a slide-up modal component with spring animation and visibility control.
• Wrap a biometric native module with platform checks and success/error callbacks.