React Native MVVM Feature Generator

Scaffold production-ready React Native features in seconds — not minutes.

Stop copy-pasting the same four files every time you add a screen. One command creates a fully wired MVVM folder with the right structure, the right imports, tests included, and your state library of choice — all without leaving VS Code.

Features at a glance

Commands

What gets generated

Running Create Feature with the name Checkout produces:

src/features/Checkout/
├── CheckoutView.tsx               # React Native UI component
├── useCheckoutViewModel.ts        # State + actions hook
├── checkoutService.ts             # API / data layer
├── checkoutTypes.ts               # Feature-local TypeScript types
├── CheckoutView.test.tsx          # Render tests (optional)
├── useCheckoutViewModel.test.ts   # Unit tests (optional)
└── index.ts                       # Barrel export (optional)

Every file is pre-wired — the View imports the ViewModel, the ViewModel imports the Service, the Service imports the Types. Zero circular dependencies, zero boilerplate to write.

State adapters

During feature creation you choose your state library. Set a default so you're never prompted:

"rnMvvm.stateAdapter": "zustand"

Test file generation

Every feature ships with two test files out of the box:

• useCheckoutViewModel.test.ts — unit tests for loading state, success, error, and refresh
• CheckoutView.test.tsx — render tests for loading indicator, error message, and button press

Tests are generated by default. To disable:

"rnMvvm.generateTests": false

Navigation registration

If @react-navigation/* is found in your project's package.json, the extension will detect it automatically after each feature is created and offer to:

1. Find your navigator file (checks common locations like src/navigation/AppNavigator.tsx)
2. Inject the import and <Stack.Screen> registration in one step

No manual wiring required. If the navigator file is not found automatically, you will be prompted to select it manually.

Open Feature

Cmd+Shift+P → RN MVVM: Open Feature

Scans your features folder and shows a quick pick list of all existing features. Select one to jump straight to its View file. Turns the extension from a one-time generator into something you use every day.

Convert existing screen to MVVM

Right-click any .tsx or .jsx file → RN MVVM: Convert to MVVM.

The extension analyses the file and:

• Extracts useState / useEffect blocks → ViewModel
• Extracts fetch() calls and endpoints → Service
• Generates a Types file with starter interfaces
• Rewrites the original file as a thin View that consumes the ViewModel

Always shows a confirmation dialog before modifying any files.

AI-powered generation

Add your Anthropic API key once:

"rnMvvm.anthropicApiKey": "sk-ant-..."

Then run RN MVVM: Generate with AI and describe your screen in plain English:

"Order history screen showing a list of past orders with status badges and a retry button for failed ones"

The AI generates:

• Realistic types with real field names matching your description
• A service with real endpoint names
• A ViewModel wired to your configured state adapter
• A View that renders the described UI

A preview is shown before any files are written — you stay in control.

Your API key stays on your machine. No backend, no subscription, no data collection. Get a key at console.anthropic.com — a single generation costs less than $0.01.

Why MVVM for React Native?

Settings

All settings are under rnMvvm.* in your settings.json or the Settings UI.

Troubleshooting

Nothing happens when I run the command. Open the output channel: View → Output → pick React Native MVVM from the dropdown. Every action is logged there.

Folder already exists error. Change rnMvvm.overwritePolicy to "overwrite" or "skip" in your settings.

AI generation returns an error. Check that rnMvvm.anthropicApiKey is set correctly and that the key has access to the Claude Haiku model.

Navigation file not found. When prompted, click Select file to manually point the extension at your navigator file.

New commands not showing up. Reload VSCode after updating: Cmd+Shift+P → Developer: Reload Window.

Changelog

v0.5.0

• Added RN MVVM: Generate with AI — describe a screen in plain English, get a full working MVVM feature
• Added RN MVVM: Convert to MVVM — refactor any existing screen into MVVM automatically
• Added RN MVVM: Open Feature — quick pick to navigate between features instantly
• Added automatic navigation registration for @react-navigation projects
• Added test file generation — ViewModel unit tests and View render tests included by default

v0.4.0

• Added state adapter selection — choose between useState, Zustand, Redux Toolkit, TanStack Query, and Jotai per feature

v0.3.0

• Initial public release

License

MIT © fouzianaaz