{"enrichment":{"faq":[{"a":"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\u2014typically 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.","q":"What does react-native recommend for project structure and folder organization?"},{"a":"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.","q":"How should you organize a react-native app to keep it scalable and maintainable?"},{"a":"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.","q":"What are the best functional component patterns and TypeScript usage in react-native?"},{"a":"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\u2014using 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.","q":"How do you set up state management with hooks, Zustand, and React Query in react-native?"},{"a":"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.","q":"What does react-native testing guide cover for writing testable components and hooks?"},{"a":"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\u2014such 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.","q":"How do you handle platform-specific code and avoid common react-native anti-patterns?"}],"shadow_tags":["mobile-architecture","cross-platform-patterns","state-management-guide","typescript-mobile","testing-strategies","ui-component-library","performance-optimization","native-integration","code-organization","development-standards"],"summary_rewrite":"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."},"files":[{"bytes":5779,"path":"skills/react-native/SKILL.md","sha256":"a42eb3117cc73a6926c372fe84e3adc0ed45ed9b3b1ae5e847e23e472fdcc6bd","url":"https://skillfed.io/files/alinaqi/maggy/react-native/ba3943dc/SKILL.md"}],"id":"alinaqi/maggy/react-native","links":{"html":"https://skillfed.io/alinaqi/maggy/react-native","md":"https://skillfed.io/alinaqi/maggy/react-native.md","repo":"https://github.com/alinaqi/maggy"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":56,"language":"Python","last_updated":"2026-07-14","license":"MIT","name":"react-native","publisher":"alinaqi","stars":703},"relations":{"similar":[{"id":"alinaqi/maggy/react-web"},{"id":"daffy0208/ai-dev-standards/mobile-developer"},{"id":"pluginagentmarketplace/custom-plugin-react-native/react-native-testing"},{"id":"alinaqi/maggy/ui-mobile"},{"id":"callstackincubator/agent-skills/react-native-testing"},{"id":"callstack/react-native-testing-library/react-native-testing"},{"id":"travisjneuman/.claude/react-native"},{"id":"wshobson/agents/react-native-design"},{"id":"alinaqi/maggy/supabase-nextjs"},{"id":"cometchat/cometchat-skills/cometchat-native-placement"}]},"slug":{"owner":"alinaqi","repo":"maggy","skill":"react-native"},"version":"ba3943dc"}