Activity 09: User Profile & Connected Features - Discovery Challenge

This template provides a starter project for learning user authentication, profile management, and social connections in React Native with Expo.

Project Overview

This app demonstrates:

• User authentication with AsyncStorage persistence
• User profile display with stats
• Social connections (follow/unfollow functionality)
• Context-based state management
• Notification system

Tech Stack

• React: 19.0.0
• React Native: 0.79.5
• Expo SDK: ~54.0.0
• React Navigation: Stack navigator
• AsyncStorage: User data persistence

Project Structure

activity-09-user-profile/
├── App.js                          # Navigation setup with Context providers
├── app.json                        # Expo configuration
├── package.json                    # Dependencies
├── contexts/
│   ├── AuthContext.js             # Authentication state (70% complete)
│   └── NotificationContext.js     # Notifications (40% complete)
├── screens/
│   ├── SignInScreen.js            # Sign in page (50% complete)
│   ├── ProfileScreen.js           # User profile (100% complete)
│   └── ConnectionsScreen.js       # Find friends (40% complete)
├── components/
│   ├── AuthForm.js                # Login form (30% complete)
│   ├── UserCard.js                # User display card (100% complete)
│   └── NotificationBadge.js       # Notification indicator (100% complete)
├── services/
│   └── AuthService.js             # Mock auth API (100% complete)
└── styles/
    └── authStyles.js              # Auth screen styles (100% complete)

Setup Instructions

One. Install Dependencies

npm install --legacy-peer-deps

Note: The --legacy-peer-deps flag is required for React 19.0.0 compatibility.

2. Start the Development Server

npx expo start

3. Run on Your Device

• iOS Simulator: Press i in the terminal
• Android Emulator: Press a in the terminal
• Physical Device: Scan the QR code with Expo Go app

Demo Credentials

Use these credentials to sign in:

• Email: demo@test.com
• Password: password123

TODO Tasks (7 Total)

TODO #1: Implement handleSignIn (SignInScreen.js)

Location: screens/SignInScreen.js, line 13

Task: Complete the sign-in handler

• Set loading state to true
• Call signIn from AuthContext
• Navigate to Profile on success
• Show Alert on error
• Set loading to false

Skills: Async/await, error handling, navigation

TODO #2: Build AuthForm Component (AuthForm.js)

Location: components/AuthForm.js, line 17

Task: Create the authentication form UI

• Email TextInput with proper keyboard type
• Password TextInput with secure entry
• Submit button with loading state
• Proper styling and accessibility

Skills: React components, form handling, conditional rendering

TODO #3: Complete signIn Function (AuthContext.js)

Location: contexts/AuthContext.js, line 28

Task: Implement authentication logic

• Call AuthService.signIn()
• Save user data to state
• Persist to AsyncStorage
• Return success/error status

Skills: Context API, AsyncStorage, service integration

TODO #4: Build NotificationContext (NotificationContext.js)

Location: contexts/NotificationContext.js, line 8

Task: Create notification system

• Maintain notifications array
• addNotification function with ID and timestamp
• clearNotification function
• Provide via context

Skills: Context API, state management, array operations

TODO #5: Follow/Unfollow Logic (ConnectionsScreen.js)

Location: screens/ConnectionsScreen.js, line 26

Task: Toggle follow status

• Check if user is followed
• Add/remove from followedUsers array
• Update state
• Trigger notification

Skills: Array manipulation, conditional logic, state updates

TODO #6: Build Connections List (ConnectionsScreen.js)

Location: screens/ConnectionsScreen.js, line 38

Task: Display user list with FlatList

• Render MOCK_USERS array
• Use UserCard component
• Pass isFollowing status
• Handle follow toggle
• Proper styling

Skills: FlatList, component composition, props

TODO #7: Add Notification Triggers (ConnectionsScreen.js)

Location: Integrated with TODO #5

Task: Trigger notifications on follow actions

• Call addNotification from context
• Show "Now following [name]" message
• Show "Unfollowed [name]" message

Skills: Context usage, user feedback

Learning Objectives

By completing this activity, you will:

1. Authentication: Implement sign-in with persistent state
2. Context API: Manage global state for auth and notifications
3. AsyncStorage: Store user data locally
4. Navigation: Navigate between screens based on auth state
5. Social Features: Implement follow/unfollow functionality
6. Form Handling: Create controlled form components
7. Component Composition: Build reusable UI components

Testing the App

One. Sign In Flow

• Launch app
• See sign-in screen with demo credentials
• Enter credentials and sign in
• Navigate to profile screen

2. Profile Screen

• View user information
• See follower/following stats
• Navigate to connections

3. Connections Screen

• View list of suggested users
• Follow/unfollow users
• See notification badge update

4. Persistence

• Close and reopen app
• User should remain signed in
• Follow status should persist

Common Issues & Solutions

Issue: App crashes on start

Solution: Ensure all dependencies are installed with --legacy-peer-deps

Issue: Navigation not working

Solution: Check that NavigationContainer wraps the Stack.Navigator in App.js

Issue: AsyncStorage errors

Solution: Verify @react-native-async-storage/async-storage is installed

Issue: Context values undefined

Solution: Ensure screens are wrapped in Context providers

Extension Challenges

Once you complete all TODOs, try these:

1. Profile Editing: Add ability to edit user bio
2. Search: Add search functionality to find users
3. Notifications List: Display notification history
4. Profile Pictures: Add image upload for avatars
5. Dark Mode: Implement theme switching
6. Pull to Refresh: Add refresh gesture to connections list

Resources

• React Navigation Docs
• AsyncStorage Guide
• React Context API
• Expo Documentation

Submission

When complete:

1. Test all functionality
2. Take screenshots of each screen
3. Export project: expo export --output-dir dist
4. Submit via course portal

Need Help? Check the MDX activity file for detailed explanations and examples.