Skip to content

Add compatibility with React Native CLI or Framework-less development workflow. #503

@The-Lone-Druid

Description

@The-Lone-Druid

Describe the bug

When running @react-native-reusables/cli doctor in a bare React Native (react-native CLI) project that uses NativeWind, the doctor command reports missing Root Layout and Theme files, flags Babel config as misconfigured (saying jsxImportSource or nativewind/babel is missing), and suggests installing expo. This is misleading for non-Expo projects — the CLI should not require Expo or these framework-specific files, or at least should give clearer, actionable guidance.


Steps to reproduce the behavior:

  1. In a bare React Native CLI project (non-Expo), at the repo root run:
    • yarn dlx @react-native-reusables/cli doctor
    • or npx @react-native-reusables/cli doctor
  2. Observe the diagnostics output.
  3. The doctor output shows:
    • Missing Files: Root Layout, Theme
    • Potentially Misconfigured Files: Babel Config — jsxImportSource or nativewind/babel is missing
    • Missing Dependencies: prompts to npx expo install expo

Expected behavior

doctor should:

  • Detect the project type (Expo-managed vs bare React Native) and avoid recommending Expo when the project is a non-Expo / react-native CLI app.
  • Only flag "Root Layout" / "Theme" as missing when relevant to the project's type, or provide specific instructions for bare RN projects.
  • Provide clear, actionable guidance for NativeWind in a bare RN project (for example: check babel.config.js for nativewind/babel plugin or jsxImportSource setting and point to the NativeWind docs).

Screenshots

Attached screenshot (from my run) shows the exact doctor output and suggested missing dependency message

Image

Platform:

  • Type: CLI (doctor), local dev machine
  • OS: Windows
  • Project type: React Native (react-native CLI / bare workflow) — not Expo

CLI output (partial)

Run with --log-level all for full output, but here is the relevant portion I see:

Styling Library: Nativewind
✔ The expo dependency is missing. Do you want to install it? ... no

Diagnosis

✖ Missing Files (2)
  • Root Layout
  • Theme

✖ Potentially Misconfigured Files (1)
  • Babel Config
    ↳ jsxImportSource or nativewind/babel is missing

✖ Missing Dependencies (1)
  • Install with:
    ↳ npx expo install expo

(If helpful, I can paste the full --log-level all output.)


Additional context

  • I can generate components with the CLI and use them (component generation works), so functionality is fine — the issue is with doctor producing misleading/dangling checks that imply the project is missing Expo or files it doesn't need.
  • The project uses NativeWind but is not an Expo-managed app. The doctor command should either:
    • Not recommend installing Expo for bare RN apps, or
    • Provide a clearer note explaining when that is necessary (and why), and how to resolve the NativeWind config for bare RN projects.

Suggested fixes (for maintainers)

  • Detect project type (Expo-managed vs bare RN) reliably (e.g., check for expo in package.json or app.json/app.config.js) and tailor diagnostics accordingly.
  • For NativeWind:
    • Check babel.config.js for plugins: ["nativewind/babel"] or compilerOptions.jsxImportSource and provide the exact snippet to add if missing.
    • Only require a "Root Layout" / "Theme" when the project scaffolding actually expects them; otherwise, explain why they are suggested and how to opt-out.
  • Improve the UX of the doctor suggestions to be prescriptive: e.g., show exact babel.config.js edits or a link to the NativeWind installation docs when the plugin is missing.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions