Grey out unavailable access-control options and auto-fallback in example; update README and deps

- Example: add isOptionAvailable() to project live device capability checks
- Prevent selecting unavailable access controls, show "Unavailable on this device" note
- Auto-select strongest available fallback when current selection becomes unsupported
- UI: add info banner and disabled styles; improve accessibility state and press handling
- README: clarify "Class 3 / StrongBox" wording, describe access-control selector behaviour, remove runtime requirements blurb
- Bump example/root dev deps and react-native/react-native-nitro-modules versions and refresh yarn.lock

Author: mCodex

README.md

@@ -34,7 +34,7 @@ Modern secure storage for React Native, powered by Nitro Modules. Version 6 ship
 ## 🚀 Highlights
 
 - Headless Nitro hybrid object with a simple Promise-based API (`setItem`, `getItem`, `hasItem`, `getAllItems`, `clearService`).
-- Automatic security negotiation: prefers Secure Enclave (iOS) or StrongBox/biometric-protected keys (Android) with graceful fallbacks.
+- Automatic security negotiation: locks onto Secure Enclave (iOS) or Class 3 / StrongBox biometrics (Android) with graceful fallbacks when hardware is limited.
 - Unified metadata reporting (security level, backend, access control, timestamp) for every stored secret.
 - Friendly example app showcasing prompts, metadata inspection, and per-platform capability detection.
 - First-class TypeScript definitions and tree-shakeable distribution via `react-native-builder-bob`.
@@ -50,14 +50,6 @@ Modern secure storage for React Native, powered by Nitro Modules. Version 6 ship
 | Android | API 23 (Marshmallow) | StrongBox detection requires API 28+; biometrics fall back to device credential when unavailable. |
 | Windows | ❌ | Removed in v6. Earlier versions may still work but are no longer maintained. |
 
-**Runtime requirements**
-- React Native `0.82` or newer (Nitro Modules baseline).
-- Node.js `18` or newer.
-- `react-native-nitro-modules` `>=0.30.0`.
-
-> [!TIP]
-> Pair this module with [`react-native-quick-crypto`](https://github.com/mCodex/react-native-quick-crypto) when you need high-performance hashing alongside secure storage.
-
 ## ⚙️ Installation
 
 ```bash
@@ -193,6 +185,9 @@ Always validate security behavior on the physical devices you ship to customers.
 
 Explore the full feature set with the bundled example app. It showcases capability detection, metadata inspection, and error surface normalization for every API call.
 
+- The access-control selector now projects live device capabilities, greying out policies that require unavailable hardware and auto-picking the strongest viable guard.
+- Android Class 3 biometrics are applied automatically—no more manual toggle—while older devices fall back to the most secure authenticator they expose.
+
 > [!TIP]
 > Prefer Expo? The same Nitro module works inside bare Expo projects—just install via `expo install` and run the commands below from `example/`.
 

example/App.tsx

@@ -208,6 +208,28 @@ function App(): React.JSX.Element {
   );
   const [pending, setPending] = useState(false);
 
+  const isOptionAvailable = useCallback(
+    (value: AccessControl) => {
+      if (!availability) {
+        return true;
+      }
+
+      switch (value) {
+        case 'secureEnclaveBiometry':
+          return availability.secureEnclave || availability.strongBox;
+        case 'biometryCurrentSet':
+        case 'biometryAny':
+          return availability.biometry;
+        case 'devicePasscode':
+          return availability.deviceCredential;
+        case 'none':
+        default:
+          return true;
+      }
+    },
+    [availability],
+  );
+
   const normalizedService = useMemo(() => {
     const trimmed = service.trim();
     return trimmed.length > 0 ? trimmed : DEFAULT_SERVICE;
@@ -280,6 +302,24 @@ function App(): React.JSX.Element {
     void refreshItems();
   }, [refreshAvailability, refreshItems]);
 
+  useEffect(() => {
+    if (!availability) {
+      return;
+    }
+
+    if (isOptionAvailable(selectedAccessControl)) {
+      return;
+    }
+
+    const fallback = ACCESS_CONTROL_OPTIONS.find(option =>
+      isOptionAvailable(option.value),
+    );
+
+    if (fallback) {
+      setSelectedAccessControl(fallback.value);
+    }
+  }, [availability, isOptionAvailable, selectedAccessControl]);
+
   const execute = useCallback(
     async (task: () => Promise<void>) => {
       if (pending) {
@@ -504,32 +544,56 @@ function App(): React.JSX.Element {
           title="Security & authentication"
           subtitle="Tune access control, prompts, and cross-platform behaviour"
         >
+          <Text style={styles.infoNote}>
+            The native layer automatically upgrades to the strongest guard this
+            device supports. Options shown in grey are unavailable on the
+            current hardware.
+          </Text>
           <View style={styles.accessOptionsContainer}>
             {ACCESS_CONTROL_OPTIONS.map(option => {
               const selected = option.value === selectedAccessControl;
+              const available = isOptionAvailable(option.value);
+              const disabled = !available;
               return (
                 <Pressable
                   key={option.value}
                   accessibilityRole="radio"
-                  accessibilityState={{ selected }}
-                  onPress={() => setSelectedAccessControl(option.value)}
+                  accessibilityState={{ selected, disabled }}
+                  onPress={() => {
+                    if (!available) {
+                      return;
+                    }
+                    setSelectedAccessControl(option.value);
+                  }}
                   style={({ pressed }) => [
                     styles.accessOption,
                     selected && styles.accessOptionSelected,
-                    pressed && styles.accessOptionPressed,
+                    pressed && !disabled && styles.accessOptionPressed,
+                    disabled && styles.accessOptionDisabled,
                   ]}
                 >
                   <Text
                     style={[
                       styles.accessOptionLabel,
                       selected && styles.accessOptionLabelSelected,
+                      disabled && styles.accessOptionLabelDisabled,
                     ]}
                   >
                     {option.label}
                   </Text>
-                  <Text style={styles.accessOptionDescription}>
+                  <Text
+                    style={[
+                      styles.accessOptionDescription,
+                      disabled && styles.accessOptionDescriptionDisabled,
+                    ]}
+                  >
                     {option.description}
                   </Text>
+                  {disabled ? (
+                    <Text style={styles.accessOptionUnavailable}>
+                      Unavailable on this device
+                    </Text>
+                  ) : null}
                 </Pressable>
               );
             })}
@@ -774,6 +838,18 @@ const styles = StyleSheet.create({
     color: '#4b5563',
     fontSize: 15,
   },
+  infoNote: {
+    color: '#1e3a8a',
+    fontSize: 13,
+    lineHeight: 18,
+    backgroundColor: '#e0f2fe',
+    borderRadius: 14,
+    borderWidth: 1,
+    borderColor: '#bfdbfe',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    marginBottom: 16,
+  },
   field: {
     marginBottom: 20,
   },
@@ -823,6 +899,10 @@ const styles = StyleSheet.create({
   accessOptionPressed: {
     opacity: 0.9,
   },
+  accessOptionDisabled: {
+    borderColor: '#e5e7eb',
+    backgroundColor: '#f1f5f9',
+  },
   accessOptionLabel: {
     color: '#1f2937',
     fontSize: 15,
@@ -831,12 +911,25 @@ const styles = StyleSheet.create({
   accessOptionLabelSelected: {
     color: '#1d4ed8',
   },
+  accessOptionLabelDisabled: {
+    color: '#9ca3af',
+  },
   accessOptionDescription: {
     color: '#6b7280',
     fontSize: 13,
     lineHeight: 19,
     marginTop: 6,
   },
+  accessOptionDescriptionDisabled: {
+    color: '#9ca3af',
+  },
+  accessOptionUnavailable: {
+    color: '#ef4444',
+    fontSize: 12,
+    fontWeight: '600',
+    marginTop: 8,
+    letterSpacing: 0.2,
+  },
   toggleCard: {
     flexDirection: 'row',
     alignItems: 'center',

example/package.json

@@ -13,13 +13,13 @@
   "dependencies": {
     "@react-native/new-app-screen": "0.82.1",
     "react": "19.1.1",
-    "react-native": "0.82.0",
-    "react-native-nitro-modules": "0.31.1",
+    "react-native": "0.82.1",
+    "react-native-nitro-modules": "0.31.2",
     "react-native-safe-area-context": "^5.6.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.4",
-    "@babel/preset-env": "^7.28.3",
+    "@babel/core": "^7.28.5",
+    "@babel/preset-env": "^7.28.5",
     "@babel/runtime": "^7.28.4",
     "@react-native-community/cli": "20.0.2",
     "@react-native-community/cli-platform-android": "20.0.2",

package.json

@@ -53,14 +53,14 @@
   },
   "devDependencies": {
     "@eslint/compat": "^1.4.0",
-    "@eslint/js": "^9.37.0",
+    "@eslint/js": "^9.38.0",
     "@jamesacarr/eslint-formatter-github-actions": "^0.2.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@types/jest": "^30.0.0",
-    "@types/react": "19.1.x",
+    "@types/react": "19.2.x",
     "conventional-changelog-conventionalcommits": "^9.1.0",
-    "eslint": "^9.37.0",
+    "eslint": "^9.38.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^10.1.8",
     "eslint-import-resolver-typescript": "^4.4.4",
@@ -69,18 +69,18 @@
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^7.0.0",
+    "eslint-plugin-react-hooks": "^7.0.1",
     "globals": "^16.4.0",
     "jiti": "^2.6.1",
-    "nitrogen": "0.31.1",
+    "nitrogen": "0.31.2",
     "prettier": "^3.6.2",
     "react": "19.1.1",
     "react-native": "0.82",
     "react-native-builder-bob": "^0.40.13",
-    "react-native-nitro-modules": "0.31.1",
-    "semantic-release": "^25.0.0",
+    "react-native-nitro-modules": "0.31.2",
+    "semantic-release": "^25.0.1",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.46.1"
+    "typescript-eslint": "^8.46.2"
   },
   "peerDependencies": {
     "react": "*",