react-native_skill

Overview

This skill documents opinionated React Native patterns for building secure, testable, and platform-aware mobile apps. It defines a structured project layout, component and state management conventions, testing approaches, and guidance for handling platform-specific code. The focus is on TypeScript-first, functional components, and separating business logic from UI.

How this skill works

The skill inspects and prescribes project layout and coding patterns: pure core business logic under src/core, reusable UI components under src/components, screens with paired hooks under src/screens, and clear navigation, hooks, store, and utils folders. It recommends functional components, explicit props interfaces, extracting logic into custom hooks, local-first state with Zustand or React Query for escalation, and platform-specific file separation where needed.

When to use it

• Initializing a new React Native TypeScript app with predictable structure and security-first thinking.
• Refactoring an existing app to separate business logic from UI and improve testability.
• Standardizing component patterns and state management across a team.
• Adding platform-specific behavior while keeping a single shared API.
• Implementing reliable server state and caching with React Query.

Best practices

• Use functional components only and move component logic into hooks for testable presentation layers.
• Always declare explicit props interfaces even for small components to keep typing consistent.
• Start with local useState; escalate to Zustand for app state and React Query for server state.
• Write unit and integration tests: component tests with testing-library and hook tests with renderHook.
• Avoid inline styles, anonymous functions in props, deep nesting, and direct state mutation.
• Split complex platform differences into .ios/.android files instead of frequent Platform.select usage.

Example use cases

• Create a Home screen where useHome hook handles data fetching and HomeScreen renders ItemList.
• Build a reusable Button component with tests that assert press behavior and disabled state.
• Introduce global auth state with a small Zustand store and typed setters accessible across screens.
• Use React Query for items list with a useItems hook and a mutation that invalidates queries on success.
• Handle a complex native layout by creating Component.ios.tsx and Component.android.tsx while keeping shared logic in Component.tsx.