# React Native Component Generator

> Generate React Native functional components with hooks, state management, and styling for mobile apps.

- Skill: `michaelschecht/react-native-component-generator` (Agent Skill)
- Install (CLI): `npx skillmds@latest add michaelschecht/react-native-component-generator`
- Raw SKILL.md: https://api.skillmd.com/api/skills/michaelschecht/react-native-component-generator/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: michaelschecht (https://skillmd.com/u/michaelschecht)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/michaelschecht/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