fix(generate): add support for Expo Router app directory prompts #2905

cdanwards · 2025-02-24T20:39:34Z

Description

Issues: fixes Generating a new screen when using Expo Router results in wrong placement #2903

This PR addresses a user who creates screens within an ignited app using expo-router. It checks for the existence of src/app (the expo router configuration) and then determines where to put the screen in 4 ways:

An override provided in the CLI command
destinationDir set from the screen generator template
If neither of those exists, it prompts the user to provide a dir path, if none is provided or they decide to not create that directory, it defaults to src/app/

Screenshots

Scenario	Result
Using CLI Override for directory
Using directory set in template front matter
Setting via prompts - chooses to create dir
Setting via prompts - detects `src/app` and user just taps enter
Setting via prompts - goes to default `src/app`

Checklist

README.md and other relevant documentation has been updated with my changes
I have manually tested this, including by generating a new app locally (see docs).

…screens

frankcalise

Nice work! A few comments for discussion where I think we can shore things up. Also if you think we can add a test to double check the user gets prompted in the way you're expecting if both are omitted that's probably worth adding.

frankcalise · 2025-02-27T16:21:10Z

src/commands/generate.ts

@@ -52,6 +52,53 @@ async function generate(toolbox: GluegunToolbox) {
    pascalName = pascalName.slice(0, -1 * pascalGenerator.length)
    command(`npx ignite-cli generate ${generator} ${pascalName}`)
  }
+  // Check if src/app exists, denoting an Expo Router app
+  if (generator === "screen") {
+    const isExpoRouterApp = filesystem.exists("src/app") === "dir"


So this is the correct directory structure to determine expo-router in an Ignite application, however omitting the src/ nesting is totally valid and it is possible a dir structure looks like this:

app (the routes)

components

hooks

etc...

This is in fact the default expo application structure and Ignite generators should continue to be compatible for any project, not just our opinionated structure.

So perhaps we should look into a different mechanism for determining this? Maybe we check app or src/app to cover both. Or look for package.json to have expo-router?

Yeah, that definitely tracks. I think it would make sense to check for expo-router. Do you think it make more sense to check within the package.json dependencies or within the app.json expo plugins?

I'd say package.json is easier because you know where it will live, under dependencies, so you can search for the key there.

Issues with the app.json route:

It could also be in app.config.js or app.config.ts

Plugins is an array of a mix of strings and/or arrary, making searching through it a bit more difficult

Yeah that's fair, thanks!

src/tools/generators.ts

frankcalise

Looking good! Spotted a couple of things to look over

src/tools/generators.ts

frankcalise · 2025-03-05T16:04:56Z

src/commands/generate.ts

@@ -52,6 +52,54 @@ async function generate(toolbox: GluegunToolbox) {
    pascalName = pascalName.slice(0, -1 * pascalGenerator.length)
    command(`npx ignite-cli generate ${generator} ${pascalName}`)
  }
+  // Check if src/app exists, denoting an Expo Router app


this comment could use updating now that we changed the strategy to look at package.json

src/commands/generate.ts

…in package.json

…ically setting default directory

…signment for screens

…apps

jamonholmgren · 2025-04-30T18:49:20Z

Sorry about not chiming in on the original issue!

I have some thoughts.

I think the screen should be separated from the route.

npx ignite-cli g screen DetailScreen

The screen should always (IMO) be in src/app/screens/detail-screen.tsx (if it's an Expo Router app)

We need a route generator

npx ignite-cli g route listings/detail DetailScreen

This creates a route file at app/listings/detail.tsx which imports the specified screen.

This would allow us to have multiple routes that can import the same screen.

It also eliminates this specialized generator logic which I think is going away from the spirit of the simple generators we want for Ignite. Ignite's generators got too complicated in earlier versions, which is why I rewrote them to be super simple in Ignite 6. The whole CLI was just over 900 lines of code at that point (vs 3k+ for previous versions), and I really don't want to continue to bloat it with additional logic if we can avoid that.

frankcalise · 2025-05-26T15:51:23Z

I made some updates to this to help progress it along.

Now, for expo-router projects, we restored the screen generator to keep it being placed in src/screens, matching react navigation ignite projects (aside from the root dir)

In addition to that, upon a new project it will generate a route generator template which you can use like so:

npx ignite-cli g route welcome --dir=src/app/some/route

resulting in

src/app/some/route/welcome.tsx and generates

import { WelcomeScreen } from "@/screens/WelcomeScreen"

export default function Welcome() {
  return <WelcomeScreen />
}

coolsoftwaretyler

Took at look at these changes and tried them out locally across Expo Router/not Expo Router projects generated from a local build of the CLI. Looking good!

…r-screen-generator

markrickert · 2025-06-04T14:26:12Z

boilerplate/src/app/index.tsx

-    </Screen>
-  )
+export default function Index() {
+  return <WelcomeScreen />


Praise: I love this! Less duplicated code in the boilerplate to maintain! 🎉

Hmm well the WelcomeScreen itself is still duped, but maybe I can get that even better.

Woot think I can reduce it further, changes incoming 🙏

src/tools/react-native.ts

@demo

utilize @demo macro removal to just touch up the boilerplate/app/screens/WelcomeScreen instead of having a copy

cdanwards added 3 commits February 24, 2025 15:36

fix(generate): add support for Expo Router app directory prompts for …

a650053

…screens

Adds check for destinationDir in frontmatter or overwrite

01d8bdb

Update message to say screen

a405cc7

cdanwards marked this pull request as ready for review February 27, 2025 16:04

cdanwards requested review from frankcalise and jamonholmgren February 27, 2025 16:04

frankcalise reviewed Feb 27, 2025

View reviewed changes

cdanwards added 2 commits March 4, 2025 13:21

Removed warning for front-matter and updated check for expo-router

4111b3f

Settled on checking the package.json for the expo-router

87f20e8

cdanwards requested a review from frankcalise March 5, 2025 15:53

frankcalise reviewed Mar 5, 2025

View reviewed changes

fpena added 6 commits April 29, 2025 11:02

docs(generate): enhance comment to clarify Expo Router app detection …

65480fb

…in package.json

Adress PR feedback

6ed7bd8

fix(generate): improve directory prompt for Expo Router apps by dynam…

8104282

…ically setting default directory

fix(generate): update warning message to reflect dynamic directory as…

488c334

…signment for screens

Improve code with prettier format

b98feb0

fix(generate): set initial value for directory prompt in Expo Router …

47661ca

…apps

fpena requested a review from frankcalise April 30, 2025 14:29

Merge branch 'master' into cdanwards/2903-expo-router-screen-generator

ad512b9

jamonholmgren mentioned this pull request Apr 30, 2025

Generating a new screen when using Expo Router results in wrong placement #2903

Open

frankcalise added 3 commits May 22, 2025 12:40

Merge branch 'master' into cdanwards/2903-expo-router-screen-generator

27b599b

fix(boilerplate): update expo-router generator templates

4fad5d1

fix(cli): new route generator template for expo-router

df10e5a

fix(cli): non barrel generator template import paths

52c2328

coolsoftwaretyler approved these changes May 27, 2025

View reviewed changes

markrickert mentioned this pull request Jun 3, 2025

Ignite v11 (Expo SDK 53) #2938

Open

8 tasks

frankcalise changed the base branch from master to feat/expo-sdk-53 June 4, 2025 12:34

chore: merge branch 'feat/expo-sdk-53' into cdanwards/2903-expo-route…

a99f356

…r-screen-generator

refactor: pull out mst

c2b3839

frankcalise approved these changes Jun 4, 2025

View reviewed changes

markrickert reviewed Jun 4, 2025

View reviewed changes

src/tools/react-native.ts Outdated Show resolved Hide resolved

frankcalise added 2 commits June 4, 2025 10:40

fix(cli): router screen tpl imports

a8c4d64

fix(cli): less duped expo-router code

e1e8f31

utilize @demo macro removal to just touch up the boilerplate/app/screens/WelcomeScreen instead of having a copy

fix(generate): add support for Expo Router app directory prompts #2905

Are you sure you want to change the base?

fix(generate): add support for Expo Router app directory prompts #2905

Conversation

cdanwards commented Feb 24, 2025 • edited by fpena Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Screenshots

Checklist

Uh oh!

frankcalise left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

frankcalise left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

jamonholmgren commented Apr 30, 2025

Uh oh!

frankcalise commented May 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coolsoftwaretyler left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

cdanwards commented Feb 24, 2025 •

edited by fpena

Loading

frankcalise commented May 26, 2025 •

edited

Loading