react-native
This skill guides you through establishing effective project structure and folder organization for React Native applications. Learn industry-standard patterns that keep your codebase scalable and maintainable as your app grows, ensuring your team can navigate and extend the project with confidence.
React Native best practices emphasize a clear, scalable folder organization that grows with your app. The skill guides you through establishing effective project structure by organizing code into logical domains—typically separating screens, components, hooks, services, utilities, and types into dedicated folders. This approach keeps your codebase maintainable as your app grows, ensuring your team can navigate and extend the project with confidence. A common pattern groups related features together, making it easier to locate and modify code without disrupting other parts of the application.
AI-generated summary based on this skill's SKILL.md
Install
alinaqi/maggy/react-native · repository language: Python
git clone https://github.com/alinaqi/maggy
cp -r maggy/skills/react-native ~/.claude/skills/react-nativeFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What does react-native recommend for project structure and folder organization?
React Native best practices emphasize a clear, scalable folder organization that grows with your app. The skill guides you through establishing effective project structure by organizing code into logical domains—typically separating screens, components, hooks, services, utilities, and types into dedicated folders. This approach keeps your codebase maintainable as your app grows, ensuring your team can navigate and extend the project with confidence. A common pattern groups related features together, making it easier to locate and modify code without disrupting other parts of the application.
How should you organize a react-native app to keep it scalable and maintainable?
React Native applications benefit from a domain-driven folder structure that separates concerns and scales with your project. The skill teaches industry-standard patterns that organize your app into clear sections: screens for full-page components, reusable components for UI elements, custom hooks for shared logic, services for API calls, utilities for helper functions, and types for TypeScript definitions. This structure ensures your team can navigate the project with confidence and extend it without confusion. By grouping related functionality together rather than organizing by file type alone, you create a codebase that remains maintainable even as features and complexity increase.
What are the best functional component patterns and TypeScript usage in react-native?
React Native's functional component patterns leverage hooks and TypeScript to create type-safe, maintainable code. The skill covers how to structure functional components with proper TypeScript typing for props and state, use React hooks effectively for managing component logic, and follow patterns that make components testable and reusable. Key practices include defining clear prop interfaces, using custom hooks to extract shared logic, and organizing component files with consistent naming conventions. TypeScript integration helps catch errors at development time and improves code clarity, making it easier for teams to understand component responsibilities and dependencies.
How do you set up state management with hooks, Zustand, and React Query in react-native?
React Native state management combines multiple tools for different concerns: React hooks handle local component state, Zustand provides lightweight global state management, and React Query manages server state and caching. The skill guides you through setting up each layer—using useState and useReducer for component-level state, creating Zustand stores for shared application state, and configuring React Query for API calls and data synchronization. This layered approach keeps your state management organized and predictable, with each tool handling its specific domain. Proper setup ensures your app remains performant and your data stays synchronized across screens.
What does react-native testing guide cover for writing testable components and hooks?
React Native testing practices ensure your components and hooks work reliably across different devices and scenarios. The skill teaches you how to write testable components by keeping them focused and pure, extracting logic into custom hooks that can be tested independently, and using testing libraries designed for React Native. Key practices include mocking platform-specific APIs, testing hooks in isolation, and structuring components to avoid tight coupling to external dependencies. By following these patterns, you create a test suite that catches regressions early and gives your team confidence when refactoring or adding features.
How do you handle platform-specific code and avoid common react-native anti-patterns?
React Native platform-specific code requires careful organization to maintain a clean, maintainable codebase while supporting both iOS and Android differences. The skill covers techniques like using platform-specific file extensions (.ios.js, .android.js), the Platform module for conditional logic, and architectural patterns that isolate platform differences. It also highlights anti-patterns to avoid—such as excessive platform checks scattered throughout components, hardcoded dimensions, or ignoring performance implications of certain APIs. By centralizing platform-specific logic and following established patterns, you ensure your app behaves consistently across platforms while keeping your code organized and easy to test.
SKILL.md
rendered from the published skill — quoted content, verbatim
React Native Skill
Project Structure
project/
├── src/
│ ├── core/ # Pure business logic (no React)
│ │ ├── types.ts
│ │ └── services/
│ ├── components/ # Reusable UI components
│ │ ├── Button/
│ │ │ ├── Button.tsx
│ │ │ ├── Button.test.tsx
│ │ │ └── index.ts
│ │ └── index.ts # Barrel export
│ ├── screens/ # Screen components
│ │ ├── Home/
│ │ │ ├── HomeScreen.tsx
│ │ │ ├── useHome.ts # Screen-specific hook
│ │ │ └── index.ts
│ │ └── index.ts
│ ├── navigation/ # Navigation configuration
│ ├── hooks/ # Shared custom hooks
│ ├── store/ # State management
│ └── utils/ # Utilities
├── __tests__/
├── android/
├── ios/
└── CLAUDE.md
Component Patterns
Functional Components Only
```typescript // Good -
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
skills/react-native/SKILL.md