create-screen

Create Screen / Tab

Add a new screen or tab following expo-router conventions and project patterns.

Gather Information

Ask the user for:

1. Screen name (e.g., "products", "order-details", "profile")
2. Type: tab screen, stack screen, or modal
3. Location in routing:
   • Tab: app/(main)/(tabs)/<name>.tsx
   • Stack within main: app/(main)/<name>.tsx
   • Auth screen: app/(auth)/<name>.tsx
4. Protected? Does it require authentication?
5. Needs backing data? If yes, suggest running /create-feature first

Steps

1. Create the Screen File

Screen files use lowercase with hyphens and default exports.

// app/(main)/(tabs)/<name>.tsx  OR  app/(main)/<name>.tsx
import { useTranslation } from 'react-i18next';
import { StyleSheet } from 'react-native-unistyles';
import { ScreenContainer } from '@/common/components/ScreenContainer';
import { Text } from '@/common/components/Text';
import { ErrorBoundary } from '@/common/components/ErrorBoundary';

export default function <Name>Screen() {
  const { t } = useTranslation();

  return (
    <ScreenContainer scrollable padded>
      <ErrorBoundary>
        <Text variant="h1">{t('<name>.title')}</Text>
      </ErrorBoundary>
    </ScreenContainer>
  );
}

const styles = StyleSheet.create((theme) => ({
  // Add styles as needed
}));

If protected (requires auth):

import { useProtectedRoute } from '@/hooks/useProtectedRoute';

export default function <Name>Screen() {
  useProtectedRoute(); // Redirects to /(auth)/login if not authenticated
  const { t } = useTranslation();
  // ... rest of screen
}

2. Register as Tab (if tab screen)

Edit app/(main)/(tabs)/_layout.tsx to add the new tab:

<Tabs.Screen
  name="<name>"
  options={{
    title: t('tabs.<name>'),
    tabBarIcon: ({ color, size }) => (
      <Icon name="<icon-name>-outline" color={color} size={size} />
    ),
  }}
/>

The Icon component uses Ionicons names. Choose an appropriate icon from the Ionicons set.