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.
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]`)
/src/app/Scenes/FeatureName/ScreenName.tsx using assets/simple-screen-template.tsx/src/app/Navigation/routes.tsx/src/app/Scenes/FeatureName/ScreenName.tsx using assets/relay-screen-template.tsxroutes.tsxqueriesprepareVariables// 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" />
...
/src/app/Scenes/FeatureName/ScreenName.tsxFoo.tsx not FooScreen.tsx/artist/:id before /:slug)@relay_test_operation directiveif (!data.entity) return null in QueryRenderer