creating-screens

name	creating-screens
description	Add new screens and routes to Eigen React Native app. Guides you through creating simple screens (no data fetching) or Relay screens (with GraphQL). Use this when adding screens, routes, or navigating components. Triggers on "add a screen", "create a new route", "add a Relay screen", "setup screen with data", or screen creation tasks.

Creating Screens in Eigen

Use this checklist to track your work:

- [ ] Confirm the component/folder name and the desired route
- [ ] Create the correct type of screen
- [ ] Write a test for the new screen (using `/eigen-testing` skill)
- [ ] Ensure the test passes (`yarn test [test file]`)
- [ ] Run linter (`yarn lint [pending files]`)
- [ ] Run formatter (`yarn prettier -w [pending files]`)

Simple Screen (No GraphQL)

1. Create /src/app/Scenes/FeatureName/ScreenName.tsx using assets/simple-screen-template.tsx
2. Register route in /src/app/Navigation/routes.tsx

Relay Screen (With GraphQL)

1. Create /src/app/Scenes/FeatureName/ScreenName.tsx using assets/relay-screen-template.tsx
2. Register route in routes.tsx with queries and prepareVariables

Route Registration

// Simple screen
{
  path: "/my-screen",
  : ,
  : ,
  : { : { :  } },
}


{
  : ,
  : ,
  : ,
  : [],
  : [ ({ id })],
  : { : { :  } },
}