Creating Screens

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",
  name: "MyScreen",
  Component: MyScreen,
  options: { screenOptions: { headerShown: false } },
}

// Relay screen
{
  path: "/entity/:id",
  name: "EntityScreen",
  Component: EntityScreenQueryRenderer,
  queries: [EntityScreenQuery],
  prepareVariables: [({ id }) => ({ id })],
  options: { screenOptions: { headerShown: false } },
}

Note: [Android only]: If you want to enable deep linking for your new screen, add the route to src/main/AndroidManifest.xml.

...
<data android:pathPrefix="/my-screen" />
...

Critical Rules

• Location: /src/app/Scenes/FeatureName/ScreenName.tsx
• Naming conventions: Foo.tsx not FooScreen.tsx
• Route order: Specific routes before generic (e.g., /artist/:id before /:slug)
• Relay queries: Include @relay_test_operation directive
• Null check: Always check if (!data.entity) return null in QueryRenderer
• Tests: Always ensure there is a passing test
• Code quality: Always ensure new files are linted and formatted

Converted and distributed by TomeVault — claim your Tome and manage your conversions.