react-native-codepush-sdk 1.0.0

package/services/codepushService.ts

@@ -0,0 +1,181 @@
+import { CodePushUpdate, CodePushDeployment, CodePushSyncStatus, UpdateHistory } from '../types/codepush';
+
+// Mock service for demonstration - replace with actual CodePush SDK calls
+class CodePushService {
+  private mockDeployments: CodePushDeployment[] = [
+    {
+      name: 'Production',
+      key: 'prod-key-12345678',
+      package: {
+        id: '1',
+        label: 'v1.2.3',
+        description: 'Bug fixes and performance improvements',
+        packageHash: 'abc123def456',
+        blobUrl: 'https://codepush.blob.core.windows.net/package1',
+        downloadUrl: 'https://codepush.blob.core.windows.net/package1',
+        packageSize: 2048576,
+        deploymentKey: 'prod-key-12345678',
+        isFirstRun: false,
+        failedInstall: false,
+        isMandatory: false,
+        timestamp: Date.now() - 86400000,
+        version: '1.2.3'
+      }
+    },
+    {
+      name: 'Staging',
+      key: 'staging-key-87654321',
+      package: {
+        id: '2',
+        label: 'v1.2.4-beta',
+        description: 'New feature preview and experimental changes',
+        packageHash: 'def456ghi789',
+        blobUrl: 'https://codepush.blob.core.windows.net/package2',
+        downloadUrl: 'https://codepush.blob.core.windows.net/package2',
+        packageSize: 3145728,
+        deploymentKey: 'staging-key-87654321',
+        isFirstRun: false,
+        failedInstall: false,
+        isMandatory: true,
+        timestamp: Date.now() - 3600000,
+        version: '1.2.4'
+      }
+    },
+    {
+      name: 'Development',
+      key: 'dev-key-11223344',
+    }
+  ];
+
+  private mockHistory: UpdateHistory[] = [
+    {
+      id: '1',
+      version: '1.2.3',
+      timestamp: Date.now() - 86400000,
+      status: 'SUCCESS',
+      description: 'Bug fixes and performance improvements',
+      downloadSize: 2048576,
+    },
+    {
+      id: '2',
+      version: '1.2.2',
+      timestamp: Date.now() - 172800000,
+      status: 'SUCCESS',
+      description: 'UI improvements and new dashboard features',
+      downloadSize: 1536000,
+    },
+    {
+      id: '3',
+      version: '1.2.1',
+      timestamp: Date.now() - 259200000,
+      status: 'ROLLBACK',
+      description: 'Critical bug fix rollback',
+      downloadSize: 1024000,
+    },
+    {
+      id: '4',
+      version: '1.2.0',
+      timestamp: Date.now() - 345600000,
+      status: 'FAILED',
+      description: 'Major feature update with new authentication',
+      downloadSize: 4096000,
+    }
+  ];
+
+  async checkForUpdate(): Promise<CodePushUpdate | null> {
+    // Simulate API call delay
+    await new Promise(resolve => setTimeout(resolve, 1500));
+    
+    // 70% chance of no update, 30% chance of update available
+    if (Math.random() > 0.3) {
+      return null;
+    }
+
+    return {
+      id: 'update-' + Date.now(),
+      label: 'v1.2.5',
+      description: 'Security updates and bug fixes',
+      packageHash: 'new-hash-123',
+      blobUrl: 'https://codepush.blob.core.windows.net/new-package',
+      downloadUrl: 'https://codepush.blob.core.windows.net/new-package',
+      packageSize: 1843200,
+      deploymentKey: 'prod-key-12345678',
+      isFirstRun: false,
+      failedInstall: false,
+      isMandatory: false,
+      timestamp: Date.now(),
+      version: '1.2.5'
+    };
+  }
+
+  async downloadUpdate(
+    update: CodePushUpdate,
+    onProgress: (progress: number) => void
+  ): Promise<boolean> {
+    // Simulate download progress
+    for (let i = 0; i <= 100; i += 5) {
+      await new Promise(resolve => setTimeout(resolve, 100));
+      onProgress(i);
+    }
+    return true;
+  }
+
+  async installUpdate(): Promise<boolean> {
+    // Simulate installation
+    await new Promise(resolve => setTimeout(resolve, 2000));
+    return true;
+  }
+
+  async sync(onStatusChange: (status: CodePushSyncStatus) => void): Promise<boolean> {
+    onStatusChange({ status: 'CHECKING_FOR_UPDATE' });
+    await new Promise(resolve => setTimeout(resolve, 1000));
+
+    const update = await this.checkForUpdate();
+    
+    if (!update) {
+      onStatusChange({ status: 'UP_TO_DATE' });
+      return false;
+    }
+
+    onStatusChange({ status: 'DOWNLOADING_PACKAGE', progress: 0 });
+    
+    const downloadSuccess = await this.downloadUpdate(update, (progress) => {
+      onStatusChange({ status: 'DOWNLOADING_PACKAGE', progress });
+    });
+
+    if (!downloadSuccess) {
+      onStatusChange({ status: 'UNKNOWN_ERROR' });
+      return false;
+    }
+
+    onStatusChange({ status: 'INSTALLING_UPDATE' });
+    const installSuccess = await this.installUpdate();
+
+    if (installSuccess) {
+      onStatusChange({ status: 'UPDATE_INSTALLED' });
+      return true;
+    } else {
+      onStatusChange({ status: 'UNKNOWN_ERROR' });
+      return false;
+    }
+  }
+
+  async getDeployments(): Promise<CodePushDeployment[]> {
+    // Simulate API call
+    await new Promise(resolve => setTimeout(resolve, 500));
+    return this.mockDeployments;
+  }
+
+  async getUpdateHistory(): Promise<UpdateHistory[]> {
+    // Simulate API call
+    await new Promise(resolve => setTimeout(resolve, 300));
+    return this.mockHistory;
+  }
+
+  async getCurrentPackageInfo(): Promise<CodePushUpdate | null> {
+    // Return current package info
+    return this.mockDeployments[0].package || null;
+  }
+}
+
+export const codePushService = new CodePushService();

package/src/components/UpdateChecker.tsx

@@ -0,0 +1,303 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  ActivityIndicator,
+  Alert,
+} from 'react-native';
+import { useCodePush } from '../sdk/CodePushProvider';
+
+const UpdateChecker: React.FC = () => {
+  const {
+    currentUpdate,
+    availableUpdate,
+    syncStatus,
+    isChecking,
+    isDownloading,
+    isInstalling,
+    checkForUpdate,
+    syncUpdate,
+    rollback,
+    clearUpdates,
+  } = useCodePush();
+
+  const getStatusMessage = () => {
+    if (isChecking) return 'Checking for updates...';
+    if (isDownloading) return 'Downloading update...';
+    if (isInstalling) return 'Installing update...';
+    if (availableUpdate) return 'Update available!';
+    return 'App is up to date';
+  };
+
+  const getStatusColor = () => {
+    if (isChecking || isDownloading || isInstalling) return '#007bff';
+    if (availableUpdate) return '#ffc107';
+    return '#28a745';
+  };
+
+  const handleRollback = () => {
+    Alert.alert(
+      'Rollback Update',
+      'Are you sure you want to rollback to the previous version? This will restart the app.',
+      [
+        { text: 'Cancel', style: 'cancel' },
+        { text: 'Rollback', style: 'destructive', onPress: rollback },
+      ]
+    );
+  };
+
+  const handleClearUpdates = () => {
+    Alert.alert(
+      'Clear Updates',
+      'This will remove all downloaded updates and reset to the original app version.',
+      [
+        { text: 'Cancel', style: 'cancel' },
+        { text: 'Clear', style: 'destructive', onPress: clearUpdates },
+      ]
+    );
+  };
+
+  const formatBytes = (bytes: number) => {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <Text style={styles.title}>Custom CodePush</Text>
+        <Text style={styles.subtitle}>Over-the-Air Updates</Text>
+      </View>
+
+      {/* Status Card */}
+      <View style={[styles.statusCard, { borderLeftColor: getStatusColor() }]}>
+        <View style={styles.statusHeader}>
+          <Text style={[styles.statusText, { color: getStatusColor() }]}>
+            {getStatusMessage()}
+          </Text>
+          {(isChecking || isDownloading || isInstalling) && (
+            <ActivityIndicator size="small" color={getStatusColor()} />
+          )}
+        </View>
+
+        {syncStatus?.progress !== undefined && (
+          <View style={styles.progressContainer}>
+            <View style={styles.progressBar}>
+              <View
+                style={[
+                  styles.progressFill,
+                  {
+                    width: `${syncStatus.progress}%`,
+                    backgroundColor: getStatusColor(),
+                  },
+                ]}
+              />
+            </View>
+            <Text style={styles.progressText}>{Math.round(syncStatus.progress)}%</Text>
+          </View>
+        )}
+      </View>
+
+      {/* Current Version Info */}
+      {currentUpdate && (
+        <View style={styles.infoCard}>
+          <Text style={styles.cardTitle}>Current Version</Text>
+          <Text style={styles.infoText}>Label: {currentUpdate.label}</Text>
+          <Text style={styles.infoText}>Version: {currentUpdate.appVersion}</Text>
+          <Text style={styles.infoText}>Hash: {currentUpdate.packageHash.substring(0, 8)}...</Text>
+          <Text style={styles.infoText}>Size: {formatBytes(currentUpdate.packageSize)}</Text>
+          {currentUpdate.description && (
+            <Text style={styles.infoDescription}>{currentUpdate.description}</Text>
+          )}
+        </View>
+      )}
+
+      {/* Available Update Info */}
+      {availableUpdate && (
+        <View style={styles.infoCard}>
+          <Text style={styles.cardTitle}>Available Update</Text>
+          <Text style={styles.infoText}>Label: {availableUpdate.label}</Text>
+          <Text style={styles.infoText}>Version: {availableUpdate.appVersion}</Text>
+          <Text style={styles.infoText}>Size: {formatBytes(availableUpdate.packageSize)}</Text>
+          <Text style={[
+            styles.infoText,
+            { color: availableUpdate.isMandatory ? '#dc3545' : '#28a745' }
+          ]}>
+            {availableUpdate.isMandatory ? 'Mandatory Update' : 'Optional Update'}
+          </Text>
+          {availableUpdate.description && (
+            <Text style={styles.infoDescription}>{availableUpdate.description}</Text>
+          )}
+        </View>
+      )}
+
+      {/* Action Buttons */}
+      <View style={styles.buttonContainer}>
+        <TouchableOpacity
+          style={[styles.button, styles.primaryButton]}
+          onPress={checkForUpdate}
+          disabled={isChecking}
+        >
+          <Text style={styles.buttonText}>Check for Updates</Text>
+        </TouchableOpacity>
+
+        {availableUpdate && (
+          <TouchableOpacity
+            style={[styles.button, styles.successButton]}
+            onPress={syncUpdate}
+            disabled={isDownloading || isInstalling}
+          >
+            <Text style={styles.buttonText}>
+              {availableUpdate.isMandatory ? 'Install Now (Required)' : 'Install Update'}
+            </Text>
+          </TouchableOpacity>
+        )}
+
+        {currentUpdate && (
+          <TouchableOpacity
+            style={[styles.button, styles.warningButton]}
+            onPress={handleRollback}
+            disabled={isDownloading || isInstalling}
+          >
+            <Text style={styles.buttonText}>Rollback</Text>
+          </TouchableOpacity>
+        )}
+
+        <TouchableOpacity
+          style={[styles.button, styles.dangerButton]}
+          onPress={handleClearUpdates}
+          disabled={isDownloading || isInstalling}
+        >
+          <Text style={styles.buttonText}>Clear All Updates</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 20,
+    backgroundColor: '#f8f9fa',
+  },
+  header: {
+    alignItems: 'center',
+    marginBottom: 30,
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: 'bold',
+    color: '#212529',
+    marginBottom: 8,
+  },
+  subtitle: {
+    fontSize: 16,
+    color: '#6c757d',
+  },
+  statusCard: {
+    backgroundColor: '#ffffff',
+    borderRadius: 8,
+    padding: 20,
+    marginBottom: 20,
+    borderLeftWidth: 4,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+  statusHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  statusText: {
+    fontSize: 18,
+    fontWeight: '600',
+  },
+  progressContainer: {
+    marginTop: 15,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  progressBar: {
+    flex: 1,
+    height: 8,
+    backgroundColor: '#e9ecef',
+    borderRadius: 4,
+    marginRight: 10,
+  },
+  progressFill: {
+    height: '100%',
+    borderRadius: 4,
+  },
+  progressText: {
+    fontSize: 14,
+    fontWeight: '500',
+    color: '#495057',
+    minWidth: 40,
+  },
+  infoCard: {
+    backgroundColor: '#ffffff',
+    borderRadius: 8,
+    padding: 16,
+    marginBottom: 16,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.1,
+    shadowRadius: 2,
+    elevation: 2,
+  },
+  cardTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#212529',
+    marginBottom: 12,
+  },
+  infoText: {
+    fontSize: 14,
+    color: '#495057',
+    marginBottom: 4,
+  },
+  infoDescription: {
+    fontSize: 14,
+    color: '#6c757d',
+    marginTop: 8,
+    fontStyle: 'italic',
+  },
+  buttonContainer: {
+    marginTop: 20,
+  },
+  button: {
+    paddingVertical: 12,
+    paddingHorizontal: 20,
+    borderRadius: 8,
+    marginBottom: 12,
+    alignItems: 'center',
+  },
+  primaryButton: {
+    backgroundColor: '#007bff',
+  },
+  successButton: {
+    backgroundColor: '#28a745',
+  },
+  warningButton: {
+    backgroundColor: '#ffc107',
+  },
+  dangerButton: {
+    backgroundColor: '#dc3545',
+  },
+  buttonText: {
+    color: '#ffffff',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+});
+
+export default UpdateChecker;

package/src/sdk/CodePushProvider.tsx

@@ -0,0 +1,184 @@
+import React, { createContext, useContext, useEffect, useState, ReactNode } from 'react';
+import { AppState, AppStateStatus } from 'react-native';
+import CustomCodePush, { CodePushConfiguration, UpdatePackage, SyncStatus } from './CustomCodePush';
+
+interface CodePushContextType {
+  codePush: CustomCodePush | null;
+  currentUpdate: UpdatePackage | null;
+  availableUpdate: UpdatePackage | null;
+  syncStatus: SyncStatus | null;
+  isChecking: boolean;
+  isDownloading: boolean;
+  isInstalling: boolean;
+  checkForUpdate: () => Promise<void>;
+  syncUpdate: () => Promise<void>;
+  rollback: () => Promise<void>;
+  clearUpdates: () => Promise<void>;
+  getBundleUrl: () => string | null;
+}
+
+const CodePushContext = createContext<CodePushContextType | undefined>(undefined);
+
+interface CodePushProviderProps {
+  children: ReactNode;
+  config: CodePushConfiguration;
+  autoCheck?: boolean;
+  checkOnResume?: boolean;
+}
+
+export const CodePushProvider: React.FC<CodePushProviderProps> = ({
+  children,
+  config,
+  autoCheck = true,
+  checkOnResume = true,
+}) => {
+  const [codePush] = useState(() => new CustomCodePush(config));
+  const [currentUpdate, setCurrentUpdate] = useState<UpdatePackage | null>(null);
+  const [availableUpdate, setAvailableUpdate] = useState<UpdatePackage | null>(null);
+  const [syncStatus, setSyncStatus] = useState<SyncStatus | null>(null);
+  const [isChecking, setIsChecking] = useState(false);
+  const [isDownloading, setIsDownloading] = useState(false);
+  const [isInstalling, setIsInstalling] = useState(false);
+
+  useEffect(() => {
+    // Wait for SDK to initialize (load stored package) before updating state
+    codePush.initialize()
+      .then(async () => {
+        await loadCurrentUpdate();
+        if (autoCheck) {
+          await checkForUpdate();
+        }
+      })
+      .catch(error => {
+        console.error('Error initializing CodePush SDK:', error);
+      });
+
+    // Set up app state listener for resume checks
+    if (checkOnResume) {
+      const handleAppStateChange = (nextAppState: AppStateStatus) => {
+        if (nextAppState === 'active') {
+          checkForUpdate();
+        }
+      };
+
+      const subscription = AppState.addEventListener('change', handleAppStateChange);
+      return () => subscription?.remove();
+    }
+  }, []);
+
+  const loadCurrentUpdate = async () => {
+    try {
+      const current = await codePush.getCurrentPackage();
+      setCurrentUpdate(current);
+    } catch (error) {
+      console.error('Failed to load current update:', error);
+    }
+  };
+
+  const checkForUpdate = async () => {
+    if (isChecking) return;
+
+    setIsChecking(true);
+    try {
+      const update = await codePush.checkForUpdate();
+      setAvailableUpdate(update);
+    } catch (error) {
+      console.error('Failed to check for update:', error);
+    } finally {
+      setIsChecking(false);
+    }
+  };
+
+  const syncUpdate = async () => {
+    if (!availableUpdate || isDownloading || isInstalling) return;
+
+    try {
+      const success = await codePush.sync(
+        {
+          installMode: 'ON_NEXT_RESTART',
+          mandatoryInstallMode: 'ON_NEXT_RESTART',
+        },
+        (status) => {
+          setSyncStatus(status);
+          
+          switch (status.status) {
+            case 'DOWNLOADING_PACKAGE':
+              setIsDownloading(true);
+              setIsInstalling(false);
+              break;
+            case 'INSTALLING_UPDATE':
+              setIsDownloading(false);
+              setIsInstalling(true);
+              break;
+            case 'UPDATE_INSTALLED':
+            case 'UP_TO_DATE':
+            case 'UNKNOWN_ERROR':
+              setIsDownloading(false);
+              setIsInstalling(false);
+              break;
+          }
+        },
+        (progress) => {
+          // Handle download progress if needed
+        }
+      );
+
+      if (success) {
+        setAvailableUpdate(null);
+        await loadCurrentUpdate();
+      }
+    } catch (error) {
+      console.error('Failed to sync update:', error);
+      setIsDownloading(false);
+      setIsInstalling(false);
+    }
+  };
+
+  const rollback = async () => {
+    try {
+      await codePush.rollback();
+      setCurrentUpdate(null);
+    } catch (error) {
+      console.error('Failed to rollback:', error);
+    }
+  };
+
+  const clearUpdates = async () => {
+    try {
+      await codePush.clearUpdates();
+      setCurrentUpdate(null);
+      setAvailableUpdate(null);
+    } catch (error) {
+      console.error('Failed to clear updates:', error);
+    }
+  };
+
+  const contextValue: CodePushContextType = {
+    codePush,
+    currentUpdate,
+    availableUpdate,
+    syncStatus,
+    isChecking,
+    isDownloading,
+    isInstalling,
+    checkForUpdate,
+    syncUpdate,
+    rollback,
+    clearUpdates,
+    getBundleUrl: () => codePush.getBundleUrl(),
+  };
+
+  return (
+    <CodePushContext.Provider value={contextValue}>
+      {children}
+    </CodePushContext.Provider>
+  );
+};
+
+export const useCodePush = (): CodePushContextType => {
+  const context = useContext(CodePushContext);
+  if (context === undefined) {
+    throw new Error('useCodePush must be used within a CodePushProvider');
+  }
+  return context;
+};