/add-screen

Create new screens in your React Native Expo application.

Overview

The /add-screen command creates complete screen components following React Native and Expo best practices, including navigation setup, styling, and platform-specific adjustments.

Usage

/add-screen "Screen description"

Examples

# Profile screen
/add-screen "User profile with avatar, bio, and settings button"

# List screen
/add-screen "Products list with search, filters, and pull-to-refresh"

# Form screen
/add-screen "Edit profile form with image picker and validation"

What Gets Created

1. Screen Component - app/screens/[ScreenName].tsx
2. Navigation Entry - Updates navigation configuration
3. Styles - Platform-specific styling
4. Hooks - Custom hooks for screen logic
5. Tests - Component tests
6. Types - TypeScript definitions

Example Implementation

// app/screens/ProfileScreen.tsx
import React from 'react';
import { 
  View, 
  ScrollView, 
  Text, 
  Image, 
  TouchableOpacity,
  Platform
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useUser } from '@/hooks/useUser';
import { Button } from '@/components/Button';

export function ProfileScreen() {
  const { user, isLoading } = useUser();
  
  if (isLoading) {
    return <LoadingState />;
  }
  
  return (
    <SafeAreaView style={styles.container}>
      <ScrollView>
        <View style={styles.header}>
          <Image 
            source={{ uri: user?.avatar }} 
            style={styles.avatar}
          />
          <Text style={styles.name}>{user?.name}</Text>
          <Text style={styles.bio}>{user?.bio}</Text>
        </View>
        
        <View style={styles.actions}>
          <Button 
            title="Edit Profile" 
            onPress={() => router.push('/edit-profile')}
          />
          <Button 
            title="Settings" 
            variant="secondary"
            onPress={() => router.push('/settings')}
          />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  header: {
    alignItems: 'center',
    padding: 20,
  },
  avatar: {
    width: 100,
    height: 100,
    borderRadius: 50,
    marginBottom: 16,
  },
  name: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 8,
  },
  bio: {
    fontSize: 16,
    color: '#666',
    textAlign: 'center',
  },
  actions: {
    padding: 20,
    gap: 12,
  },
});

Navigation Setup

// app/_layout.tsx
export default function RootLayout() {
  return (
    <Stack>
      <Stack.Screen 
        name="profile" 
        options={{
          title: 'Profile',
          headerStyle: {
            backgroundColor: '#f4511e',
          },
          headerTintColor: '#fff',
        }}
      />
    </Stack>
  );
}

Best Practices

• Use SafeAreaView for proper device spacing
• Implement loading and error states
• Add pull-to-refresh where appropriate
• Test on both iOS and Android
• Use platform-specific code when needed
• Optimize images and lists for performance

See Also

• React Native Docs
• Expo Documentation
• Setup Navigation - Coming soon