React Native Component Generator

React Native Component Generator

Overview

This skill helps you generate production-ready React Native components following best practices, including proper TypeScript types, hooks, and styling.

Usage

Ask the agent to generate React Native components with specific requirements:

Generate a React Native component for [purpose] with:
- TypeScript types
- useState/useEffect hooks as needed
- Styled components or StyleSheet
- Props interface
- [Any specific features]

Examples

User Profile Card

"Create a React Native UserProfileCard component with avatar image, name, bio, and follow button. Use TypeScript and styled-components."

Form Input

"Generate a reusable TextInput component with label, error message support, and validation. Include password visibility toggle if type is 'password'."

Loading Spinner

"Create a custom loading spinner component with animated rotation and configurable size/color props."

Best Practices Included

• Functional components with hooks
• TypeScript interfaces for props
• Proper component composition
• Accessibility labels
• Platform-specific code when needed
• Performance optimization (React.memo, useMemo, useCallback)

Output Format

Agent will provide:

1. Component code with imports
2. Props interface/type
3. Usage example
4. Styling (StyleSheet or styled-components)
5. Any required dependencies