Capacitor React

Develop Capacitor apps with React — project structure, hooks, state management, and React-specific patterns for accessing native device features.

Prerequisites

1. Capacitor 6, 7, or 8 app with React.
2. Node.js and npm installed.
3. React 18 or later.
4. For iOS: Xcode installed.
5. For Android: Android Studio installed.

Agent Behavior

• Auto-detect before asking. Check the project for package.json dependencies (react, react-dom, @capacitor/core), platforms (android/, ios/), build tools (vite.config.ts, next.config.js, webpack.config.js), and TypeScript usage. Only ask the user when something cannot be detected.
• Guide step-by-step. Walk the user through the process one step at a time. Never present multiple unrelated questions at once.
• Adapt to the project. Detect the existing code style (functional vs. class components, TypeScript vs. JavaScript, CSS modules vs. styled-components) and generate code that matches.

Procedures