I built a VS Code extension that scaffolds React Native MVVM features in one command

Every React Native developer knows this ritual.

You need a new screen. So you open an existing feature folder, copy the files, rename them one by one, fix the broken imports, delete the leftover logic, and spend 15 minutes doing work that has nothing to do with what you actually wanted to build.

I got tired of it. So I built a VS Code extension to fix it.

What it does

React Native MVVM Feature Generator scaffolds a complete MVVM feature folder with one command.

You hit Cmd+Shift+P, type a name like Checkout, and get:

src/features/Checkout/
├── CheckoutView.tsx
├── useCheckoutViewModel.ts
├── checkoutService.ts
├── checkoutTypes.ts
├── CheckoutView.test.tsx
├── useCheckoutViewModel.test.ts
└── index.ts

Every file is pre-wired. The View imports the ViewModel. The ViewModel imports the Service. The Service imports the Types. Zero circular dependencies, zero manual setup.

The problem it solves
On any organised React Native project, every feature needs the same four files. The structure is always the same. The naming convention is always the same. Yet every developer does it slightly differently and every new screen starts with a copy-paste ritual.

What I built into it
5 state adapters — when creating a feature you pick your state library. It generates a ViewModel tailored to useState, Zustand, Redux Toolkit, TanStack Query, or Jotai. Set a default in settings so you're never prompted.

Test files by default — every feature ships with a ViewModel unit test and a View render test already written. Most scaffolders skip this. Shipping tests by default changes the default.

Navigation registration — if @react-navigation/* is in your project, the extension offers to inject the new screen into your navigator file automatically.

Open Feature — a quick pick command that lists all your existing features and jumps straight to the View file. Turns the extension from a one-time generator into something you use every day.

Convert to MVVM — right-click any existing .tsx file and the extension extracts useState blocks into a ViewModel, fetch calls into a Service, and rewrites the original as a thin View. For teams adopting MVVM on an existing codebase.

Try it
Search "React Native MVVM Feature Generator" in the VS Code Extensions tab or install directly:

ext install fouzianaaz.rn-mvvm-feature-generator