Activity: Navigation and User Flows

🎯 Activity Objectives

Master mobile navigation patterns by:

• Implementing React Navigation with multiple screens
• Creating smooth user flows and transitions
• Building tab navigation and stack navigation
• Designing intuitive navigation patterns

🏃‍♂️ Quick Start Challenge (15 minutes)

Challenge One: Navigation Setup Race

Time Limit: 10 minutes

1. Install React Navigation:

   bash

   npm install @react-navigation/native @react-navigation/native-stack
   npx expo install react-native-screens react-native-safe-area-context
   

2. Basic Stack Navigator:

   javascript

   import { NavigationContainer } from '@react-navigation/native';
   import { createNativeStackNavigator } from '@react-navigation/native-stack';
   
   const Stack = createNativeStackNavigator();
   
   export default function App() {
     return (
       <NavigationContainer>
         <Stack.Navigator>
           <Stack.Screen name="Home" component={HomeScreen} />
         </Stack.Navigator>
       </NavigationContainer>
     );
   }
   

✅ Checkpoint: Navigation container loads without errors!

Challenge 2: First Screen Navigation (5 minutes)

Time Limit: 5 minutes

Create a simple two-screen navigation:

function HomeScreen({ navigation }) {
  return (
    <View style={styles.container}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

✅ Checkpoint: Successfully navigate between screens!

💪 Main Activity: Multi-Screen Recipe App (35 minutes)

Part One: Screen Structure (15 minutes)

Build a recipe app with these screens:

1. Recipe List - Shows available recipes
2. Recipe Details - Shows individual recipe
3. Favorites - Shows saved recipes
4. Profile - User settings

import React, { useState } from 'react';
import { View, Text, StyleSheet, FlatList, TouchableOpacity, Image } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

const recipes = [
  {
    id: '1',
    title: 'Spaghetti Carbonara',
    image: 'https://via.placeholder.com/150',
    cookTime: '20 min',
    difficulty: 'Easy'
  },
  // Add more recipes here
];

function RecipeListScreen({ navigation }) {
  const renderRecipe = ({ item }) => (
    <TouchableOpacity
      style={styles.recipeCard}
      onPress={() => navigation.navigate('RecipeDetails', { recipe: item })}
    >
      <Image source={{ uri: item.image }} style={styles.recipeImage} />
      <View style={styles.recipeInfo}>
        <Text style={styles.recipeTitle}>{item.title}</Text>
        <Text style={styles.recipeDetails}>{item.cookTime} • {item.difficulty}</Text>
      </View>
    </TouchableOpacity>
  );

  return (
    <View style={styles.container}>
      <FlatList
        data={recipes}
        renderItem={renderRecipe}
        keyExtractor={item => item.id}
      />
    </View>
  );
}

function RecipeDetailsScreen({ route, navigation }) {
  const { recipe } = route.params;
  
  return (
    <View style={styles.container}>
      <Image source={{ uri: recipe.image }} style={styles.heroImage} />
      <Text style={styles.title}>{recipe.title}</Text>
      <Text style={styles.cookTime}>{recipe.cookTime} • {recipe.difficulty}</Text>
      {/* Add ingredients and instructions here */}
    </View>
  );
}

Your Mission:

1. Create all four main screens
2. Implement navigation between screens
3. Pass data between screens using route params
4. Add proper screen options and headers

Part 2: Tab Navigation (10 minutes)

Add bottom tab navigation:

npm install @react-navigation/bottom-tabs
npx expo install react-native-vector-icons

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Ionicons } from '@expo/vector-icons';

const Tab = createBottomTabNavigator();

function TabNavigator() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;
          
          if (route.name === 'Recipes') {
            iconName = focused ? 'restaurant' : 'restaurant-outline';
          } else if (route.name === 'Favorites') {
            iconName = focused ? 'heart' : 'heart-outline';
          } else if (route.name === 'Profile') {
            iconName = focused ? 'person' : 'person-outline';
          }
          
          return <Ionicons name={iconName} size={size} color={color} />;
        },
        tabBarActiveTintColor: '#e74c3c',
        tabBarInactiveTintColor: 'gray',
      })}
    >
      <Tab.Screen name="Recipes" component={RecipeStackNavigator} />
      <Tab.Screen name="Favorites" component={FavoritesScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
    </Tab.Navigator>
  );
}

Part 3: Advanced Navigation Patterns (10 minutes)

Implement these navigation patterns:

1. Modal Presentation for recipe creation
2. Deep Linking to specific recipes
3. Custom Navigation Headers with actions
4. Nested Navigation with stack inside tabs

// Modal navigation
function CreateRecipeModal({ navigation }) {
  return (
    <View style={styles.modalContainer}>
      <View style={styles.modalHeader}>
        <TouchableOpacity onPress={() => navigation.goBack()}>
          <Text style={styles.cancelButton}>Cancel</Text>
        </TouchableOpacity>
        <Text style={styles.modalTitle}>New Recipe</Text>
        <TouchableOpacity onPress={() => navigation.goBack()}>
          <Text style={styles.saveButton}>Save</Text>
        </TouchableOpacity>
      </View>
      {/* Add recipe creation form here */}
    </View>
  );
}

// Custom header with actions
React.useLayoutEffect(() => {
  navigation.setOptions({
    headerRight: () => (
      <TouchableOpacity onPress={toggleFavorite}>
        <Ionicons 
          name={isFavorite ? 'heart' : 'heart-outline'} 
          size={24} 
          color="#e74c3c" 
        />
      </TouchableOpacity>
    ),
  });
}, [navigation, isFavorite]);

🎨 Navigation Challenges

Beginner Level:

• Add a search screen with stack navigation
• Implement basic back button functionality
• Add loading states during navigation
• Create custom tab bar icons

Intermediate Level:

• Add gesture-based navigation (swipe to go back)
• Implement navigation animations and transitions
• Create a drawer navigation sidebar
• Add navigation state persistence

Advanced Level:

• Implement deep linking with custom URL schemes
• Add conditional navigation based on auth state
• Create custom navigators with complex routing
• Implement navigation performance optimization

📱 User Flow Design Challenge (10 minutes)

Design Optimal User Flows:

1. Onboarding Flow: Welcome -> Tutorial -> Registration -> Main App
2. Recipe Discovery: Browse -> Filter -> Details -> Save/Cook
3. Social Features: Share -> Comment -> Like -> Profile Visit
4. Shopping List: Recipe -> Add Ingredients -> Shopping Mode -> Check Off

Flow Testing Checklist:

• Can users complete tasks in 3 taps or less?
• Are navigation paths intuitive and predictable?
• Can users easily navigate back to previous screens?
• Are there clear visual indicators of current location?
• Do error states provide clear navigation options?

🏆 Bonus Challenges

Navigation Patterns Challenge:

• Implement hero animations between screens
• Create a custom page indicator for onboarding
• Add pull-to-refresh navigation behavior
• Build a multi-step form with navigation

Performance Challenge:

• Implement lazy loading for navigation screens
• Add navigation preloading for common paths
• Optimize navigation animations for 60fps
• Implement navigation state caching

Accessibility Challenge:

• Add proper accessibility labels to navigation elements
• Implement screen reader navigation announcements
• Add keyboard navigation support
• Test navigation with VoiceOver/TalkBack

📊 Success Metrics

Completed Successfully If:

• ✅ App has at least 4 navigable screens
• ✅ Tab navigation works on all target screens
• ✅ Users can navigate forward and backward smoothly
• ✅ Data passes correctly between screens
• ✅ Navigation feels responsive and intuitive

🤝 User Testing Ideas

1. Navigation Usability Test: Have someone try to complete specific tasks
2. First-Time User Flow: Watch someone use your app without instructions
3. Navigation Speed Test: Time how long common tasks take
4. Back Button Test: Ensure users can always get back to where they started

📝 Reflection Questions

1. Which navigation pattern felt most natural to implement?
2. How did you decide between tabs, stack, and drawer navigation?
3. What navigation challenges did you encounter and how did you solve them?
4. How does mobile navigation differ from web navigation?
5. What would you change about your navigation if you started over?

🔗 Next Steps

• Explore React Navigation's advanced features
• Study popular apps' navigation patterns
• Learn about navigation analytics and tracking
• Practice with different navigation libraries

Time Investment: 60 minutes total Difficulty Level: Intermediate Prerequisites: Basic React Native knowledge, component state management Tools Needed: Expo development environment, React Navigation libraries