Refactor App component to utilize granular update checks for major, minor, and patch versions; enhance needsUpdate function to support specific update levels and improve version comparison logic in semver.ts.

Author: AlshehriAli0

example/App.tsx

@@ -5,21 +5,33 @@ import { getLatestVersion, getStoreUrl, needsUpdate, VersionCheck } from "react-
 
 export default function App() {
   const [loading, setLoading] = useState(true);
-  const [updateAvailable, setUpdateAvailable] = useState(false);
   const [storeUrl, setStoreUrl] = useState<string | null>(null);
   const [latestVersion, setLatestVersion] = useState<string | null>(null);
+  const [updateLevel, setUpdateLevel] = useState<"major" | "minor" | "patch" | null>(null);
   const [error, setError] = useState<string | null>(null);
 
-  // Fetch all async data on mount
   useEffect(() => {
     const fetchAll = async () => {
       try {
-        const [update, url, latest] = await Promise.all([needsUpdate(), getStoreUrl(), getLatestVersion()]);
-        setUpdateAvailable(update);
+        const [url, latest] = await Promise.all([getStoreUrl(), getLatestVersion()]);
         setStoreUrl(url);
         setLatestVersion(latest);
+
+        // Check each level to determine the most specific update type
+        const isMajor = await needsUpdate({ level: "major" });
+        if (isMajor) {
+          setUpdateLevel("major");
+        } else {
+          const isMinor = await needsUpdate({ level: "minor" });
+          if (isMinor) {
+            setUpdateLevel("minor");
+          } else {
+            const isPatch = await needsUpdate({ level: "patch" });
+            if (isPatch) setUpdateLevel("patch");
+          }
+        }
       } catch {
-        setError("App not found in store"); // this is not an error, it's just a fallback
+        setError("App not found in store");
       }
       setLoading(false);
     };
@@ -46,13 +58,16 @@ export default function App() {
           <Text style={styles.label}>Latest: {latestVersion}</Text>
           <Text style={styles.label}>Store URL: {storeUrl}</Text>
 
-          {updateAvailable && storeUrl && (
+          {updateLevel && storeUrl && (
             <TouchableOpacity onPress={() => Linking.openURL(storeUrl)}>
-              <Text style={styles.updateText}>Update available — tap to open store</Text>
+              <Text style={styles.updateText}>
+                {updateLevel === "major" ? "Major" : updateLevel === "minor" ? "Minor" : "Patch"} update available — tap
+                to open store
+              </Text>
             </TouchableOpacity>
           )}
 
-          {!updateAvailable && <Text style={styles.upToDate}>App is up to date</Text>}
+          {!updateLevel && <Text style={styles.upToDate}>App is up to date</Text>}
         </>
       )}
 

package/src/index.ts

@@ -1,4 +1,6 @@
 import { NitroModules } from "react-native-nitro-modules";
+import type { UpdateLevel } from "./semver";
+import { compareVersions, isNewerVersion } from "./semver";
 import type { VersionCheck as VersionCheckType } from "./specs/Version.nitro";
 
 const VersionCheck = NitroModules.createHybridObject<VersionCheckType>("VersionCheck");
@@ -78,16 +80,28 @@ export const getLatestVersion = () => VersionCheck.getLatestVersion();
 /**
  * Checks whether an app update is available.
  *
- * Compares the current version against the latest store version.
+ * Uses semantic version comparison. By default checks for any version
+ * increase, but you can filter by granularity:
+ *
+ * - `"major"` — only returns `true` for major bumps (1.x → 2.x)
+ * - `"minor"` — returns `true` for major or minor bumps
+ * - `"patch"` — returns `true` for any version increase (default)
  *
  * @example
  * ```ts
  * if (await needsUpdate()) {
  *   const url = await getStoreUrl();
  *   Linking.openURL(url);
  * }
+ *
+ * // Only prompt for major updates
+ * const majorUpdate = await needsUpdate({ level: "major" });
  * ```
  */
-export const needsUpdate = () => VersionCheck.needsUpdate();
+export const needsUpdate = async (options?: { level?: UpdateLevel }): Promise<boolean> => {
+  const latest = await VersionCheck.getLatestVersion();
+  return isNewerVersion(VersionCheck.version, latest, options?.level ?? "patch");
+};
 
-export { VersionCheck };
+export { compareVersions, VersionCheck };
+export type { UpdateLevel };

package/src/semver.ts

@@ -0,0 +1,54 @@
+export type UpdateLevel = "major" | "minor" | "patch";
+
+type SemVer = [major: number, minor: number, patch: number];
+
+function parseVersion(version: string): SemVer {
+  const parts = version.split(".");
+  return [Number(parts[0]) || 0, Number(parts[1]) || 0, Number(parts[2]) || 0];
+}
+
+/**
+ * Compares two version strings.
+ *
+ * @returns `-1` if `v1 < v2`, `0` if equal, `1` if `v1 > v2`
+ *
+ * @example
+ * ```ts
+ * compareVersions("1.2.0", "1.3.0") // -1
+ * compareVersions("2.0.0", "1.9.9") //  1
+ * compareVersions("1.0.0", "1.0.0") //  0
+ * ```
+ */
+export function compareVersions(v1: string, v2: string): -1 | 0 | 1 {
+  const a = parseVersion(v1);
+  const b = parseVersion(v2);
+
+  for (let i = 0; i < 3; i++) {
+    if (a[i]! > b[i]!) return 1;
+    if (a[i]! < b[i]!) return -1;
+  }
+
+  return 0;
+}
+
+/**
+ * Checks whether `latest` is newer than `current` at the given granularity.
+ *
+ * - `"major"` — only returns `true` for major bumps (1.x → 2.x)
+ * - `"minor"` — returns `true` for major or minor bumps
+ * - `"patch"` — returns `true` for any version increase (default)
+ */
+export function isNewerVersion(current: string, latest: string, level: UpdateLevel = "patch"): boolean {
+  const [curMajor, curMinor, curPatch] = parseVersion(current);
+  const [latMajor, latMinor, latPatch] = parseVersion(latest);
+
+  if (latMajor > curMajor) return true;
+  if (latMajor < curMajor) return false;
+  if (level === "major") return false;
+
+  if (latMinor > curMinor) return true;
+  if (latMinor < curMinor) return false;
+  if (level === "minor") return false;
+
+  return latPatch > curPatch;
+}