Implement state management with React Context API

README.md

@@ -28,6 +28,7 @@ This starter includes everything you need to build a production-ready React Nati
 - ✅ **Error Boundary** - Global error handling component
 - ✅ **Loading States** - Built-in loading screen component
 - ✅ **Authentication Example** - Complete login flow with token management
+- ✅ **State Management** - React Context API with TypeScript and useReducer patterns
 - ✅ **TypeScript** - Full type safety throughout
 - ✅ **ESLint + Prettier** - Code quality and formatting tools
 - ✅ **Example Screens** - See features in action
@@ -338,7 +339,8 @@ Expo Go is a free app for testing your app on physical devices:
 - **[API and Storage](docs/api-and-storage.md)** - Backend integration guide
 - **[UI Library](docs/ui-library.md)** - React Native Paper components
 - **[Color Themes](docs/color-themes.md)** - Theming and dark mode
-- **[Error and Loading Handling](docs/error-and-loading.md)** - State management
+- **[Error and Loading Handling](docs/error-and-loading.md)** - Error and loading states
+- **[State Management with Context API](docs/state-management-context.md)** - React Context patterns
 
 ### Additional Guides
 
@@ -351,6 +353,27 @@ Expo Go is a free app for testing your app on physical devices:
 - [Store Data](docs/store-data.md)
 - [Environment Variables](docs/environment-variables.md)
 
+## State Management
+
+This starter includes **React Context API** for state management with production-ready patterns:
+
+- ✅ **AuthContext** - Authentication state with login/logout
+- ✅ **TodosContext** - CRUD operations with async handling
+- ✅ **useReducer pattern** - Complex state management
+- ✅ **TypeScript support** - Full type safety
+- ✅ **Custom hooks** - `useAuth()` and `useTodos()` for easy consumption
+- ✅ **Performance optimized** - Memoized values and actions
+
+See the [State Management with Context API](docs/state-management-context.md) guide for:
+
+- When to use Context vs other solutions
+- Best practices and patterns
+- Performance optimization
+- Integration with services
+- Common pitfalls and solutions
+
+**Note:** This branch demonstrates Context API patterns. For other state management solutions (Redux, Zustand, etc.), see their respective branches.
+
 ## Resources
 
 - [Expo Documentation](https://docs.expo.dev/)

app/(auth)/login.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { View, StyleSheet, ScrollView } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import {
@@ -9,37 +9,34 @@ import {
   Snackbar,
 } from 'react-native-paper';
 import { router } from 'expo-router';
-import { authService } from '@/services/auth';
+import { useAuth } from '@/contexts';
 
 export default function LoginScreen() {
   const theme = useTheme();
+  const { login, isLoading, error, isAuthenticated, clearError } = useAuth();
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [snackbarVisible, setSnackbarVisible] = useState(false);
+  const [validationError, setValidationError] = useState('');
+
+  // Navigate to main app when authenticated
+  useEffect(() => {
+    if (isAuthenticated) {
+      router.replace('/(tabs)');
+    }
+  }, [isAuthenticated]);
 
   const handleLogin = async () => {
     if (!email || !password) {
-      setError('Please fill in all fields');
-      setSnackbarVisible(true);
+      setValidationError('Please enter both email and password');
       return;
     }
 
-    setLoading(true);
-    setError(null);
-
+    setValidationError('');
     try {
-      await authService.login({ email, password });
-      // Navigate to main app after successful login
-      router.replace('/(tabs)');
-    } catch (err) {
-      const errorMessage =
-        err instanceof Error ? err.message : 'Login failed. Please try again.';
-      setError(errorMessage);
-      setSnackbarVisible(true);
-    } finally {
-      setLoading(false);
+      await login({ email, password });
+      // Navigation will happen automatically via useEffect when isAuthenticated changes
+    } catch {
+      // Error is already handled by context
     }
   };
 
@@ -89,8 +86,8 @@ export default function LoginScreen() {
           <Button
             mode="contained"
             onPress={handleLogin}
-            loading={loading}
-            disabled={loading}
+            loading={isLoading}
+            disabled={isLoading}
             style={styles.button}
           >
             Sign In
@@ -108,15 +105,21 @@ export default function LoginScreen() {
       </ScrollView>
 
       <Snackbar
-        visible={snackbarVisible}
-        onDismiss={() => setSnackbarVisible(false)}
+        visible={!!error || !!validationError}
+        onDismiss={() => {
+          clearError();
+          setValidationError('');
+        }}
         duration={4000}
         action={{
           label: 'Dismiss',
-          onPress: () => setSnackbarVisible(false),
+          onPress: () => {
+            clearError();
+            setValidationError('');
+          },
         }}
       >
-        {error || 'An error occurred'}
+        {error || validationError || 'An error occurred'}
       </Snackbar>
     </SafeAreaView>
   );