react-native-3rddigital-appupdate 1.0.0

package/package.json

@@ -0,0 +1,170 @@
+{
+  "name": "react-native-3rddigital-appupdate",
+  "version": "1.0.0",
+  "description": "A React Native library for seamless over-the-air (OTA) updates with version checks, automatic bundle download, and customizable user prompts for iOS and Android.",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "build": "bob build",
+    "example": "yarn workspace react-native-app-update-example",
+    "test": "jest",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "clean": "del-cli lib",
+    "prepare": "bob build",
+    "release": "release-it --only-version"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/latest3rddigital/react-native-app-update.git"
+  },
+  "author": "Sagar Bhavsar <sagar@3rddigital.com> (https://github.com/latest3rddigital/react-native-app-update)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/latest3rddigital/react-native-app-update/issues"
+  },
+  "homepage": "https://github.com/latest3rddigital/react-native-app-update#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^19.8.1",
+    "@eslint/compat": "^1.3.2",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.35.0",
+    "@evilmartians/lefthook": "^1.12.3",
+    "@react-native/babel-preset": "0.81.1",
+    "@react-native/eslint-config": "^0.81.1",
+    "@release-it/conventional-changelog": "^10.0.1",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.1.12",
+    "@typescript-eslint/eslint-plugin": "^8.45.0",
+    "commitlint": "^19.8.1",
+    "del-cli": "^6.0.0",
+    "eslint": "^9.35.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-ft-flow": "^3.0.11",
+    "eslint-plugin-jest": "^29.0.1",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-react-native": "^5.0.0",
+    "jest": "^29.7.0",
+    "prettier": "^3.6.2",
+    "react": "19.1.0",
+    "react-native": "0.81.4",
+    "react-native-builder-bob": "^0.40.13",
+    "release-it": "^19.0.4",
+    "typescript": "^5.9.2"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@3.6.1",
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
+        }
+      }
+    }
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "create-react-native-library": {
+    "languages": "js",
+    "type": "library",
+    "version": "0.54.3"
+  },
+  "dependencies": {
+    "@inquirer/prompts": "^7.8.6",
+    "axios": "^1.12.2",
+    "form-data": "^4.0.4",
+    "react-native-blob-util": "^0.22.2",
+    "react-native-device-info": "^14.1.1",
+    "react-native-ota-hot-update": "^2.3.4"
+  },
+  "bin": {
+    "appupdate": "./scripts/bundle.js"
+  }
+}

package/scripts/bundle.js

@@ -0,0 +1,186 @@
+#!/usr/bin/env node
+const { execSync } = require('child_process');
+const path = require('path');
+const fs = require('fs');
+const axios = require('axios');
+const FormData = require('form-data');
+const { input, select, confirm } = require('@inquirer/prompts');
+
+const API_BASE_URL = 'https://dev.3rddigital.com/appupdate-api/api/';
+
+function run(command) {
+  try {
+    console.log(`\n➡️ Running: ${command}\n`);
+    execSync(command, { stdio: 'inherit' });
+  } catch (err) {
+    console.error(`❌ Command failed: ${command}`);
+    console.error(err.message);
+    process.exit(1);
+  }
+}
+
+async function uploadBundle({ filePath, platform, config }) {
+  console.log(`📤 Uploading ${platform} bundle to server...`);
+
+  if (!fs.existsSync(filePath)) {
+    console.error(`❌ File not found: ${filePath}`);
+    process.exit(1);
+  }
+
+  const fileStream = fs.createReadStream(filePath);
+  const form = new FormData();
+  form.append('bundle', fileStream);
+  form.append('projectId', config.PROJECT_ID);
+  form.append('environment', config.ENVIRONMENT);
+  form.append('platform', platform);
+  form.append('version', config.VERSION);
+  form.append('buildNumber', String(config.BUILD_NUMBER));
+  form.append('forceUpdate', String(config.FORCE_UPDATE));
+
+  try {
+    const res = await axios.post(`${API_BASE_URL}/bundles`, form, {
+      headers: {
+        ...form.getHeaders(),
+        Authorization: `Bearer ${config.API_TOKEN}`,
+      },
+    });
+    console.log(
+      `✅ ${platform} bundle uploaded successfully! Response:`,
+      JSON.stringify(res.data, null, 2)
+    );
+  } catch (err) {
+    console.error(`❌ ${platform} bundle upload failed!`);
+    if (err.response) {
+      console.error('Status:', err.response.status);
+      console.error('Data:', err.response.data);
+    } else {
+      console.error('Message:', err.message);
+    }
+    process.exit(1);
+  }
+}
+
+function buildAndroid() {
+  console.log('📦 Building Android bundle...');
+  const outputPath = path.join('android', 'index.android.bundle.zip');
+  run(
+    `mkdir -p android/output && ` +
+      `react-native bundle --platform android --dev false --entry-file index.js ` +
+      `--bundle-output android/output/index.android.bundle --assets-dest android/output ` +
+      `--sourcemap-output android/sourcemap.js && ` +
+      `cd android && find output -type f | zip index.android.bundle.zip -@ && ` +
+      `zip sourcemap.zip sourcemap.js && cd .. && rm -rf android/output && rm -rf android/sourcemap.js`
+  );
+  console.log(`✅ Android bundle created at ${outputPath}`);
+  return outputPath;
+}
+
+function buildIOS() {
+  console.log('📦 Building iOS bundle...');
+  const outputPath = path.join('ios', 'main.jsbundle.zip');
+  run(
+    `mkdir -p ios/output && ` +
+      `react-native bundle --platform ios --dev false --entry-file index.js ` +
+      `--bundle-output ios/output/main.jsbundle --assets-dest ios/output ` +
+      `--sourcemap-output ios/sourcemap.js && ` +
+      `cd ios && find output -type f | zip main.jsbundle.zip -@ && ` +
+      `zip sourcemap.zip sourcemap.js && cd .. && rm -rf ios/output && rm -rf ios/sourcemap.js`
+  );
+  console.log(`✅ iOS bundle created at ${outputPath}`);
+  return outputPath;
+}
+
+async function getConfig(platform) {
+  console.log(`\n⚙️  Enter configuration for ${platform.toUpperCase()}\n`);
+
+  const API_TOKEN = await input({
+    message: `(${platform}) Enter API Token:`,
+    validate: (val) => (val.trim() ? true : 'API Token is required'),
+  });
+
+  const PROJECT_ID = await input({
+    message: `(${platform}) Enter Project ID:`,
+    validate: (val) => (val.trim() ? true : 'Project ID is required'),
+  });
+
+  const ENVIRONMENT = await select({
+    message: `(${platform}) Select Environment:`,
+    choices: [
+      { name: 'development', value: 'development' },
+      { name: 'production', value: 'production' },
+    ],
+  });
+
+  const VERSION = await input({
+    message: `(${platform}) Enter App Version (e.g. 1.0.0):`,
+    validate: (val) => (val.trim() ? true : 'Version is required'),
+  });
+
+  const BUILD_NUMBER = await input({
+    message: `(${platform}) Enter Build Number:`,
+    validate: (val) =>
+      !isNaN(val) && val.trim() !== '' ? true : 'Must be a number',
+  });
+
+  const FORCE_UPDATE = await confirm({
+    message: `(${platform}) Force Update?`,
+    default: false,
+  });
+
+  return {
+    API_TOKEN,
+    PROJECT_ID,
+    ENVIRONMENT,
+    VERSION,
+    BUILD_NUMBER,
+    FORCE_UPDATE,
+  };
+}
+
+(async () => {
+  try {
+    const platform = process.argv[2];
+    if (!platform) {
+      console.log('❌ Please specify a platform: android | ios | all');
+      process.exit(1);
+    }
+
+    if (platform === 'android') {
+      const config = await getConfig('android');
+      const androidFile = buildAndroid();
+      await uploadBundle({
+        filePath: androidFile,
+        platform: 'android',
+        config,
+      });
+    } else if (platform === 'ios') {
+      const config = await getConfig('ios');
+      const iosFile = buildIOS();
+      await uploadBundle({ filePath: iosFile, platform: 'ios', config });
+    } else if (platform === 'all') {
+      const androidConfig = await getConfig('android');
+      const androidFile = buildAndroid();
+      await uploadBundle({
+        filePath: androidFile,
+        platform: 'android',
+        config: androidConfig,
+      });
+
+      const iosConfig = await getConfig('ios');
+      const iosFile = buildIOS();
+      await uploadBundle({
+        filePath: iosFile,
+        platform: 'ios',
+        config: iosConfig,
+      });
+    } else {
+      console.log('❌ Invalid option. Use: android | ios | all');
+      process.exit(1);
+    }
+
+    console.log('\n🎉 All tasks completed successfully!\n');
+  } catch (err) {
+    console.error('❌ Fatal error:', err.message);
+    process.exit(1);
+  }
+})();

package/src/AppAlertDialog.tsx

@@ -0,0 +1,171 @@
+import { useState } from 'react';
+import {
+  Modal,
+  Pressable,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+
+export type DialogOptions = {
+  title?: string;
+  message?: string;
+  cancelText?: string;
+  confirmText?: string;
+  onCancel?: () => void;
+  onConfirm?: () => void;
+  titleStyle?: TextStyle;
+  messageStyle?: TextStyle;
+  cancelButtonStyle?: ViewStyle;
+  confirmButtonStyle?: ViewStyle;
+  cancelTextStyle?: TextStyle;
+  confirmTextStyle?: TextStyle;
+  overlayColor?: string;
+};
+
+let showDialog: (options: DialogOptions) => void;
+let hideDialog: () => void;
+
+export const AppAlertDialog = () => {
+  const [visible, setVisible] = useState(false);
+  const [options, setOptions] = useState<DialogOptions>({});
+
+  showDialog = (opts: DialogOptions) => {
+    setOptions(opts);
+    setVisible(true);
+  };
+
+  hideDialog = () => {
+    setVisible(false);
+  };
+
+  const handleBackPress = () => {
+    if (visible) {
+      hideDialog();
+      options.onCancel?.();
+    }
+  };
+
+  return (
+    <Modal
+      transparent
+      visible={visible}
+      animationType="fade"
+      onRequestClose={handleBackPress}
+    >
+      <Pressable
+        style={[
+          styles.overlay,
+          { backgroundColor: options.overlayColor || 'rgba(0,0,0,0.3)' },
+        ]}
+        onPress={() => {
+          hideDialog();
+          options.onCancel?.();
+        }}
+      >
+        <Pressable style={styles.dialogBox} onPress={() => {}}>
+          <Text style={[styles.title, options.titleStyle]}>
+            {options.title || 'Alert'}
+          </Text>
+          <Text style={[styles.message, options.messageStyle]}>
+            {options.message || ''}
+          </Text>
+
+          <View style={styles.buttonRow}>
+            <TouchableOpacity
+              onPress={() => {
+                hideDialog();
+                options.onCancel?.();
+              }}
+              style={[
+                styles.button,
+                styles.cancelButton,
+                options.cancelButtonStyle,
+              ]}
+            >
+              <Text style={[styles.cancelText, options.cancelTextStyle]}>
+                {options.cancelText || 'Cancel'}
+              </Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity
+              onPress={() => {
+                hideDialog();
+                options.onConfirm?.();
+              }}
+              style={[
+                styles.button,
+                styles.confirmButton,
+                options.confirmButtonStyle,
+              ]}
+            >
+              <Text style={[styles.confirmText, options.confirmTextStyle]}>
+                {options.confirmText || 'OK'}
+              </Text>
+            </TouchableOpacity>
+          </View>
+        </Pressable>
+      </Pressable>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 9999,
+  },
+  dialogBox: {
+    width: '80%',
+    backgroundColor: '#fff',
+    borderRadius: 12,
+    padding: 20,
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '600',
+    marginBottom: 10,
+    textAlign: 'center',
+  },
+  message: {
+    fontSize: 14,
+    color: '#4B5563',
+    textAlign: 'center',
+    marginBottom: 20,
+  },
+  buttonRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '100%',
+  },
+  button: {
+    flex: 1,
+    paddingVertical: 10,
+    borderRadius: 8,
+    alignItems: 'center',
+    marginHorizontal: 5,
+  },
+  cancelButton: {
+    backgroundColor: '#E5E7EB',
+  },
+  confirmButton: {
+    backgroundColor: '#2563EB',
+  },
+  cancelText: {
+    color: '#374151',
+    fontWeight: '500',
+  },
+  confirmText: {
+    color: '#fff',
+    fontWeight: '500',
+  },
+});
+
+AppAlertDialog.showMessage = (options: DialogOptions) => showDialog?.(options);
+AppAlertDialog.hide = () => hideDialog?.();

package/src/AppLoader.tsx

@@ -0,0 +1,84 @@
+import { useState } from 'react';
+import {
+  ActivityIndicator,
+  StyleSheet,
+  Text,
+  View,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+
+export type LoaderOptions = {
+  text?: string;
+  color?: string;
+  backgroundColor?: string;
+  textColor?: string;
+  containerStyle?: ViewStyle;
+  textStyle?: TextStyle;
+};
+
+let showLoader: (options?: LoaderOptions) => void;
+let hideLoader: () => void;
+
+export const AppLoader = () => {
+  const [visible, setVisible] = useState(false);
+  const [options, setOptions] = useState<LoaderOptions>({});
+
+  showLoader = (opts?: LoaderOptions) => {
+    setOptions(opts || {});
+    setVisible(true);
+  };
+
+  hideLoader = () => {
+    setVisible(false);
+  };
+
+  if (!visible) return null;
+
+  return (
+    <View
+      style={[
+        styles.overlay,
+        { backgroundColor: options.backgroundColor || 'rgba(0,0,0,0.3)' },
+      ]}
+    >
+      <View style={[styles.loaderBox, options.containerStyle]}>
+        <ActivityIndicator size="large" color={options.color || '#2563EB'} />
+        {options.text && (
+          <Text
+            style={[
+              styles.text,
+              { color: options.textColor || '#fff' },
+              options.textStyle,
+            ]}
+          >
+            {options.text}
+          </Text>
+        )}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 9999,
+  },
+  loaderBox: {
+    padding: 20,
+    borderRadius: 10,
+    backgroundColor: '#1F2937',
+    alignItems: 'center',
+  },
+  text: {
+    marginTop: 12,
+    fontSize: 14,
+    fontWeight: '500',
+  },
+});
+
+AppLoader.show = (options?: LoaderOptions) => showLoader?.(options);
+AppLoader.hide = () => hideLoader?.();

package/src/OTAProvider.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { AppAlertDialog } from './AppAlertDialog';
+import { AppLoader } from './AppLoader';
+
+export const OTAProvider = ({ children }: { children?: React.ReactNode }) => (
+  <>
+    {children}
+    <AppLoader />
+    <AppAlertDialog />
+  </>
+);