@reown/appkit-react-native 0.0.0-chore-spring-effect-20250909214820 → 0.0.0-chore-added-import-20251002170458

package/src/connectors/WalletConnectConnector.ts

@@ -1,5 +1,5 @@
 import { WcController } from '@reown/appkit-core-react-native';
-import { UniversalProvider, type IUniversalProvider } from '@walletconnect/universal-provider';
+import UniversalProvider from '@walletconnect/universal-provider';
 import {
   WalletConnector,
   type AppKitNetwork,
@@ -14,7 +14,7 @@ import {
   type ConnectionProperties,
   type RequestArguments
 } from '@reown/appkit-common-react-native';
-import { getDidAddress, getDidChainId, SIWEController } from '@reown/appkit-siwe-react-native';
+import { SIWXUtil } from '../utils/SIWXUtil';
 
 interface WalletConnectConnectorConfig {
   projectId: string;
@@ -42,7 +42,7 @@ export class WalletConnectConnector extends WalletConnector {
   }
 
   override async restoreSession(): Promise<boolean> {
-    const provider = this.getProvider() as IUniversalProvider;
+    const provider = this.getProvider() as UniversalProvider;
     if (!provider) {
       return false;
     }
@@ -67,9 +67,15 @@ export class WalletConnectConnector extends WalletConnector {
         this.wallet = {
           ...metadata,
           name: metadata.name,
-          icon: metadata.icons?.[0]
+          icon: metadata.icons?.[0],
+          type: 'walletconnect'
         };
       }
+    } else {
+      this.wallet = {
+        name: 'Unknown Wallet',
+        type: 'walletconnect'
+      };
     }
 
     return true;
@@ -81,7 +87,7 @@ export class WalletConnectConnector extends WalletConnector {
   }: {
     projectId: string;
     metadata: Metadata;
-  }): Promise<IUniversalProvider> {
+  }): Promise<UniversalProvider> {
     if (!this.provider) {
       this.provider = (await UniversalProvider.init({
         projectId,
@@ -90,82 +96,36 @@ export class WalletConnectConnector extends WalletConnector {
       })) as Provider;
     }
 
-    return this.provider as IUniversalProvider;
+    return this.provider as UniversalProvider;
   }
 
   override async connect(opts: ConnectOptions) {
-    const { siweConfig, namespaces, defaultNetwork, universalLink } = opts;
+    const { namespaces, defaultNetwork, universalLink } = opts;
     function onUri(uri: string) {
       WcController.setWcUri(uri);
     }
 
-    const provider = this.getProvider() as IUniversalProvider;
+    const provider = this.getProvider() as UniversalProvider;
 
     // @ts-ignore
     provider.on('display_uri', onUri);
 
-    let session: IUniversalProvider['session'];
+    let session: UniversalProvider['session'];
 
     // SIWE
     const isEVMOnly = Object.keys(namespaces ?? {}).length === 1 && namespaces?.['eip155'];
-    const params = await siweConfig?.getMessageParams?.();
-    if (siweConfig?.options?.enabled && params && Object.keys(params).length > 0 && isEVMOnly) {
+
+    if (isEVMOnly && SIWXUtil.getSIWX()) {
       // 1CA is only supported on EVM
 
-      // @ts-ignore
-      const result = await provider.authenticate(
-        {
-          ...params,
-          nonce: await siweConfig.getNonce(),
-          methods: namespaces?.['eip155']?.methods,
-          chains: params.chains
-        },
+      session = await SIWXUtil.universalProviderAuthenticate({
+        universalProvider: this.provider as UniversalProvider,
+        chains: namespaces?.['eip155']?.chains ?? [],
+        methods: namespaces?.['eip155']?.methods ?? [],
         universalLink
-      );
-
-      // Auths is an array of signed CACAO objects https://github.com/ChainAgnostic/CAIPs/blob/main/CAIPs/caip-74.md
-      const signedCacao = result?.auths?.[0];
-      if (signedCacao) {
-        const { p, s } = signedCacao;
-        const chainId = getDidChainId(p.iss);
-        const address = getDidAddress(p.iss);
-
-        try {
-          // Kicks off verifyMessage and populates external states
-          const message = provider?.client?.formatAuthMessage({
-            request: p,
-            iss: p.iss
-          })!;
-
-          await SIWEController.verifyMessage({
-            message,
-            signature: s.s,
-            cacao: signedCacao
-          });
-
-          if (address && chainId) {
-            const siweSession = {
-              address,
-              chainId: parseInt(chainId, 10)
-            };
-
-            SIWEController.setSession(siweSession);
-            SIWEController.onSignIn?.(siweSession);
-          }
-        } catch (error) {
-          // eslint-disable-next-line no-console
-          console.error('Error verifying message', error);
-          // eslint-disable-next-line no-console
-          await provider.disconnect().catch(console.error);
-          // eslint-disable-next-line no-console
-          await SIWEController.signOut().catch(console.error);
-          throw error;
-        }
-      }
-      session = result?.session;
+      });
     } else {
-      session = await (this.provider as IUniversalProvider).connect({
-        namespaces: {},
+      session = await (this.provider as UniversalProvider).connect({
         optionalNamespaces: namespaces
       });
     }
@@ -175,14 +135,18 @@ export class WalletConnectConnector extends WalletConnector {
       this.wallet = {
         ...metadata,
         name: metadata?.name,
-        icon: metadata?.icons?.[0]
+        icon: metadata?.icons?.[0],
+        type: 'walletconnect'
       };
     } else {
-      this.wallet = undefined;
+      this.wallet = {
+        name: 'Unknown Wallet',
+        type: 'walletconnect'
+      };
     }
 
     if (defaultNetwork?.caipNetworkId) {
-      (this.provider as IUniversalProvider).setDefaultChain(defaultNetwork.caipNetworkId);
+      (this.provider as UniversalProvider).setDefaultChain(defaultNetwork.caipNetworkId);
     }
 
     if (session?.sessionProperties) {
@@ -229,7 +193,7 @@ export class WalletConnectConnector extends WalletConnector {
 
   override getNamespaces(): Namespaces {
     const namespaces =
-      ((this.provider as IUniversalProvider)?.session?.namespaces as Namespaces) ?? {};
+      ((this.provider as UniversalProvider)?.session?.namespaces as Namespaces) ?? {};
     this.namespaces = namespaces;
 
     return namespaces;
@@ -244,7 +208,7 @@ export class WalletConnectConnector extends WalletConnector {
 
     let caipNetworkId = network.caipNetworkId ?? `eip155:${network.id}`;
 
-    (this.provider as IUniversalProvider).setDefaultChain(caipNetworkId);
+    (this.provider as UniversalProvider).setDefaultChain(caipNetworkId);
 
     return Promise.resolve();
   }
@@ -259,7 +223,7 @@ export class WalletConnectConnector extends WalletConnector {
       return undefined;
     }
 
-    const chainId = (this.provider as IUniversalProvider).rpcProviders[
+    const chainId = (this.provider as UniversalProvider).rpcProviders[
       namespace
     ]?.getDefaultChain?.();
 

package/src/hooks/useAccount.ts

@@ -1,3 +1,5 @@
+/* eslint-disable valtio/state-snapshot-rule */
+import { useMemo } from 'react';
 import { useSnapshot } from 'valtio';
 import { ConnectionsController, CoreHelperUtil } from '@reown/appkit-core-react-native';
 import { useAppKit } from './useAppKit';
@@ -12,10 +14,13 @@ export function useAccount() {
     networks
   } = useSnapshot(ConnectionsController.state);
 
-  const activeChain = connection?.caipNetwork
-    ? // eslint-disable-next-line valtio/state-snapshot-rule
-      networks.find(network => network.caipNetworkId === connection?.caipNetwork)
-    : undefined;
+  const activeChain = useMemo(
+    () =>
+      connection?.caipNetwork
+        ? networks.find(network => network.caipNetworkId === connection?.caipNetwork)
+        : undefined,
+    [connection?.caipNetwork, networks]
+  );
 
   return {
     address: CoreHelperUtil.getPlainAddress(address),

package/src/hooks/useAppKit.ts

@@ -1,6 +1,5 @@
-import { useContext } from 'react';
-import { useSnapshot } from 'valtio';
-import { ModalController } from '@reown/appkit-core-react-native';
+import { useContext, useMemo } from 'react';
+import type { ChainNamespace } from '@reown/appkit-common-react-native';
 
 import type { AppKit } from '../AppKit';
 import { AppKitContext } from '../AppKitContext';
@@ -8,28 +7,35 @@ import { AppKitContext } from '../AppKitContext';
 interface UseAppKitReturn {
   open: AppKit['open'];
   close: AppKit['close'];
-  disconnect: (namespace?: string) => void;
+  disconnect: (namespace?: ChainNamespace) => void;
   switchNetwork: AppKit['switchNetwork'];
-  isOpen: boolean;
 }
 
 export const useAppKit = (): UseAppKitReturn => {
   const context = useContext(AppKitContext);
-  const { open } = useSnapshot(ModalController.state);
 
   if (context === undefined) {
     throw new Error('useAppKit must be used within an AppKitProvider');
   }
+
   if (!context.appKit) {
     // This might happen if the provider is rendered before AppKit is initialized
     throw new Error('AppKit instance is not yet available in context.');
   }
 
-  return {
-    open: context.appKit.open.bind(context.appKit),
-    close: context.appKit.close.bind(context.appKit),
-    disconnect: (namespace?: string) => context.appKit?.disconnect.bind(context.appKit)(namespace),
-    switchNetwork: context.appKit.switchNetwork.bind(context.appKit),
-    isOpen: open
-  };
+  const stableFunctions = useMemo(() => {
+    if (!context.appKit) {
+      throw new Error('AppKit instance is not available');
+    }
+
+    return {
+      open: context.appKit.open.bind(context.appKit),
+      close: context.appKit.close.bind(context.appKit),
+      disconnect: (namespace?: ChainNamespace) =>
+        context.appKit!.disconnect.bind(context.appKit!)(namespace),
+      switchNetwork: context.appKit.switchNetwork.bind(context.appKit)
+    };
+  }, [context.appKit]);
+
+  return stableFunctions;
 };

package/src/hooks/useAppKitLogs.ts

@@ -0,0 +1,129 @@
+import { useContext, useMemo } from 'react';
+import { useSnapshot } from 'valtio';
+import { LogController, type LogEntry, type LogLevel } from '@reown/appkit-core-react-native';
+import { AppKitContext } from '../AppKitContext';
+
+export interface UseAppKitLogsReturn {
+  /**
+   * All logs from AppKit
+   */
+  logs: LogEntry[];
+
+  /**
+   * Get logs filtered by level
+   */
+  getLogsByLevel: (level: LogLevel) => LogEntry[];
+
+  /**
+   * Get recent logs (default: 100)
+   */
+  getRecentLogs: (count?: number) => LogEntry[];
+
+  /**
+   * Export all logs as JSON string
+   */
+  exportLogs: () => string;
+
+  /**
+   * Get logging statistics by level
+   */
+  getLogsStats: () => Record<LogLevel, number>;
+
+  /**
+   * Clear all logs
+   */
+  clearLogs: () => void;
+
+  /**
+   * Convenience getters for different log levels (regular arrays, safe for console.log)
+   */
+  errorLogs: LogEntry[];
+  warningLogs: LogEntry[];
+  infoLogs: LogEntry[];
+  debugLogs: LogEntry[];
+}
+
+/**
+ * React hook for accessing AppKit logs
+ *
+ * This hook provides reactive access to AppKit's internal logging system.
+ * It automatically updates when new logs are added or when logs are cleaned up.
+ *
+ * @example
+ * ```typescript
+ * function MyComponent() {
+ *   const { logs, errorLogs, exportLogs, clearLogs } = useAppKitLogs();
+ *
+ *   return (
+ *     <View>
+ *       <Text>Total logs: {logs.length}</Text>
+ *       <Text>Error logs: {errorLogs.length}</Text>
+ *       <Button onPress={clearLogs} title="Clear Logs" />
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+export const useAppKitLogs = (): UseAppKitLogsReturn => {
+  const context = useContext(AppKitContext);
+
+  if (context === undefined) {
+    throw new Error('useAppKitLogs must be used within an AppKitProvider');
+  }
+
+  if (!context.appKit) {
+    throw new Error('AppKit instance is not yet available in context.');
+  }
+
+  const { logs } = useSnapshot(LogController.state);
+
+  // Memoized functions that don't need to change on every render
+  const stableFunctions = useMemo(
+    () => ({
+      getLogsByLevel: (level: LogLevel) => LogController.getLogsByLevel(level),
+      getRecentLogs: (count?: number) => LogController.getRecentLogs(count),
+      exportLogs: () => LogController.exportLogs(),
+      getLogsStats: () => LogController.getLogsStats(),
+      clearLogs: () => LogController.clearLogs()
+    }),
+    []
+  );
+
+  const regularArrays = useMemo(() => {
+    const allLogs = [...logs]; // Convert proxy to regular array
+    const errorLogs: LogEntry[] = [];
+    const warningLogs: LogEntry[] = [];
+    const infoLogs: LogEntry[] = [];
+    const debugLogs: LogEntry[] = [];
+
+    for (const log of allLogs) {
+      switch (log.level) {
+        case 'error':
+          errorLogs.push(log);
+          break;
+        case 'warn':
+          warningLogs.push(log);
+          break;
+        case 'info':
+          infoLogs.push(log);
+          break;
+        case 'debug':
+          debugLogs.push(log);
+          break;
+      }
+    }
+
+    return {
+      logs: allLogs,
+      errorLogs,
+      warningLogs,
+      infoLogs,
+      debugLogs
+    };
+  }, [logs]);
+
+  return {
+    ...regularArrays,
+    ...stableFunctions
+  };
+};

package/src/hooks/useAppKitState.ts

@@ -0,0 +1,26 @@
+/* eslint-disable valtio/state-snapshot-rule */
+import { useMemo } from 'react';
+import { useSnapshot } from 'valtio';
+import { ConnectionsController, ModalController } from '@reown/appkit-core-react-native';
+import { useAppKit } from './useAppKit';
+
+export function useAppKitState() {
+  useAppKit(); // Use the hook for checks
+  const { activeAddress: address, connection, networks } = useSnapshot(ConnectionsController.state);
+  const { open, loading } = useSnapshot(ModalController.state);
+
+  const activeChain = useMemo(
+    () =>
+      connection?.caipNetwork
+        ? networks.find(network => network.caipNetworkId === connection?.caipNetwork)
+        : undefined,
+    [connection?.caipNetwork, networks]
+  );
+
+  return {
+    isOpen: open,
+    isLoading: loading,
+    isConnected: !!address,
+    chain: activeChain
+  };
+}

package/src/hooks/useProvider.ts

@@ -1,3 +1,5 @@
+/* eslint-disable valtio/state-snapshot-rule */
+import { useMemo } from 'react';
 import { useSnapshot } from 'valtio';
 import { ConnectionsController } from '@reown/appkit-core-react-native';
 import type { Provider, ChainNamespace } from '@reown/appkit-common-react-native';
@@ -37,10 +39,14 @@ interface ProviderResult {
 export function useProvider(): ProviderResult {
   const { connection } = useSnapshot(ConnectionsController.state);
 
-  if (!connection) return { provider: undefined, providerType: undefined };
+  const returnValue = useMemo(() => {
+    if (!connection) return { provider: undefined, providerType: undefined };
 
-  return {
-    provider: connection.adapter.getProvider(),
-    providerType: connection.adapter.getSupportedNamespace()
-  };
+    return {
+      provider: connection.adapter.getProvider(),
+      providerType: connection.adapter.getSupportedNamespace()
+    };
+  }, [connection]);
+
+  return returnValue;
 }

package/src/hooks/useWalletInfo.ts

@@ -1,10 +1,13 @@
+import { useMemo } from 'react';
 import { useSnapshot } from 'valtio';
 import { ConnectionsController } from '@reown/appkit-core-react-native';
 import { useAppKit } from './useAppKit';
 
 export function useWalletInfo() {
   useAppKit(); // Use the hook for checks
-  const { walletInfo } = useSnapshot(ConnectionsController.state);
+  const { walletInfo: walletInfoSnapshot } = useSnapshot(ConnectionsController.state);
 
-  return { walletInfo };
+  const walletInfo = useMemo(() => ({ walletInfo: walletInfoSnapshot }), [walletInfoSnapshot]);
+
+  return walletInfo;
 }

package/src/index.ts

@@ -1,3 +1,5 @@
+import '@walletconnect/react-native-compat';
+
 /********** Components **********/
 export {
   AccountButton as AccountButton,
@@ -17,6 +19,13 @@ export { AppKit } from './modal/w3m-modal';
 /********** Types **********/
 export type * from '@reown/appkit-core-react-native';
 export type { AppKitNetwork, Storage } from '@reown/appkit-common-react-native';
+export type {
+  SIWXConfig,
+  SIWXMessage,
+  SIWXSession,
+  SIWXStorage,
+  SIWXVerifier
+} from '@reown/appkit-common-react-native';
 export type { AppKitConfig } from './types';
 
 /****** Hooks *******/
@@ -25,11 +34,16 @@ export { useProvider } from './hooks/useProvider';
 export { useAccount } from './hooks/useAccount';
 export { useWalletInfo } from './hooks/useWalletInfo';
 export { useAppKitEvents, useAppKitEventSubscription } from './hooks/useAppKitEvents';
+export { useAppKitState } from './hooks/useAppKitState';
+export { useAppKitLogs, type UseAppKitLogsReturn } from './hooks/useAppKitLogs';
 
 /********** Networks **********/
 export { solana, solanaDevnet, solanaTestnet } from '@reown/appkit-common-react-native';
 export { bitcoin, bitcoinTestnet } from '@reown/appkit-common-react-native';
 
+/********** SIWX **********/
+export { ReownAuthentication } from '@reown/appkit-core-react-native';
+
 /********** Main **********/
 export { createAppKit } from './AppKit';
 export { AppKitProvider } from './AppKitContext';

package/src/modal/w3m-modal/index.tsx

@@ -1,5 +1,6 @@
 import { useSnapshot } from 'valtio';
 import { useCallback, useEffect } from 'react';
+import { useColorScheme } from 'react-native';
 import { Card, Modal, ThemeProvider } from '@reown/appkit-ui-react-native';
 import {
   ApiController,
@@ -18,10 +19,11 @@ import { useInternalAppKit } from '../../AppKitContext';
 import styles from './styles';
 
 export function AppKit() {
+  const theme = useColorScheme();
   const { bottom, top } = useSafeAreaInsets();
   const { close } = useInternalAppKit();
   const { open } = useSnapshot(ModalController.state);
-  const { themeMode, themeVariables } = useSnapshot(ThemeController.state);
+  const { themeMode, themeVariables, defaultThemeMode } = useSnapshot(ThemeController.state);
   const { projectId } = useSnapshot(OptionsController.state);
 
   const handleBackPress = () => {
@@ -32,6 +34,12 @@ export function AppKit() {
     return handleModalClose();
   };
 
+  useEffect(() => {
+    if (theme && !defaultThemeMode) {
+      ThemeController.setThemeMode(theme);
+    }
+  }, [theme, defaultThemeMode]);
+
   const prefetch = useCallback(async () => {
     await ApiController.prefetch();
     EventsController.sendEvent({ type: 'track', event: 'MODAL_LOADED' });

package/src/modal/w3m-router/index.tsx

@@ -1,5 +1,5 @@
 import { useSnapshot } from 'valtio';
-import { useEffect, useLayoutEffect, useMemo } from 'react';
+import { useMemo } from 'react';
 import { RouterController } from '@reown/appkit-core-react-native';
 
 import { AccountDefaultView } from '../../views/w3m-account-default-view';
@@ -10,7 +10,7 @@ import { ConnectSocialsView } from '../../views/w3m-connect-socials-view';
 import { ConnectingView } from '../../views/w3m-connecting-view';
 import { ConnectingExternalView } from '../../views/w3m-connecting-external-view';
 import { ConnectingSocialView } from '../../views/w3m-connecting-social-view';
-import { ConnectingSiweView } from '../../views/w3m-connecting-siwe-view';
+import { SIWXSignMessageView } from '../../views/w3m-siwx-sign-view';
 import { GetWalletView } from '../../views/w3m-get-wallet-view';
 import { NetworksView } from '../../views/w3m-networks-view';
 import { NetworkSwitchView } from '../../views/w3m-network-switch-view';
@@ -31,8 +31,8 @@ import { WalletSendPreviewView } from '../../views/w3m-wallet-send-preview-view'
 import { WalletSendSelectTokenView } from '../../views/w3m-wallet-send-select-token-view';
 import { WhatIsANetworkView } from '../../views/w3m-what-is-a-network-view';
 import { WhatIsAWalletView } from '../../views/w3m-what-is-a-wallet-view';
-import { UiUtil } from '../../utils/UiUtil';
-import { useRouteTransition } from '../../hooks/useRouteTransition';
+// import { UiUtil } from '../../utils/UiUtil';
+// import { useRouteTransition } from '../../hooks/useRouteTransition';
 
 import { Animated } from 'react-native';
 import { useCustomDimensions } from '@reown/appkit-ui-react-native';
@@ -40,18 +40,15 @@ import { useCustomDimensions } from '@reown/appkit-ui-react-native';
 export function AppKitRouter() {
   const { view } = useSnapshot(RouterController.state);
   const { maxHeight } = useCustomDimensions();
-  const { animateTransition, getAnimatedStyle } = useRouteTransition({
-    duration: 300,
-    useNativeDriver: true
-  });
+  // const { animateTransition, getAnimatedStyle } = useRouteTransition();
 
-  useEffect(() => {
-    UiUtil.setRouteTransition(animateTransition);
-  }, [animateTransition]);
+  // useEffect(() => {
+  //   UiUtil.setRouteTransition(animateTransition);
+  // }, [animateTransition]);
 
-  useLayoutEffect(() => {
-    UiUtil.createViewTransition();
-  }, [view]);
+  // useEffect(() => {
+  //   UiUtil.createViewTransition();
+  // }, [view]);
 
   const ViewComponent = useMemo(() => {
     switch (view) {
@@ -67,11 +64,11 @@ export function AppKitRouter() {
         return ConnectSocialsView;
       case 'ConnectingExternal':
         return ConnectingExternalView;
-      case 'ConnectingSiwe':
-        return ConnectingSiweView;
+      case 'SIWXSignMessage':
+        return SIWXSignMessageView;
       case 'ConnectingSocial':
         return ConnectingSocialView;
-      case 'ConnectingWalletConnect':
+      case 'WalletConnect':
         return ConnectingView;
       case 'GetWallet':
         return GetWalletView;
@@ -119,7 +116,7 @@ export function AppKitRouter() {
   }, [view]);
 
   return (
-    <Animated.View style={[getAnimatedStyle(), { maxHeight }]}>
+    <Animated.View style={{ maxHeight }}>
       <ViewComponent />
     </Animated.View>
   );

package/src/partials/w3m-account-wallet-features/index.tsx

@@ -21,7 +21,7 @@ export function AccountWalletFeatures() {
   const { features, isOnRampEnabled } = useSnapshot(OptionsController.state);
   const { activeNetwork, balances, activeNamespace } = useSnapshot(ConnectionsController.state);
   const balance = CoreHelperUtil.calculateAndFormatBalance(balances as BalanceType[]);
-  const network = ConnectionsController.state.activeNetwork?.caipNetworkId || '';
+  const network = ConnectionsController.state.activeNetwork?.caipNetworkId;
   const isSmartAccount = ConnectionsController.state.accountType === 'smartAccount';
   const showSend =
     activeNamespace && ConstantsUtil.SEND_SUPPORTED_NAMESPACES.includes(activeNamespace);

package/src/partials/w3m-all-wallets-list/components/WalletItem.tsx

@@ -7,12 +7,21 @@ import { memo } from 'react';
 
 interface WalletItemProps {
   item: WcWallet;
+  displayIndex: number;
   imageHeaders?: Record<string, string>;
-  onItemPress: (wallet: WcWallet) => void;
+  onItemPress: (wallet: WcWallet, displayIndex: number) => void;
   style?: StyleProp<ViewStyle>;
+  testID?: string;
 }
 
-export function WalletItem({ item, imageHeaders, onItemPress, style }: WalletItemProps) {
+export function WalletItem({
+  item,
+  displayIndex,
+  imageHeaders,
+  onItemPress,
+  style,
+  testID
+}: WalletItemProps) {
   const { walletImages } = useSnapshot(AssetController.state);
   const isInstalled = ApiController.state.installed.find(wallet => wallet?.id === item?.id);
   const imageSrc = AssetUtil.getWalletImage(item, walletImages);
@@ -27,8 +36,9 @@ export function WalletItem({ item, imageHeaders, onItemPress, style }: WalletIte
       style={style}
       imageHeaders={imageHeaders}
       name={item?.name ?? 'Unknown'}
-      onPress={() => onItemPress(item)}
+      onPress={() => onItemPress(item, displayIndex)}
       installed={!!isInstalled}
+      testID={testID}
     />
   );
 }