Enhance SecurityDemo with capability info and store tracking

Added display of device security capabilities (biometric, strongbox, recommended level) and an explanation of storage selection logic. The UI now also shows which store is expected to be used for each operation, improving transparency for users testing secure storage behavior.

Author: mCodex

example/src/components/SecurityDemo.tsx

@@ -1,11 +1,53 @@
-import React, { useState } from 'react';
-import { View, Text, StyleSheet, TouchableOpacity, Alert } from 'react-native';
-import { setItem, getItem, removeItem } from 'react-native-sensitive-info';
+import React, { useEffect, useMemo, useState } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  Alert,
+  Platform,
+} from 'react-native';
+import {
+  setItem,
+  getItem,
+  removeItem,
+  getSecurityCapabilities,
+} from 'react-native-sensitive-info';
+
+type StoreKind = 'standard' | 'biometric' | 'strongbox' | '—';
 
 export const SecurityDemo: React.FC = () => {
   const [status, setStatus] = useState<string>('Idle');
   const [value, setValue] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [usedStore, setUsedStore] = useState<StoreKind>('—');
+  const [caps, setCaps] = useState({
+    biometric: false,
+    strongbox: false,
+    recommendedLevel: 'standard' as 'standard' | 'biometric' | 'strongbox',
+  });
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const c = await getSecurityCapabilities();
+        setCaps(c);
+      } catch {
+        // keep defaults
+      }
+    })();
+  }, []);
+
+  // Auto store uses standard by default
+  const expectedAutoStore: StoreKind = 'standard';
+  const expectedBiometricStore = useMemo<Exclude<StoreKind, '—'>>(() => {
+    if (caps.biometric) return 'biometric';
+
+    // On Android, our implementation falls back to StrongBox if available
+    if (Platform.OS === 'android' && caps.strongbox) return 'strongbox';
+    // On iOS/macOS, biometric falls back to standard
+    return 'standard';
+  }, [caps.biometric, caps.strongbox]);
 
   const withUi = async (label: string, fn: () => Promise<void>) => {
     try {
@@ -34,6 +76,7 @@ export const SecurityDemo: React.FC = () => {
           disabled={isLoading}
           onPress={() =>
             withUi('Storing (auto)', async () => {
+              setUsedStore(expectedAutoStore);
               await setItem('demo:key', 'hello-world');
               setStatus('Stored');
             })
@@ -47,6 +90,7 @@ export const SecurityDemo: React.FC = () => {
           disabled={isLoading}
           onPress={() =>
             withUi('Reading (auto)', async () => {
+              setUsedStore(expectedAutoStore);
               const v = await getItem('demo:key');
               setValue(v);
               setStatus(`Read: ${v ?? 'null'}`);
@@ -63,6 +107,7 @@ export const SecurityDemo: React.FC = () => {
           disabled={isLoading}
           onPress={() =>
             withUi('Store (biometric)', async () => {
+              setUsedStore(expectedBiometricStore);
               await setItem('demo:bio', 'biometric-secret', {
                 securityLevel: 'biometric',
                 biometricOptions: {
@@ -84,6 +129,7 @@ export const SecurityDemo: React.FC = () => {
           disabled={isLoading}
           onPress={() =>
             withUi('Read (biometric)', async () => {
+              setUsedStore(expectedBiometricStore);
               const v = await getItem('demo:bio', {
                 securityLevel: 'biometric',
                 biometricOptions: {
@@ -123,6 +169,37 @@ export const SecurityDemo: React.FC = () => {
         <Text style={styles.statusLabel}>Status</Text>
         <Text style={styles.statusText}>{status}</Text>
         <Text style={styles.statusSub}>Value: {value ?? '—'}</Text>
+        <Text style={styles.statusSub}>Expected store used: {usedStore}</Text>
+      </View>
+
+      <View style={styles.infoBox}>
+        <Text style={styles.infoTitle}>Device capabilities</Text>
+        <Text style={styles.infoText}>
+          • Biometric: {caps.biometric ? 'Yes' : 'No'} | StrongBox/Secure
+          Enclave: {caps.strongbox ? 'Yes' : 'No'}
+        </Text>
+        <Text style={styles.infoText}>
+          • Recommended level: {caps.recommendedLevel}
+        </Text>
+
+        <View style={styles.spacer} />
+        <Text style={styles.infoTitle}>How storage is chosen</Text>
+        <Text style={styles.infoText}>
+          • If you don't pass a securityLevel, data is stored with the standard
+          keychain/keystore.
+        </Text>
+        <Text style={styles.infoText}>
+          • When requesting biometric/strongbox, the library attempts that
+          level.
+        </Text>
+        <Text style={styles.infoText}>
+          • If unavailable, it falls back to what's available.
+        </Text>
+        <Text style={styles.infoText}>
+          • Actual fallback behavior may differ between iOS and Android. The
+          "Expected store used" value above is based on detected capabilities
+          and may differ from the exact platform behavior.
+        </Text>
       </View>
     </View>
   );
@@ -158,4 +235,20 @@ const styles = StyleSheet.create({
   statusLabel: { fontSize: 12, color: '#6B7280', marginBottom: 4 },
   statusText: { fontSize: 14, color: '#111' },
   statusSub: { fontSize: 12, color: '#6B7280', marginTop: 2 },
+  infoBox: {
+    marginTop: 16,
+    padding: 12,
+    borderRadius: 12,
+    backgroundColor: '#F3F4F6',
+    borderWidth: 1,
+    borderColor: '#e5e7eb',
+  },
+  infoTitle: {
+    fontSize: 14,
+    fontWeight: '700',
+    color: '#111',
+    marginBottom: 6,
+  },
+  infoText: { fontSize: 12, color: '#111', lineHeight: 18 },
+  spacer: { height: 8 },
 });