📚 Boilerplate Documentation

// 1. Create file in app/(tabs)/my-tab/index.tsx
import { View, Text, StyleSheet } from 'react-native';
import { useTheme } from '@/contexts/ThemeContext';

export default function MyTabScreen() {
  const { colors } = useTheme();
  
  return (
    <View style={[styles.container, { backgroundColor: colors.background }]}>
      <Text style={[styles.title, { color: colors.text }]}>My Tab</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 16 },
  title: { fontSize: 24, fontWeight: 'bold' },
});

// 2. Create _layout.tsx in the same folder
import { Stack } from 'expo-router';

export default function MyTabLayout() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{ title: 'My Tab' }} />
    </Stack>
  );
}

// 3. Register in app/(tabs)/_layout.tsx
<Tabs.Screen
  name="my-tab"
  options={{
    title: 'My Tab',
    tabBarIcon: ({ color, size }) => <Icon size={size} color={color} />,
  }}
/>

const { showToast } = useToast();
showToast('Success message', 'success');
showToast('There was an error', 'error');

const { setTheme, isDark, colors } = useTheme();
setTheme('dark'); // 'light' | 'dark' | 'system'

const { setLanguage, t, language } = useI18n();
setLanguage('en'); // 'es' | 'en'
const text = t.common.save;

const { toggleFavorite, isFavorite } = useApp();
toggleFavorite(itemId);
const isFav = isFavorite(itemId);

const router = useRouter();
router.push('/explore');
router.push({ pathname: '/(tabs)/(home)/item-detail', params: { id: '123' } });
router.back();

├── app/                    # Screens and navigation (Expo Router)
│   ├── (tabs)/            # Tab navigation
│   │   ├── (home)/        # Home tab with internal stack
│   │   ├── explore/       # Explore tab
│   │   ├── favorites/     # Favorites tab
│   │   ├── activity/      # Activity tab
│   │   ├── messages/      # Messages tab
│   │   └── profile/       # Profile tab
│   ├── _layout.tsx        # Root layout
│   ├── notifications.tsx  # Notifications modal
│   └── onboarding.tsx     # Welcome screen
├── components/             # Reusable components
├── contexts/               # Global state (Context + React Query)
├── constants/              # Colors, spacing, configuration
├── mocks/                  # Test data for development
├── types/                  # TypeScript definitions
├── utils/                  # Helper functions
└── docs/                   # This documentation

# Start development
npx expo start

# Clear cache
npx expo start -c

# Check TypeScript types
npx tsc --noEmit

# Check ESLint
npx eslint .