Retrospective: Building a Cross-Platform App with React Native 0.75, Expo 52, and Firebase 11

// Import required modules from React, Expo, Firebase 11
import React, { createContext, useContext, useState, useEffect, useCallback } from 'react';
import { 
  initializeAuth, 
  createUserWithEmailAndPassword, 
  signInWithEmailAndPassword, 
  signOut, 
  onAuthStateChanged,
  updateProfile,
  sendPasswordResetEmail
} from 'firebase/auth';
import { initializeApp, getApps } from 'firebase/app';
import { Platform } from 'react-native';
import * as SecureStore from 'expo-secure-store';
import { EXPO_PUBLIC_FIREBASE_API_KEY, EXPO_PUBLIC_FIREBASE_PROJECT_ID } from '@env';

// Firebase config using environment variables (Expo 52 best practice)
const firebaseConfig = {
  apiKey: EXPO_PUBLIC_FIREBASE_API_KEY,
  authDomain: `${EXPO_PUBLIC_FIREBASE_PROJECT_ID}.firebaseapp.com`,
  projectId: EXPO_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: `${EXPO_PUBLIC_FIREBASE_PROJECT_ID}.appspot.com`,
  messagingSenderId: 'our-messaging-sender-id', // Redacted for OSS example
  appId: 'our-app-id', // Redacted for OSS example
};

// Initialize Firebase app only if not already initialized (prevents hot reload issues)
const app = getApps().length === 0 ? initializeApp(firebaseConfig) : getApps()[0];

// Configure auth with platform-specific persistence for Expo 52
// React Native 0.75 supports SecureStore for iOS/Android, localStorage for web
let auth;
if (Platform.OS === 'web') {
  auth = initializeAuth(app, {
    // Web uses browser persistence by default
  });
} else {
  // Native uses Expo SecureStore for persistent auth across app restarts
  const { getReactNativePersistence } = require('firebase/auth');
  auth = initializeAuth(app, {
    persistence: getReactNativePersistence(SecureStore),
  });
}

// Define auth context shape
const AuthContext = createContext({
  user: null,
  isLoading: true,
  signUp: async (email, password, displayName) => {},
  signIn: async (email, password) => {},
  signOut: async () => {},
  resetPassword: async (email) => {},
  error: null,
});

// Auth provider component with full error handling and loading states
export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  // Subscribe to auth state changes on mount
  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      setUser(currentUser);
      setIsLoading(false);
    }, (authError) => {
      console.error('Auth state change error:', authError);
      setError(authError.message);
      setIsLoading(false);
    });

    // Cleanup subscription on unmount
    return unsubscribe;
  }, []);

  // Sign up with email/password, update display name, handle errors
  const signUp = useCallback(async (email, password, displayName) => {
    setError(null);
    setIsLoading(true);
    try {
      const userCredential = await createUserWithEmailAndPassword(auth, email, password);
      // Update user profile with display name after sign up
      await updateProfile(userCredential.user, { displayName });
      setUser(userCredential.user);
      return { success: true };
    } catch (signUpError) {
      console.error('Sign up error:', signUpError);
      // Map Firebase error codes to user-friendly messages
      let errorMessage = 'Failed to sign up. Please try again.';
      switch (signUpError.code) {
        case 'auth/email-already-in-use':
          errorMessage = 'This email is already registered.';
          break;
        case 'auth/weak-password':
          errorMessage = 'Password must be at least 6 characters.';
          break;
        case 'auth/invalid-email':
          errorMessage = 'Please enter a valid email address.';
          break;
      }
      setError(errorMessage);
      return { success: false, error: errorMessage };
    } finally {
      setIsLoading(false);
    }
  }, []);

  // Sign in with email/password, handle errors
  const signIn = useCallback(async (email, password) => {
    setError(null);
    setIsLoading(true);
    try {
      const userCredential = await signInWithEmailAndPassword(auth, email, password);
      setUser(userCredential.user);
      return { success: true };
    } catch (signInError) {
      console.error('Sign in error:', signInError);
      let errorMessage = 'Failed to sign in. Please check your credentials.';
      switch (signInError.code) {
        case 'auth/user-not-found':
        case 'auth/wrong-password':
          errorMessage = 'Invalid email or password.';
          break;
        case 'auth/too-many-requests':
          errorMessage = 'Too many sign in attempts. Please try again later.';
          break;
      }
      setError(errorMessage);
      return { success: false, error: errorMessage };
    } finally {
      setIsLoading(false);
    }
  }, []);

  // Sign out, clear user state, handle errors
  const handleSignOut = useCallback(async () => {
    setError(null);
    try {
      await signOut(auth);
      setUser(null);
      return { success: true };
    } catch (signOutError) {
      console.error('Sign out error:', signOutError);
      setError('Failed to sign out. Please try again.');
      return { success: false, error: signOutError.message };
    }
  }, []);

  // Send password reset email, handle errors
  const resetPassword = useCallback(async (email) => {
    setError(null);
    try {
      await sendPasswordResetEmail(auth, email);
      return { success: true };
    } catch (resetError) {
      console.error('Password reset error:', resetError);
      let errorMessage = 'Failed to send password reset email.';
      if (resetError.code === 'auth/user-not-found') {
        errorMessage = 'No account found with this email.';
      }
      setError(errorMessage);
      return { success: false, error: errorMessage };
    }
  }, []);

  return (

      {children}

  );
};

// Custom hook to use auth context, throws error if used outside provider
export const useAuth = () => {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error('useAuth must be used within an AuthProvider');
  }
  return context;
};

// Import Expo Router 3.4 components, React Native components, and error boundary
import { Tabs, Stack, useRouter, useSegments } from 'expo-router';
import { View, Text, TouchableOpacity, ActivityIndicator, StyleSheet } from 'react-native';
import { useAuth } from '../context/AuthContext'; // Our Firebase auth context from earlier
import { Ionicons } from '@expo/vector-icons';
import { useEffect } from 'react';

// Custom error boundary for navigation errors (Expo Router 3.4 best practice)
class NavigationErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    console.error('Navigation error:', error, errorInfo);
    // Log to Firebase Crashlytics in production
    // crashlytics().recordError(error);
  }

  handleReset = () => {
    this.setState({ hasError: false, error: null });
    // Navigate to home screen on reset
    this.props.router.replace('/');
  };

  render() {
    if (this.state.hasError) {
      return (


          Something went wrong
          {this.state.error?.message || 'An unexpected error occurred.'}

            Go to Home


      );
    }

    return this.props.children;
  }
}

// Protected route component to redirect unauthenticated users
const ProtectedRoute = ({ children }) => {
  const { user, isLoading } = useAuth();
  const segments = useSegments();
  const router = useRouter();

  useEffect(() => {
    if (isLoading) return;

    const inAuthGroup = segments[0] === '(auth)';
    if (!user && !inAuthGroup) {
      // Redirect to login if not authenticated and not in auth group
      router.replace('/login');
    } else if (user && inAuthGroup) {
      // Redirect to home if authenticated and in auth group
      router.replace('/');
    }
  }, [user, isLoading, segments]);

  if (isLoading) {
    return (


        Loading...

    );
  }

  return children;
};

// Main tab layout with Expo Router 3.4
export default function RootLayout() {
  return (



           ,
            }}
          />
           ,
            }}
          />
           ,
            }}
          />



  );
}

// Stack navigator for auth screens (login, signup, reset-password)
export function AuthLayout() {
  return (





  );
}

const styles = StyleSheet.create({
  errorContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 24,
    backgroundColor: '#f2f2f7',
  },
  errorTitle: {
    fontSize: 20,
    fontWeight: 'bold',
    marginTop: 16,
    color: '#000000',
  },
  errorMessage: {
    fontSize: 16,
    color: '#8e8e93',
    marginTop: 8,
    textAlign: 'center',
  },
  resetButton: {
    marginTop: 24,
    backgroundColor: '#007aff',
    paddingHorizontal: 24,
    paddingVertical: 12,
    borderRadius: 8,
  },
  resetButtonText: {
    color: '#ffffff',
    fontSize: 16,
    fontWeight: '600',
  },
  loadingContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f2f2f7',
  },
  loadingText: {
    marginTop: 16,
    fontSize: 16,
    color: '#8e8e93',
  },
});

// Import React Native 0.75 bridgeless modules, Firebase Performance 11
import { NativeModules, NativeEventEmitter, Platform } from 'react-native';
import { getPerformance, trace } from 'firebase/performance';
import { getApp } from 'firebase/app';

// Get native module for device info (implemented in Swift/Kotlin for our app)
const { DeviceInfoModule } = NativeModules;

// Initialize event emitter for native events (bridgeless compatible)
const deviceInfoEmitter = DeviceInfoModule ? new NativeEventEmitter(DeviceInfoModule) : null;

// Initialize Firebase Performance for tracing
let performance;
try {
  performance = getPerformance(getApp());
} catch (perfError) {
  console.error('Failed to initialize Firebase Performance:', perfError);
}

// Class to wrap DeviceInfoModule with error handling and performance tracing
// Compatible with React Native 0.75 bridgeless architecture (no bridge required)
class DeviceInfoService {
  constructor() {
    this.isBridgeless = Platform.constants.reactNativeVersion.minor >= 75; // RN 0.75+ supports bridgeless
    this.listeners = [];
    this.batteryLevel = null;
    this.isCharging = false;

    // Subscribe to battery state changes if native module exists
    if (deviceInfoEmitter) {
      this.batteryListener = deviceInfoEmitter.addListener('batteryStateChanged', (event) => {
        this.batteryLevel = event.batteryLevel;
        this.isCharging = event.isCharging;
        this.listeners.forEach((callback) => callback(event));
      });
    }
  }

  // Get device model with performance tracing
  async getDeviceModel() {
    const perfTrace = performance ? trace(performance, 'getDeviceModel') : null;
    try {
      perfTrace?.start();
      if (!DeviceInfoModule) {
        throw new Error('DeviceInfoModule not available');
      }
      // Bridgeless mode uses direct method calls without bridge serialization
      const model = await DeviceInfoModule.getDeviceModel();
      perfTrace?.putAttribute('model', model);
      return { success: true, model };
    } catch (error) {
      console.error('Failed to get device model:', error);
      perfTrace?.putAttribute('error', error.message);
      return { success: false, error: error.message };
    } finally {
      perfTrace?.stop();
    }
  }

  // Get battery info with error handling
  async getBatteryInfo() {
    const perfTrace = performance ? trace(performance, 'getBatteryInfo') : null;
    try {
      perfTrace?.start();
      if (!DeviceInfoModule) {
        throw new Error('DeviceInfoModule not available');
      }
      const batteryInfo = await DeviceInfoModule.getBatteryInfo();
      this.batteryLevel = batteryInfo.batteryLevel;
      this.isCharging = batteryInfo.isCharging;
      perfTrace?.putMetric('batteryLevel', batteryInfo.batteryLevel * 100);
      return { success: true, ...batteryInfo };
    } catch (error) {
      console.error('Failed to get battery info:', error);
      perfTrace?.putAttribute('error', error.message);
      return { success: false, error: error.message };
    } finally {
      perfTrace?.stop();
    }
  }

  // Get storage info (total, free) with bridgeless checks
  async getStorageInfo() {
    const perfTrace = performance ? trace(performance, 'getStorageInfo') : null;
    try {
      perfTrace?.start();
      if (!DeviceInfoModule) {
        return { success: false, error: 'DeviceInfoModule not available' };
      }
      // RN 0.75 bridgeless mode returns native types directly without JSON serialization
      const storageInfo = await DeviceInfoModule.getStorageInfo();
      perfTrace?.putMetric('totalStorageGB', storageInfo.totalStorage / 1024 / 1024 / 1024);
      perfTrace?.putMetric('freeStorageGB', storageInfo.freeStorage / 1024 / 1024 / 1024);
      return { success: true, ...storageInfo };
    } catch (error) {
      console.error('Failed to get storage info:', error);
      return { success: false, error: error.message };
    } finally {
      perfTrace?.stop();
    }
  }

  // Subscribe to battery state changes
  onBatteryChange(callback) {
    this.listeners.push(callback);
    // Return unsubscribe function
    return () => {
      this.listeners = this.listeners.filter((cb) => cb !== callback);
    };
  }

  // Cleanup listeners on unmount
  cleanup() {
    if (this.batteryListener) {
      this.batteryListener.remove();
    }
    this.listeners = [];
  }
}

// Export singleton instance
export const deviceInfoService = new DeviceInfoService();

// Example usage in a React component:
// useEffect(() => {
//   const fetchDeviceInfo = async () => {
//     const model = await deviceInfoService.getDeviceModel();
//     const battery = await deviceInfoService.getBatteryInfo();
//     console.log('Device Model:', model);
//     console.log('Battery Level:', battery.batteryLevel);
//   };
//   fetchDeviceInfo();
//   const unsubscribe = deviceInfoService.onBatteryChange((event) => {
//     console.log('Battery Changed:', event);
//   });
//   return () => unsubscribe();
// }, []);

// eas.json configuration for EAS Update with rollback safety
{
  \"cli\": {
    \"version\": \">= 12.4.0\"
  },
  \"build\": {
    \"production\": {
      \"channel\": \"production\",
      \"distribution\": \"store\",
      \"ios\": {
        \"simulator\": false
      }
    }
  },
  \"submit\": {
    \"production\": {}
  },
  \"updates\": {
    \"production\": {
      \"channel\": \"production\",
      \"platforms\": [\"ios\", \"android\"],
      \"diff\": true // Enable differential updates
    },
    \"staging\": {
      \"channel\": \"staging\",
      \"platforms\": [\"ios\", \"android\"]
    }
  }
}

// Firebase 11 Modular SDK Import (Correct)
import { initializeApp } from 'firebase/app';
import { getAuth, createUserWithEmailAndPassword } from 'firebase/auth';

// Legacy Firebase 9+ Namespaced Import (Avoid)
// import firebase from 'firebase/compat/app';
// import 'firebase/compat/auth';
// const auth = firebase.auth();

// app.json configuration to enable React Native 0.75 bridgeless mode (Expo 52)
{
  \"expo\": {
    \"name\": \"OurCrossPlatformApp\",
    \"slug\": \"our-cross-platform-app\",
    \"version\": \"1.0.0\",
    \"runtimeVersion\": {
      \"policy\": \"appVersion\"
    },
    \"ios\": {
      \"bundledNativeModules\": [\"expo-secure-store\"]
    },
    \"android\": {
      \"bridgeless\": true // Enable bridgeless architecture for Android
    },
    \"plugins\": []
  }
}