⚡ Quick Start Guide

🎯 Objective

This guide will help you start modifying your boilerplate in less than 5 minutes.

1️⃣ Change a Tab Name (2 min)

Example: Change "Explore" to "Discover"

Step 1: Change the name in the tabs layout

// app/(tabs)/_layout.tsx
<Tabs.Screen
  name="explore"
  options={{
    title: 'Discover', // ← Change here
    tabBarIcon: ({ color, size }) => <Compass size={size} color={color} />,
  }}
/>

Step 2: Update translations (optional)

// contexts/I18nContext.tsx
tabs: {
  explore: 'Discover', // en
},
// and in Spanish:
tabs: {
  explore: 'Descubrir', // es
},

✅ Done! The tab is now called "Discover"

2️⃣ Change App Colors (3 min)

Change primary color

// constants/colors.ts
export const Colors = {
  primary: '#FF6B35',      // ← Your color here (e.g., orange)
  primaryLight: '#FF8A5C', // ← Lighter version
  primaryDark: '#E55A2A',  // ← Darker version
  // ... rest of colors
};

Where the primary color is used:

  • Primary buttons
  • Active tab icons
  • Links
  • Badges

Change background color

export const Colors = {
  background: '#F0F0F0',   // ← General background color
  surface: '#FFFFFF',      // ← Cards/elements color
  // ...
};

✅ Done! Colors are automatically updated throughout the app.

3️⃣ Add a New Tab (5 min)

Step 1: Create folder and files

# Create structure
mkdir -p app/(tabs)/new-tab
touch app/(tabs)/new-tab/_layout.tsx
touch app/(tabs)/new-tab/index.tsx

Step 2: New tab layout

// app/(tabs)/new-tab/_layout.tsx
import { Stack } from 'expo-router';
import { useTheme } from '@/contexts/ThemeContext';

export default function NewTabLayout() {
  const { colors } = useTheme();

  return (
    <Stack
      screenOptions={{
        headerStyle: { backgroundColor: colors.surface },
        headerTintColor: colors.text,
      }}
    >
      <Stack.Screen name="index" options={{ title: 'New Tab' }} />
    </Stack>
  );
}

Step 3: Main screen

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

export default function NewTabScreen() {
  const { colors } = useTheme();

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

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

Step 4: Register in tabs

// app/(tabs)/_layout.tsx
import { Calendar } from 'lucide-react-native'; // Import icon

<Tabs.Screen
  name="new-tab"
  options={{
    title: 'New',
    tabBarIcon: ({ color, size }) => <Calendar size={size} color={color} />,
  }}
/>

✅ Done! You now have a functional new tab.

4️⃣ Modify Displayed Items (2 min)

In Home, Explore, Favorites

// mocks/data.ts

// Change items
export const mockItems: Item[] = [
  {
    id: '1',
    title: 'My Custom Item',              // ← Your title
    description: 'Item description',      // ← Your description
    image: 'https://picsum.photos/400/300',
    category: 'Tech',
    author: 'John Doe',
    authorAvatar: 'https://i.pravatar.cc/150?img=1',
    date: '2024-01-20',
    likes: 124,
    comments: 32,
  },
  // Add more items here
];

✅ Done! Items are updated on all screens that use them.

5️⃣ Change Default Theme (1 min)

// contexts/ThemeContext.tsx

// Change line 66:
const [themeMode, setThemeMode] = useState<ThemeMode>('dark'); // ← 'light', 'dark', or 'system'

Or change the default in the query:

// line 72:
return (stored as ThemeMode) || 'dark'; // ← Your default here

✅ Done! The app now opens with your preferred theme.

6️⃣ Change Default Language (1 min)

// contexts/I18nContext.tsx

// Change line 286:
const [language, setLanguageState] = useState<Language>('en'); // ← 'en' or 'es'

✅ Done! The app now opens in your preferred language.

7️⃣ Add a Statistic in Home (2 min)

// app/(tabs)/(home)/index.tsx

// Modify the stats array (line ~35):
const stats = [
  {
    label: t.home.overview,
    value: '1.2K',
    change: '+12.5%',
    icon: Package,
    color: colors.primary,
  },
  // Add new stat:
  {
    label: 'New Metric',         // ← Your name
    value: '567',                // ← Your value
    change: '+8.2%',             // ← Your change
    icon: TrendingUp,            // ← Your icon (import from lucide)
    color: colors.success,       // ← Your color
  },
];

✅ Done! The new statistic appears on the dashboard.

8️⃣ Customize Categories (2 min)

// app/(tabs)/(home)/index.tsx

// Modify the categories array (line ~47):
const categories = [
  {
    id: '1',
    name: 'My Category',         // ← Your name
    icon: '🚀',                   // ← Your emoji/icon
    color: '#FF6B35',            // ← Your color
    count: 42,                   // ← Number of items
  },
  // Add more categories
];

✅ Done! Your custom categories appear in the grid.

9️⃣ Change Welcome Message (1 min)

Option 1: Change directly

// app/(tabs)/(home)/index.tsx (line ~102)
<Text style={[styles.greeting, { color: colors.textSecondary }]}>
  Hello! Welcome to your app
</Text>

Option 2: Use translation

// contexts/I18nContext.tsx
home: {
  welcomeBack: 'Hello! Welcome to your app',  // ← Your message
},

✅ Done! The welcome message is customized.

🔟 Remove a Tab You Don't Need (2 min)

Example: Remove the "Activity" tab

Step 1: Comment/remove from layout

// app/(tabs)/_layout.tsx

// Comment or remove these lines:
// <Tabs.Screen
//   name="activity"
//   options={{
//     title: t.tabs.activity,
//     tabBarIcon: ({ color, size }) => <Activity size={size} color={color} />,
//   }}
// />

Step 2 (Optional): Delete the files

rm -rf app/(tabs)/activity

✅ Done! The tab no longer appears in navigation.

🎨 Quick Tips

Use dynamic colors (theme)

const { colors } = useTheme();

<View style={{ backgroundColor: colors.surface }} />
<Text style={{ color: colors.text }} />

Use translations

const { t } = useI18n();

<Text>{t.common.save}</Text>
<Text>{t.home.welcomeBack}</Text>

Show a toast

const { showToast } = useToast();

showToast('Saved!', 'success');

const router = useRouter();

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

Use favorites

const { toggleFavorite, isFavorite } = useApp();

const handleFavorite = () => toggleFavorite(item.id);
const isFav = isFavorite(item.id);

📚 Next Step

Once you've made these basic changes, check out:

🆘 Common Issues

"Cannot find module '@/...'"

Solution: Restart the dev server with bun start --clear

Colors are not updating

Solution: Verify that you're using colors.colorName from the useTheme() hook

Translations don't appear

Solution: Verify that the key exists in both languages (en and es)

Tab doesn't appear

Solution: Verify that the name in <Tabs.Screen> matches the folder name

✅ Initial Customization Checklist

  • Change primary colors
  • Customize tab names
  • Modify example items/data
  • Change welcome message
  • Adjust categories
  • Configure default theme
  • Configure default language
  • Remove tabs you don't need
  • Add your own statistics
  • Update example profile information

You now have your customized boilerplate! 🚀