> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mobile-starter.amisi.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Screen generator

> Create a package-owned screen and optional Expo Router route scaffold

The `screen` generator creates a screen implementation inside an existing package, exports it, and writes a route scaffold when requested.

## Command

```sh theme={null}
bun run nx g @amisi-mobile-starter/generators:screen chat Conversation '(modal)/conversation'
```

## Options

| Option    | Required | Description                                                       |
| --------- | -------- | ----------------------------------------------------------------- |
| `package` | Yes      | Existing package that owns the screen implementation              |
| `name`    | Yes      | Screen name; PascalCase is recommended                            |
| `route`   | No       | Route path relative to the generator’s configured route directory |

When `route` is omitted, the normalized screen filename is used as the route filename.

## Generated files

For the example above, the generator:

1. Verifies that `packages/chat/src/index.ts` exists.
2. Creates `packages/chat/src/screens/conversation.tsx`.
3. Exports `./screens/conversation` from `packages/chat/src/index.ts`.
4. Creates a default-exporting route at `apps/mobile/src/app/(modal)/conversation.tsx`.
5. Stops rather than overwriting an existing screen or route.

The generated route imports `ConversationScreen` from `@amisi-mobile-starter/chat` and exports it as the route default.

<Warning>
  Expo Router is configured with `apps/mobile/app` as its active route root, but the current generator writes to `apps/mobile/src/app`. The generated route is inactive. Move or recreate it under `apps/mobile/app`, then remove the inactive generated route before using the screen.
</Warning>

## Complete the screen

The generated implementation uses basic React Native `Text` and `View` primitives with inline styles. Before shipping it:

* use shared components from `@amisi-mobile-starter/ui`
* use theme tokens and the project styling convention
* move user-facing text into `@amisi-mobile-starter/i18n`
* add typed analytics interactions
* connect domain state through the owning package
* add loading, empty, success, and error states
* add tests and run `bun run verify`

## Route example after correction

```tsx theme={null}
import { ConversationScreen } from '@amisi-mobile-starter/chat';

export default ConversationScreen;
```

Place that file at `apps/mobile/app/(modal)/conversation.tsx`.

<Card title="Navigation guide" icon="route" href="/mobile/navigation">
  Review the active Expo Router groups and access-gate behavior.
</Card>