INJIMOB-3246 Code coverage for Inji-Wallet repo increase above 5% (#2108)

* INJIMOB-3246 Code coverage for Inji-Wallet repo increase above 5%

Signed-off-by: Kaushik Gupta <kausgpt97@gmail.com>

* INJIMOB-3246: added snapshot tests and coverage increased to +4%

Signed-off-by: Kaushik Gupta <kausgpt97@gmail.com>

* removed duplicated lines

Signed-off-by: Kaushik Gupta <kausgpt97@gmail.com>

* Added updateCredentialInformation tests

Signed-off-by: Kaushik Gupta <kausgpt97@gmail.com>

* added code rabbit changes

Signed-off-by: Kaushik Gupta <kausgpt97@gmail.com>

* removed platform-specific tests without mocking

Signed-off-by: Kaushik Gupta <kausgpt97@gmail.com>

* standardize mocks in VcItemContainerProfileImage tests

Signed-off-by: Kaushik Gupta <kausgpt97@gmail.com>

---------

Signed-off-by: Kaushik Gupta <kausgpt97@gmail.com>

components/AccountInformation.test.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import {AccountInformation} from './AccountInformation';
+
+describe('AccountInformation Component', () => {
+  const defaultProps = {
+    email: 'test@example.com',
+    picture: 'https://example.com/avatar.jpg',
+  };
+
+  it('should match snapshot with email and picture', () => {
+    const {toJSON} = render(<AccountInformation {...defaultProps} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with different email', () => {
+    const {toJSON} = render(
+      <AccountInformation {...defaultProps} email="another@test.com" />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with different picture URL', () => {
+    const {toJSON} = render(
+      <AccountInformation
+        {...defaultProps}
+        picture="https://example.com/different-avatar.jpg"
+      />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with long email', () => {
+    const {toJSON} = render(
+      <AccountInformation
+        {...defaultProps}
+        email="very.long.email.address@example-domain.com"
+      />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

components/ActivityLogEvent.test.ts

@@ -19,7 +19,7 @@ describe('ActivityLog', () => {
 describe('getActionText', () => {
   let activityLog;
   let mockIl18nfn;
-  let wellknown = {
+  const wellknown = {
     credential_configurations_supported: {
       mockId: {
         display: [
@@ -67,6 +67,7 @@ describe('getActionText', () => {
     activityLog.getActionText(mockIl18nfn, wellknown);
     expect(mockIl18nfn).toHaveBeenCalledWith('mockType', {
       idType: 'fake VC',
+      vcStatus: '',
     });
     expect(mockIl18nfn).toHaveBeenCalledTimes(1);
     // TODO: assert the returned string
@@ -81,3 +82,79 @@ describe('getActionText', () => {
     expect(mockIl18nfn).toHaveBeenCalledTimes(1);
   });
 });
+
+describe('VCActivityLog.getLogFromObject', () => {
+  it('should create VCActivityLog instance from object', () => {
+    const mockData = {
+      id: 'test-id',
+      type: 'VC_ADDED',
+      timestamp: 1234567890,
+      deviceName: 'Test Device',
+    };
+
+    const log = VCActivityLog.getLogFromObject(mockData);
+
+    expect(log).toBeInstanceOf(VCActivityLog);
+    expect(log.id).toBe('test-id');
+    expect(log.type).toBe('VC_ADDED');
+    expect(log.timestamp).toBe(1234567890);
+    expect(log.deviceName).toBe('Test Device');
+  });
+
+  it('should create VCActivityLog from empty object', () => {
+    const log = VCActivityLog.getLogFromObject({});
+
+    expect(log).toBeInstanceOf(VCActivityLog);
+    expect(log.timestamp).toBeDefined();
+  });
+});
+
+describe('VCActivityLog.getActionLabel', () => {
+  it('should return formatted action label with device name and time', () => {
+    const mockLog = new VCActivityLog({
+      deviceName: 'iPhone 12',
+      timestamp: Date.now() - 60000, // 1 minute ago
+    });
+
+    const label = mockLog.getActionLabel('en');
+
+    expect(label).toContain('iPhone 12');
+    expect(label).toContain('·');
+    expect(label).toContain('ago');
+  });
+
+  it('should return only time when device name is empty', () => {
+    const mockLog = new VCActivityLog({
+      deviceName: '',
+      timestamp: Date.now() - 120000, // 2 minutes ago
+    });
+
+    const label = mockLog.getActionLabel('en');
+
+    expect(label).not.toContain('·');
+    expect(label).toContain('ago');
+  });
+
+  it('should filter out empty labels', () => {
+    const mockLog = new VCActivityLog({
+      deviceName: '   ', // whitespace only
+      timestamp: Date.now(),
+    });
+
+    const label = mockLog.getActionLabel('en');
+
+    expect(label).not.toContain('·');
+    expect(label).toBeTruthy();
+  });
+
+  it('should format time with device name in English locale', () => {
+    const mockLog = new VCActivityLog({
+      deviceName: 'Test Device',
+      timestamp: Date.now() - 300000, // 5 minutes ago
+    });
+
+    const labelEn = mockLog.getActionLabel('en');
+    expect(labelEn).toBeTruthy();
+    expect(labelEn).toContain('Test Device');
+  });
+});

components/ActivityLogText.test.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import {ActivityLogText} from './ActivityLogText';
+import {VCItemContainerFlowType} from '../shared/Utils';
+import {VCActivityLog} from './ActivityLogEvent';
+import {VPShareActivityLog} from './VPShareActivityLogEvent';
+
+// Mock TextItem
+jest.mock('./ui/TextItem', () => ({
+  TextItem: jest.fn(() => null),
+}));
+
+// Mock HistoryScreenController
+jest.mock('../screens/History/HistoryScreenController', () => ({
+  useHistoryTab: jest.fn(() => ({
+    getWellKnownIssuerMap: jest.fn(() => ({display: [{name: 'Test Issuer'}]})),
+  })),
+}));
+
+// Mock ActivityLogEvent
+jest.mock('./ActivityLogEvent', () => ({
+  VCActivityLog: {
+    getLogFromObject: jest.fn(obj => ({
+      ...obj,
+      getActionLabel: jest.fn(() => 'Shared'),
+      getActionText: jest.fn(() => 'Shared with Test Device'),
+    })),
+  },
+}));
+
+// Mock VPShareActivityLogEvent
+jest.mock('./VPShareActivityLogEvent', () => ({
+  VPShareActivityLog: {
+    getLogFromObject: jest.fn(obj => ({
+      ...obj,
+      getActionLabel: jest.fn(() => 'Verified'),
+      getActionText: jest.fn(() => 'Verified by Test Device'),
+    })),
+  },
+}));
+
+describe('ActivityLogText Component', () => {
+  const mockActivity = {
+    vcLabel: 'Test VC',
+    timestamp: new Date().toISOString(),
+    deviceName: 'Test Device',
+    vcIdType: 'NationalID',
+    flow: VCItemContainerFlowType.VC_SHARE,
+    issuer: 'test-issuer',
+  } as unknown as VCActivityLog;
+
+  it('should match snapshot with VC activity', () => {
+    const {toJSON} = render(<ActivityLogText activity={mockActivity} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with VP activity', () => {
+    const vpActivity = {
+      ...mockActivity,
+      flow: VCItemContainerFlowType.VP_SHARE,
+    } as unknown as VPShareActivityLog;
+    const {toJSON} = render(<ActivityLogText activity={vpActivity} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

components/BackupAndRestoreBannerNotification.test.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import {BackupAndRestoreBannerNotification} from './BackupAndRestoreBannerNotification';
+
+// Mock controllers
+jest.mock('../screens/backupAndRestore/BackupController', () => ({
+  useBackupScreen: jest.fn(() => ({
+    showBackupInProgress: false,
+    isBackingUpSuccess: false,
+    isBackingUpFailure: false,
+    backupErrorReason: '',
+    DISMISS: jest.fn(),
+    DISMISS_SHOW_BACKUP_IN_PROGRESS: jest.fn(),
+  })),
+}));
+
+jest.mock('../screens/Settings/BackupRestoreController', () => ({
+  useBackupRestoreScreen: jest.fn(() => ({
+    showRestoreInProgress: false,
+    isBackUpRestoreSuccess: false,
+    isBackUpRestoreFailure: false,
+    restoreErrorReason: '',
+    DISMISS: jest.fn(),
+    DISMISS_SHOW_RESTORE_IN_PROGRESS: jest.fn(),
+  })),
+}));
+
+// Mock BannerNotification
+jest.mock('./BannerNotification', () => ({
+  BannerNotification: jest.fn(() => null),
+  BannerStatusType: {
+    IN_PROGRESS: 'inProgress',
+    SUCCESS: 'success',
+    ERROR: 'error',
+  },
+}));
+
+describe('BackupAndRestoreBannerNotification Component', () => {
+  it('should match snapshot with no banners', () => {
+    const {toJSON} = render(<BackupAndRestoreBannerNotification />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

components/BannerNotification.test.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import {BannerNotification, BannerStatusType} from './BannerNotification';
+
+describe('BannerNotification Component', () => {
+  const defaultProps = {
+    message: 'Test notification message',
+    onClosePress: jest.fn(),
+    testId: 'bannerTest',
+    type: BannerStatusType.SUCCESS,
+  };
+
+  it('should match snapshot with success status', () => {
+    const {toJSON} = render(<BannerNotification {...defaultProps} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with error status', () => {
+    const {toJSON} = render(
+      <BannerNotification {...defaultProps} type={BannerStatusType.ERROR} />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with in progress status', () => {
+    const {toJSON} = render(
+      <BannerNotification
+        {...defaultProps}
+        type={BannerStatusType.IN_PROGRESS}
+      />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with long message', () => {
+    const {toJSON} = render(
+      <BannerNotification
+        {...defaultProps}
+        message="This is a very long notification message that should wrap to multiple lines and still be displayed correctly"
+      />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with different testId', () => {
+    const {toJSON} = render(
+      <BannerNotification {...defaultProps} testId="customBanner" />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

components/BannerNotificationContainer.test.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import {BannerNotificationContainer} from './BannerNotificationContainer';
+
+// Mock all controllers
+jest.mock('./BannerNotificationController', () => ({
+  UseBannerNotification: jest.fn(() => ({
+    isBindingSuccess: false,
+    verificationStatus: null,
+    isPasscodeUnlock: false,
+    isBiometricUnlock: false,
+    isDownloadingFailed: false,
+    isDownloadingSuccess: false,
+    isReverificationSuccess: {status: false},
+    isReverificationFailed: {status: false},
+    RESET_WALLET_BINDING_SUCCESS: jest.fn(),
+    RESET_VERIFICATION_STATUS: jest.fn(),
+    RESET_DOWNLOADING_FAILED: jest.fn(),
+    RESET_DOWNLOADING_SUCCESS: jest.fn(),
+    RESET_REVIRIFICATION_SUCCESS: jest.fn(),
+    RESET_REVERIFICATION_FAILURE: jest.fn(),
+    DISMISS: jest.fn(),
+  })),
+}));
+
+jest.mock('../screens/Scan/ScanScreenController', () => ({
+  useScanScreen: jest.fn(() => ({
+    showQuickShareSuccessBanner: false,
+    DISMISS_QUICK_SHARE_BANNER: jest.fn(),
+  })),
+}));
+
+jest.mock('../screens/Settings/SettingScreenController', () => ({
+  useSettingsScreen: jest.fn(() => ({
+    isKeyOrderSet: null,
+    RESET_KEY_ORDER_RESPONSE: jest.fn(),
+  })),
+}));
+
+jest.mock('./BackupAndRestoreBannerNotification', () => ({
+  BackupAndRestoreBannerNotification: jest.fn(() => null),
+}));
+
+jest.mock('./BannerNotification', () => ({
+  BannerNotification: jest.fn(() => null),
+  BannerStatusType: {
+    IN_PROGRESS: 'inProgress',
+    SUCCESS: 'success',
+    ERROR: 'error',
+  },
+}));
+
+describe('BannerNotificationContainer Component', () => {
+  it('should match snapshot with no banners visible', () => {
+    const {toJSON} = render(<BannerNotificationContainer />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with verification banner enabled', () => {
+    const {toJSON} = render(
+      <BannerNotificationContainer showVerificationStatusBanner={true} />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with verification banner disabled', () => {
+    const {toJSON} = render(
+      <BannerNotificationContainer showVerificationStatusBanner={false} />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

components/CopilotTooltip.test.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import {CopilotTooltip} from './CopilotTooltip';
+
+// Mock ui components
+jest.mock('./ui', () => ({
+  Button: jest.fn(() => null),
+  Column: ({children}: {children: React.ReactNode}) => <>{children}</>,
+  Row: ({children}: {children: React.ReactNode}) => <>{children}</>,
+  Text: ({children}: {children: React.ReactNode}) => <>{children}</>,
+}));
+
+// Mock controller
+jest.mock('./CopilotTooltipController', () => ({
+  UseCopilotTooltip: jest.fn(() => ({
+    copilotEvents: {
+      on: jest.fn(),
+    },
+    SET_TOUR_GUIDE: jest.fn(),
+    ONBOARDING_DONE: jest.fn(),
+    INITIAL_DOWNLOAD_DONE: jest.fn(),
+    CURRENT_STEP: 1,
+    currentStepTitle: 'Step 1 Title',
+    currentStepDescription: 'Step 1 Description',
+    titleTestID: 'stepTitle',
+    descriptionTestID: 'stepDescription',
+    stepCount: '1/5',
+    isFirstStep: true,
+    isLastStep: false,
+    isFinalStep: false,
+    isOnboarding: true,
+    isInitialDownloading: false,
+    goToPrev: jest.fn(),
+    goToNext: jest.fn(),
+    stop: jest.fn(),
+  })),
+}));
+
+// Mock settings controller
+jest.mock('../screens/Settings/SettingScreenController', () => ({
+  useSettingsScreen: jest.fn(() => ({
+    BACK: jest.fn(),
+  })),
+}));
+
+describe('CopilotTooltip Component', () => {
+  it('should match snapshot with first step', () => {
+    const {toJSON} = render(<CopilotTooltip />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

components/CopyButton.test.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import {CopyButton} from './CopyButton';
+
+// Mock Clipboard
+jest.mock('@react-native-clipboard/clipboard', () => ({
+  setString: jest.fn(),
+}));
+
+// Mock SvgImage
+jest.mock('./ui/svg', () => ({
+  SvgImage: {
+    copyIcon: jest.fn(() => null),
+  },
+}));
+
+describe('CopyButton Component', () => {
+  const defaultProps = {
+    content: 'Test content to copy',
+  };
+
+  it('should match snapshot with default props', () => {
+    const {toJSON} = render(<CopyButton {...defaultProps} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with long content', () => {
+    const {toJSON} = render(
+      <CopyButton content="This is a very long content string that needs to be copied to clipboard for testing purposes" />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with special characters', () => {
+    const specialContent = 'Special: @#$%^&*(){}[]';
+    const {toJSON} = render(<CopyButton content={specialContent} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

components/DeviceInfoList.test.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import {DeviceInfoList, DeviceInfo} from './DeviceInfoList';
+
+describe('DeviceInfoList Component', () => {
+  const mockDeviceInfo: DeviceInfo = {
+    deviceName: 'Samsung Galaxy S21',
+    name: 'John Doe',
+    deviceId: 'device123',
+  };
+
+  it('should render DeviceInfoList component', () => {
+    const {toJSON} = render(<DeviceInfoList deviceInfo={mockDeviceInfo} />);
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it('should render with receiver mode', () => {
+    const {toJSON} = render(
+      <DeviceInfoList deviceInfo={mockDeviceInfo} of="receiver" />,
+    );
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it('should render with sender mode', () => {
+    const {toJSON} = render(
+      <DeviceInfoList deviceInfo={mockDeviceInfo} of="sender" />,
+    );
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it('should render without of prop', () => {
+    const {toJSON} = render(<DeviceInfoList deviceInfo={mockDeviceInfo} />);
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it('should handle different device names', () => {
+    const deviceNames = [
+      'iPhone 14 Pro',
+      'Google Pixel 7',
+      'OnePlus 11',
+      'Samsung Galaxy S23',
+    ];
+
+    deviceNames.forEach(deviceName => {
+      const deviceInfo = {...mockDeviceInfo, deviceName};
+      const {toJSON} = render(<DeviceInfoList deviceInfo={deviceInfo} />);
+      expect(toJSON()).toBeTruthy();
+    });
+  });
+
+  it('should handle different user names', () => {
+    const names = ['Alice Smith', 'Bob Johnson', 'Charlie Brown'];
+
+    names.forEach(name => {
+      const deviceInfo = {...mockDeviceInfo, name};
+      const {toJSON} = render(<DeviceInfoList deviceInfo={deviceInfo} />);
+      expect(toJSON()).toBeTruthy();
+    });
+  });
+
+  it('should handle different device IDs', () => {
+    const deviceIds = ['device001', 'device002', 'device003'];
+
+    deviceIds.forEach(deviceId => {
+      const deviceInfo = {...mockDeviceInfo, deviceId};
+      const {toJSON} = render(<DeviceInfoList deviceInfo={deviceInfo} />);
+      expect(toJSON()).toBeTruthy();
+    });
+  });
+
+  it('should handle empty device name', () => {
+    const deviceInfo = {...mockDeviceInfo, deviceName: ''};
+    const {toJSON} = render(<DeviceInfoList deviceInfo={deviceInfo} />);
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it('should handle long device names', () => {
+    const deviceInfo = {
+      ...mockDeviceInfo,
+      deviceName: 'Very Long Device Name With Many Characters',
+    };
+    const {toJSON} = render(<DeviceInfoList deviceInfo={deviceInfo} />);
+    expect(toJSON()).toBeTruthy();
+  });
+});

components/DropdownIcon.test.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import {DropdownIcon} from './DropdownIcon';
+
+// Mock Popable
+jest.mock('react-native-popable', () => ({
+  Popable: ({children}: {children: React.ReactNode}) => <>{children}</>,
+}));
+
+describe('DropdownIcon Component', () => {
+  const mockItems = [
+    {label: 'Item 1', onPress: jest.fn(), icon: 'account'},
+    {label: 'Item 2', onPress: jest.fn(), icon: 'settings'},
+    {label: 'Item 3', onPress: jest.fn(), icon: 'delete', idType: 'type1'},
+  ];
+
+  const defaultProps = {
+    idType: 'type1',
+    icon: 'dots-vertical',
+    items: mockItems,
+  };
+
+  it('should match snapshot with default props', () => {
+    const {toJSON} = render(<DropdownIcon {...defaultProps} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with different icon', () => {
+    const {toJSON} = render(<DropdownIcon {...defaultProps} icon="menu" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with empty items', () => {
+    const {toJSON} = render(<DropdownIcon {...defaultProps} items={[]} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with multiple items', () => {
+    const manyItems = [
+      {label: 'Action 1', onPress: jest.fn(), icon: 'edit'},
+      {label: 'Action 2', onPress: jest.fn(), icon: 'share'},
+      {label: 'Action 3', onPress: jest.fn(), icon: 'download'},
+      {label: 'Action 4', onPress: jest.fn(), icon: 'upload'},
+    ];
+    const {toJSON} = render(
+      <DropdownIcon {...defaultProps} items={manyItems} />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

components/DualMessageOverlay.test.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import {DualMessageOverlay} from './DualMessageOverlay';
+import {Text} from 'react-native';
+
+// Mock react-native-elements
+jest.mock('react-native-elements', () => ({
+  Overlay: ({children}: {children: React.ReactNode}) => <>{children}</>,
+  Button: jest.fn(({title}) => <>{title}</>),
+}));
+
+// Mock ui components
+jest.mock('./ui', () => ({
+  Button: jest.fn(
+    ({title, children}: {title?: string; children?: React.ReactNode}) => (
+      <>{title || children}</>
+    ),
+  ),
+  Column: ({children}: {children: React.ReactNode}) => <>{children}</>,
+  Row: ({children}: {children: React.ReactNode}) => <>{children}</>,
+  Text: ({children}: {children: React.ReactNode}) => <>{children}</>,
+}));
+
+describe('DualMessageOverlay Component', () => {
+  const defaultProps = {
+    isVisible: true,
+    title: 'Confirm Action',
+    message: 'Are you sure you want to proceed?',
+  };
+
+  it('should match snapshot with title and message', () => {
+    const {toJSON} = render(<DualMessageOverlay {...defaultProps} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with both buttons', () => {
+    const {toJSON} = render(
+      <DualMessageOverlay
+        {...defaultProps}
+        onTryAgain={jest.fn()}
+        onIgnore={jest.fn()}
+      />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with only try again button', () => {
+    const {toJSON} = render(
+      <DualMessageOverlay {...defaultProps} onTryAgain={jest.fn()} />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with only ignore button', () => {
+    const {toJSON} = render(
+      <DualMessageOverlay {...defaultProps} onIgnore={jest.fn()} />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with hint text', () => {
+    const {toJSON} = render(
+      <DualMessageOverlay {...defaultProps} hint="Additional information" />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with custom height', () => {
+    const {toJSON} = render(
+      <DualMessageOverlay {...defaultProps} customHeight={300} />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with children', () => {
+    const {toJSON} = render(
+      <DualMessageOverlay {...defaultProps}>
+        <Text>Custom content here</Text>
+      </DualMessageOverlay>,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

components/EditableListItem.test.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import {EditableListItem} from './EditableListItem';
+
+// Mock SvgImage
+jest.mock('./ui/svg', () => ({
+  SvgImage: {
+    starIcon: jest.fn(() => null),
+  },
+}));
+
+// Mock react-native-elements
+jest.mock('react-native-elements', () => ({
+  Icon: jest.fn(() => null),
+  ListItem: ({children}: {children: React.ReactNode}) => <>{children}</>,
+  Overlay: ({children}: {children: React.ReactNode}) => <>{children}</>,
+  Input: jest.fn(() => null),
+}));
+
+// Mock ui components
+jest.mock('./ui', () => ({
+  Button: jest.fn(() => null),
+  Column: ({children}: {children: React.ReactNode}) => <>{children}</>,
+  Row: ({children}: {children: React.ReactNode}) => <>{children}</>,
+  Text: ({children}: {children: React.ReactNode}) => <>{children}</>,
+}));
+
+// Add mock for ListItem.Content and ListItem.Title
+const ListItem = require('react-native-elements').ListItem;
+ListItem.Content = ({children}: {children: React.ReactNode}) => <>{children}</>;
+ListItem.Title = ({children}: {children: React.ReactNode}) => <>{children}</>;
+
+describe('EditableListItem Component', () => {
+  const mockItems = [
+    {label: 'Email', value: 'test@example.com', testID: 'emailItem'},
+    {label: 'Phone', value: '1234567890', testID: 'phoneItem'},
+  ];
+
+  const defaultProps = {
+    testID: 'editableItem',
+    title: 'Contact Information',
+    content: 'Edit your details',
+    items: mockItems,
+    Icon: 'edit',
+    onEdit: jest.fn(),
+    onCancel: jest.fn(),
+    titleColor: '#000000',
+  };
+
+  it('should match snapshot with default props', () => {
+    const {toJSON} = render(<EditableListItem {...defaultProps} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with custom title color', () => {
+    const {toJSON} = render(
+      <EditableListItem {...defaultProps} titleColor="#FF0000" />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with progress indicator', () => {
+    const {toJSON} = render(
+      <EditableListItem {...defaultProps} progress={true} />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with error state', () => {
+    const {toJSON} = render(
+      <EditableListItem
+        {...defaultProps}
+        response="error"
+        errorMessage="Failed to update"
+      />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with success response', () => {
+    const {toJSON} = render(
+      <EditableListItem {...defaultProps} response="success" />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with single item', () => {
+    const {toJSON} = render(
+      <EditableListItem
+        {...defaultProps}
+        items={[{label: 'Name', value: 'John Doe', testID: 'nameItem'}]}
+      />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

components/GlobalContextProvider.test.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import {GlobalContextProvider} from './GlobalContextProvider';
+import {Text} from 'react-native';
+
+// Mock xstate
+jest.mock('@xstate/react', () => ({
+  useInterpret: jest.fn(() => ({
+    subscribe: jest.fn(),
+  })),
+}));
+
+// Mock appMachine
+jest.mock('../machines/app', () => ({
+  appMachine: {},
+}));
+
+// Mock GlobalContext
+jest.mock('../shared/GlobalContext', () => ({
+  GlobalContext: {
+    Provider: ({children}: {children: React.ReactNode}) => <>{children}</>,
+  },
+}));
+
+// Mock commonUtil
+jest.mock('../shared/commonUtil', () => ({
+  logState: jest.fn(),
+}));
+
+describe('GlobalContextProvider Component', () => {
+  it('should match snapshot with children', () => {
+    const {toJSON} = render(
+      <GlobalContextProvider>
+        <Text>Test Child</Text>
+      </GlobalContextProvider>,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with multiple children', () => {
+    const {toJSON} = render(
+      <GlobalContextProvider>
+        <Text>Child 1</Text>
+        <Text>Child 2</Text>
+      </GlobalContextProvider>,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

components/HelpScreen.test.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import {HelpScreen} from './HelpScreen';
+import {Text} from 'react-native';
+
+// Mock Modal
+jest.mock('./ui/Modal', () => ({
+  Modal: ({children}: {children: React.ReactNode}) => <>{children}</>,
+}));
+
+// Mock BannerNotificationContainer
+jest.mock('./BannerNotificationContainer', () => ({
+  BannerNotificationContainer: jest.fn(() => null),
+}));
+
+// Mock API
+jest.mock('../shared/api', () => ({
+  __esModule: true,
+  default: jest.fn(() =>
+    Promise.resolve({
+      aboutInjiUrl: 'https://docs.inji.io',
+    }),
+  ),
+}));
+
+describe('HelpScreen Component', () => {
+  const triggerComponent = <Text>Help</Text>;
+
+  it('should match snapshot with Inji source', () => {
+    const {toJSON} = render(
+      <HelpScreen source="Inji" triggerComponent={triggerComponent} />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with BackUp source', () => {
+    const {toJSON} = render(
+      <HelpScreen source="BackUp" triggerComponent={triggerComponent} />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with keyManagement source', () => {
+    const {toJSON} = render(
+      <HelpScreen source="keyManagement" triggerComponent={triggerComponent} />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot when disabled', () => {
+    const {toJSON} = render(
+      <HelpScreen
+        source="Inji"
+        triggerComponent={triggerComponent}
+        isDisabled={true}
+      />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

components/KebabPopUp.test.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import {KebabPopUp} from './KebabPopUp';
+import {Text} from 'react-native';
+
+// Mock controller
+jest.mock('./KebabPopUpController', () => ({
+  useKebabPopUp: jest.fn(() => ({
+    isScanning: false,
+  })),
+}));
+
+// Mock kebabMenuUtils
+jest.mock('./kebabMenuUtils', () => ({
+  getKebabMenuOptions: jest.fn(() => [
+    {
+      testID: 'pinCard',
+      label: 'Pin Card',
+      onPress: jest.fn(),
+      icon: null,
+    },
+    {
+      testID: 'removeFromWallet',
+      label: 'Remove',
+      onPress: jest.fn(),
+      icon: null,
+    },
+  ]),
+}));
+
+// Mock react-native-elements
+jest.mock('react-native-elements', () => ({
+  Icon: jest.fn(() => null),
+  ListItem: ({children}: {children: React.ReactNode}) => <>{children}</>,
+  Overlay: ({children}: {children: React.ReactNode}) => <>{children}</>,
+}));
+
+// Mock FlatList
+jest.mock('react-native-gesture-handler', () => ({
+  FlatList: ({renderItem, data}: any) => (
+    <>{data.map((item: any, index: number) => renderItem({item, index}))}</>
+  ),
+}));
+
+describe('KebabPopUp Component', () => {
+  const mockService = {} as any;
+  const mockVcMetadata = {
+    id: 'test-vc',
+    vcLabel: 'Test VC',
+  };
+
+  const defaultProps = {
+    iconName: 'ellipsis-vertical',
+    vcMetadata: mockVcMetadata as any,
+    isVisible: true,
+    onDismiss: jest.fn(),
+    service: mockService,
+    vcHasImage: false,
+  };
+
+  it('should match snapshot with default icon', () => {
+    const {toJSON} = render(<KebabPopUp {...defaultProps} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with custom icon component', () => {
+    const CustomIcon = <Text>Custom</Text>;
+    const {toJSON} = render(<KebabPopUp {...defaultProps} icon={CustomIcon} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with custom icon color', () => {
+    const {toJSON} = render(
+      <KebabPopUp {...defaultProps} iconColor="#FF0000" />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot when not visible', () => {
+    const {toJSON} = render(<KebabPopUp {...defaultProps} isVisible={false} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with VC that has image', () => {
+    const {toJSON} = render(<KebabPopUp {...defaultProps} vcHasImage={true} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

components/LanguageSelector.test.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import {LanguageSelector} from './LanguageSelector';
+import {Text} from 'react-native';
+
+// Mock dependencies
+jest.mock('react-native-restart', () => ({
+  Restart: jest.fn(),
+}));
+
+jest.mock('./ui/Picker', () => ({
+  Picker: jest.fn(() => null),
+}));
+
+describe('LanguageSelector Component', () => {
+  const defaultTrigger = <Text>Select Language</Text>;
+
+  it('should match snapshot with default trigger', () => {
+    const {toJSON} = render(
+      <LanguageSelector triggerComponent={defaultTrigger} />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with custom trigger component', () => {
+    const customTrigger = <Text>Choose Language</Text>;
+    const {toJSON} = render(
+      <LanguageSelector triggerComponent={customTrigger} />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

components/Logo.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import {Logo} from './Logo';
+
+describe('Logo Component', () => {
+  it('should render Logo component', () => {
+    const {toJSON} = render(<Logo />);
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it('should render Logo with width and height props', () => {
+    const {toJSON} = render(<Logo width={100} height={100} />);
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it('should render Logo with string width and height', () => {
+    const {toJSON} = render(<Logo width="100%" height="50" />);
+    expect(toJSON()).toBeTruthy();
+  });
+});

components/Message.test.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import {Message} from './Message';
+
+// Mock LinearProgress
+jest.mock('react-native-elements', () => ({
+  LinearProgress: jest.fn(() => null),
+}));
+
+// Mock Button from ui
+jest.mock('./ui', () => ({
+  Button: jest.fn(() => null),
+  Centered: ({children}: {children: React.ReactNode}) => <>{children}</>,
+  Column: ({children}: {children: React.ReactNode}) => <>{children}</>,
+  Text: ({children}: {children: React.ReactNode}) => <>{children}</>,
+}));
+
+describe('Message Component', () => {
+  it('should match snapshot with title only', () => {
+    const {toJSON} = render(<Message title="Test Title" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with message only', () => {
+    const {toJSON} = render(<Message message="Test Message" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with title and message', () => {
+    const {toJSON} = render(<Message title="Title" message="Message" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with hint text', () => {
+    const {toJSON} = render(<Message message="Test" hint="Hint text" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with cancel button', () => {
+    const {toJSON} = render(<Message message="Test" onCancel={jest.fn()} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

components/MessageOverlay.test.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import {MessageOverlay, ErrorMessageOverlay} from './MessageOverlay';
+import {Text} from 'react-native';
+
+// Mock react-native-elements
+jest.mock('react-native-elements', () => ({
+  Overlay: ({children}: {children: React.ReactNode}) => <>{children}</>,
+  LinearProgress: jest.fn(() => null),
+}));
+
+// Mock ui components
+jest.mock('./ui', () => ({
+  Button: jest.fn(() => null),
+  Column: ({children}: {children: React.ReactNode}) => <>{children}</>,
+  Text: ({children}: {children: React.ReactNode}) => <>{children}</>,
+}));
+
+describe('MessageOverlay Component', () => {
+  const defaultProps = {
+    isVisible: true,
+    title: 'Test Title',
+    message: 'Test Message',
+  };
+
+  it('should match snapshot with title and message', () => {
+    const {toJSON} = render(<MessageOverlay {...defaultProps} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with progress indicator', () => {
+    const {toJSON} = render(
+      <MessageOverlay {...defaultProps} progress={true} />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with numeric progress', () => {
+    const {toJSON} = render(
+      <MessageOverlay {...defaultProps} progress={0.75} />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with button', () => {
+    const {toJSON} = render(
+      <MessageOverlay
+        {...defaultProps}
+        buttonText="OK"
+        onButtonPress={jest.fn()}
+      />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with custom children', () => {
+    const {toJSON} = render(
+      <MessageOverlay {...defaultProps}>
+        <Text>Custom Content</Text>
+      </MessageOverlay>,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with hint text', () => {
+    const {toJSON} = render(
+      <MessageOverlay {...defaultProps} hint="This is a hint" />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with custom minHeight', () => {
+    const {toJSON} = render(
+      <MessageOverlay {...defaultProps} minHeight={250} />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('ErrorMessageOverlay Component', () => {
+  const errorProps = {
+    isVisible: true,
+    error: 'network',
+    translationPath: 'errors',
+    onDismiss: jest.fn(),
+  };
+
+  it('should match snapshot with error', () => {
+    const {toJSON} = render(<ErrorMessageOverlay {...errorProps} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with testID', () => {
+    const {toJSON} = render(
+      <ErrorMessageOverlay {...errorProps} testID="errorOverlay" />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

components/Passcode.test.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import {Passcode} from './Passcode';
+
+// Mock PasscodeVerify
+jest.mock('./PasscodeVerify', () => ({
+  PasscodeVerify: jest.fn(() => null),
+}));
+
+// Mock telemetry
+jest.mock('../shared/telemetry/TelemetryUtils', () => ({
+  getImpressionEventData: jest.fn(),
+  sendImpressionEvent: jest.fn(),
+}));
+
+describe('Passcode Component', () => {
+  const defaultProps = {
+    error: '',
+    storedPasscode: 'hashed-passcode',
+    salt: 'salt-value',
+    onSuccess: jest.fn(),
+    onError: jest.fn(),
+    onDismiss: jest.fn(),
+  };
+
+  it('should match snapshot with default props', () => {
+    const {toJSON} = render(<Passcode {...defaultProps} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with custom message', () => {
+    const {toJSON} = render(
+      <Passcode
+        {...defaultProps}
+        message="Please enter your 6-digit passcode"
+      />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with error message', () => {
+    const {toJSON} = render(
+      <Passcode {...defaultProps} error="Incorrect passcode. Try again." />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with both message and error', () => {
+    const {toJSON} = render(
+      <Passcode
+        {...defaultProps}
+        message="Enter passcode"
+        error="Authentication failed"
+      />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

components/PasscodeVerify.test.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import {PasscodeVerify} from './PasscodeVerify';
+
+// Mock PinInput
+jest.mock('./PinInput', () => ({
+  PinInput: jest.fn(() => null),
+}));
+
+// Mock commonUtil
+jest.mock('../shared/commonUtil', () => ({
+  hashData: jest.fn(() => Promise.resolve('hashed-value')),
+}));
+
+// Mock telemetry
+jest.mock('../shared/telemetry/TelemetryUtils', () => ({
+  getErrorEventData: jest.fn(),
+  sendErrorEvent: jest.fn(),
+}));
+
+describe('PasscodeVerify Component', () => {
+  const defaultProps = {
+    passcode: 'stored-hashed-passcode',
+    onSuccess: jest.fn(),
+    onError: jest.fn(),
+    salt: 'test-salt',
+    testID: 'passcodeVerify',
+  };
+
+  it('should match snapshot with default props', () => {
+    const {toJSON} = render(<PasscodeVerify {...defaultProps} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with different testID', () => {
+    const {toJSON} = render(
+      <PasscodeVerify {...defaultProps} testID="customPasscode" />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot without onError handler', () => {
+    const {passcode, onSuccess, salt, testID} = defaultProps;
+    const {toJSON} = render(
+      <PasscodeVerify
+        passcode={passcode}
+        onSuccess={onSuccess}
+        salt={salt}
+        testID={testID}
+      />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

components/PendingIcon.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import PendingIcon from './PendingIcon';
+
+describe('PendingIcon', () => {
+  it('should render PendingIcon component', () => {
+    const {toJSON} = render(<PendingIcon />);
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it('should match snapshot', () => {
+    const {toJSON} = render(<PendingIcon />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should render with custom color', () => {
+    const {toJSON} = render(<PendingIcon color="#FF0000" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

components/PinInput.test.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import {PinInput} from './PinInput';
+
+// Mock usePinInput
+jest.mock('../machines/pinInput', () => ({
+  usePinInput: jest.fn(length => ({
+    state: {
+      context: {
+        inputRefs: Array(length).fill({current: null}),
+        values: Array(length).fill(''),
+      },
+    },
+    send: jest.fn(),
+    events: {
+      UPDATE_INPUT: jest.fn((value, index) => ({
+        type: 'UPDATE_INPUT',
+        value,
+        index,
+      })),
+      FOCUS_INPUT: jest.fn(index => ({type: 'FOCUS_INPUT', index})),
+      KEY_PRESS: jest.fn(key => ({type: 'KEY_PRESS', key})),
+    },
+  })),
+}));
+
+describe('PinInput Component', () => {
+  it('should match snapshot with 4 digit PIN', () => {
+    const {toJSON} = render(<PinInput length={4} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with 6 digit PIN', () => {
+    const {toJSON} = render(<PinInput length={6} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with onChange handler', () => {
+    const {toJSON} = render(<PinInput length={4} onChange={jest.fn()} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with onDone and autosubmit', () => {
+    const {toJSON} = render(
+      <PinInput length={4} onDone={jest.fn()} autosubmit={true} />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with custom testID', () => {
+    const {toJSON} = render(<PinInput length={4} testID="customPinInput" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

components/ProfileIcon.test.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import {ProfileIcon} from './ProfileIcon';
+import {View} from 'react-native';
+
+// Mock SvgImage
+jest.mock('./ui/svg', () => ({
+  SvgImage: {
+    pinIcon: jest.fn(() => <View testID="mockPinIcon" />),
+  },
+}));
+
+describe('ProfileIcon Component', () => {
+  const defaultProps = {
+    profileIconContainerStyles: {},
+    profileIconSize: 40,
+  };
+
+  it('should match snapshot without pinned icon', () => {
+    const {toJSON} = render(<ProfileIcon {...defaultProps} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with pinned icon', () => {
+    const {toJSON} = render(<ProfileIcon {...defaultProps} isPinned={true} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with custom icon size', () => {
+    const {toJSON} = render(
+      <ProfileIcon {...defaultProps} profileIconSize={60} />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with custom container styles', () => {
+    const customStyles = {
+      backgroundColor: 'blue',
+      borderRadius: 10,
+      padding: 5,
+    };
+    const {toJSON} = render(
+      <ProfileIcon
+        {...defaultProps}
+        profileIconContainerStyles={customStyles}
+      />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

components/ProgressingModal.test.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import {ProgressingModal} from './ProgressingModal';
+
+// Mock Modal
+jest.mock('./ui/Modal', () => ({
+  Modal: ({children}: {children: React.ReactNode}) => <>{children}</>,
+}));
+
+// Mock Spinner
+jest.mock('react-native-spinkit', () => 'Spinner');
+
+// Mock SvgImage
+jest.mock('./ui/svg', () => ({
+  SvgImage: {
+    ProgressIcon: jest.fn(() => null),
+  },
+}));
+
+// Mock ui components
+jest.mock('./ui', () => ({
+  Button: jest.fn(() => null),
+  Centered: ({children}: {children: React.ReactNode}) => <>{children}</>,
+  Column: ({children}: {children: React.ReactNode}) => <>{children}</>,
+  Text: ({children}: {children: React.ReactNode}) => <>{children}</>,
+}));
+
+describe('ProgressingModal Component', () => {
+  const defaultProps = {
+    isVisible: true,
+    isHintVisible: false,
+    title: 'Processing',
+  };
+
+  it('should match snapshot with default props', () => {
+    const {toJSON} = render(<ProgressingModal {...defaultProps} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with progress spinner', () => {
+    const {toJSON} = render(
+      <ProgressingModal {...defaultProps} progress={true} />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with hint visible', () => {
+    const {toJSON} = render(
+      <ProgressingModal
+        {...defaultProps}
+        isHintVisible={true}
+        hint="Please wait..."
+      />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with retry button', () => {
+    const {toJSON} = render(
+      <ProgressingModal
+        {...defaultProps}
+        isHintVisible={true}
+        hint="Connection failed"
+        onRetry={jest.fn()}
+      />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with stay in progress button', () => {
+    const {toJSON} = render(
+      <ProgressingModal
+        {...defaultProps}
+        isHintVisible={true}
+        hint="Taking longer than expected"
+        onStayInProgress={jest.fn()}
+      />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with BLE error visible', () => {
+    const {toJSON} = render(
+      <ProgressingModal
+        {...defaultProps}
+        isHintVisible={true}
+        isBleErrorVisible={true}
+        hint="Bluetooth error occurred"
+      />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot as requester', () => {
+    const {toJSON} = render(
+      <ProgressingModal {...defaultProps} requester={true} />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

components/QrCodeOverlay.test.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import {QrCodeOverlay} from './QrCodeOverlay';
+import {NativeModules} from 'react-native';
+
+// Mock QRCode
+jest.mock('react-native-qrcode-svg', () => 'QRCode');
+
+// Mock SvgImage
+jest.mock('./ui/svg', () => ({
+  SvgImage: {
+    MagnifierZoom: jest.fn(() => null),
+  },
+}));
+
+// Mock sharing utils
+jest.mock('../shared/sharing/imageUtils', () => ({
+  shareImageToAllSupportedApps: jest.fn(() => Promise.resolve(true)),
+}));
+
+describe('QrCodeOverlay Component', () => {
+  // Setup mocks for native modules
+  beforeAll(() => {
+    // Mock RNSecureKeystoreModule methods
+    NativeModules.RNSecureKeystoreModule.getData = jest.fn(() =>
+      Promise.resolve(['key', 'mocked-qr-data']),
+    );
+    NativeModules.RNSecureKeystoreModule.storeData = jest.fn(() =>
+      Promise.resolve(),
+    );
+
+    // Mock RNPixelpassModule
+    NativeModules.RNPixelpassModule = {
+      generateQRData: jest.fn(() => Promise.resolve('mocked-qr-data')),
+    };
+  });
+
+  // Silence console warnings during tests
+  beforeAll(() => {
+    jest.spyOn(console, 'warn').mockImplementation();
+    jest.spyOn(console, 'error').mockImplementation();
+  });
+
+  afterAll(() => {
+    jest.restoreAllMocks();
+  });
+
+  const mockVC = {
+    credential: {id: 'test-credential'},
+    generatedOn: new Date().toISOString(),
+  };
+
+  const mockMeta = {
+    id: 'test-vc-id',
+    vcLabel: 'Test VC',
+  };
+
+  const defaultProps = {
+    verifiableCredential: mockVC as any,
+    meta: mockMeta as any,
+  };
+
+  // NOTE: CodeRabbit suggested making these tests async to wait for QR data loading.
+  // However, the component requires native module mocks (RNSecureKeystoreModule.getData)
+  // that are not properly initialized in the test environment, causing the component
+  // to always return null. These tests currently capture empty snapshots.
+  // TODO: Fix native module mocking to properly test the async QR data loading behavior.
+
+  it('should match snapshot with default props', () => {
+    const {toJSON} = render(<QrCodeOverlay {...defaultProps} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with inline QR disabled', () => {
+    const {toJSON} = render(
+      <QrCodeOverlay {...defaultProps} showInlineQr={false} />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with force visible', () => {
+    const {toJSON} = render(
+      <QrCodeOverlay {...defaultProps} forceVisible={true} />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with onClose handler', () => {
+    const {toJSON} = render(
+      <QrCodeOverlay {...defaultProps} onClose={jest.fn()} />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

components/QrScanner.test.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import {QrScanner} from './QrScanner';
+
+// Mock useContext
+const mockUseContext = jest.fn();
+jest.spyOn(React, 'useContext').mockImplementation(mockUseContext);
+
+// Mock GlobalContext
+jest.mock('../shared/GlobalContext', () => ({
+  GlobalContext: {},
+}));
+
+// Mock xstate with a mutable mock function
+const mockUseSelector = jest.fn();
+jest.mock('@xstate/react', () => ({
+  useSelector: jest.fn((...args) => mockUseSelector(...args)),
+}));
+
+// Before each test, set up the context mock
+beforeEach(() => {
+  mockUseContext.mockReturnValue({
+    appService: {send: jest.fn()},
+  });
+  mockUseSelector.mockReturnValue(true);
+});
+
+// Mock app machine
+jest.mock('../machines/app', () => ({
+  selectIsActive: jest.fn(),
+}));
+
+// Mock SvgImage
+jest.mock('./ui/svg', () => ({
+  SvgImage: {
+    FlipCameraIcon: jest.fn(() => null),
+  },
+}));
+
+// Mock ui components
+jest.mock('./ui', () => ({
+  Column: ({children}: {children: React.ReactNode}) => <>{children}</>,
+  Row: ({children}: {children: React.ReactNode}) => <>{children}</>,
+  Text: ({children}: {children: React.ReactNode}) => <>{children}</>,
+}));
+
+// Mock expo-camera
+jest.mock('expo-camera', () => ({
+  CameraView: jest.fn(() => null),
+  useCameraPermissions: jest.fn(() => [
+    null,
+    jest.fn(() => Promise.resolve({granted: true})),
+    jest.fn(() => Promise.resolve({status: 'granted'})),
+  ]),
+  PermissionStatus: {
+    UNDETERMINED: 'undetermined',
+    GRANTED: 'granted',
+    DENIED: 'denied',
+  },
+  CameraType: {
+    BACK: 'back',
+    FRONT: 'front',
+  },
+}));
+
+describe('QrScanner Component', () => {
+  const defaultProps = {
+    onQrFound: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should match snapshot with default props', () => {
+    const {toJSON} = render(<QrScanner {...defaultProps} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with title', () => {
+    const {toJSON} = render(
+      <QrScanner {...defaultProps} title="Hold phone steady to scan QR code" />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with custom title', () => {
+    const {toJSON} = render(
+      <QrScanner {...defaultProps} title="Scan QR code to share credentials" />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should render with onQrFound callback', () => {
+    const onQrFound = jest.fn();
+    const {toJSON} = render(<QrScanner onQrFound={onQrFound} />);
+    expect(toJSON()).toBeTruthy();
+    expect(onQrFound).not.toHaveBeenCalled(); // Callback not called until QR is scanned
+  });
+
+  it('should render when isActive is false', () => {
+    mockUseSelector.mockReturnValue(false);
+    const {toJSON} = render(<QrScanner {...defaultProps} />);
+    expect(toJSON()).toBeTruthy();
+  });
+});

components/RotatingIcon.test.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import {RotatingIcon} from './RotatingIcon';
+
+describe('RotatingIcon Component', () => {
+  it('should render RotatingIcon component', () => {
+    const {toJSON} = render(
+      <RotatingIcon name="sync" size={24} color="#000000" clockwise={true} />,
+    );
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it('should render with clockwise rotation', () => {
+    const {toJSON} = render(
+      <RotatingIcon
+        name="refresh"
+        size={30}
+        color="#FF0000"
+        clockwise={true}
+      />,
+    );
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it('should render with counter-clockwise rotation', () => {
+    const {toJSON} = render(
+      <RotatingIcon
+        name="refresh"
+        size={30}
+        color="#0000FF"
+        clockwise={false}
+      />,
+    );
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it('should render with custom duration', () => {
+    const {toJSON} = render(
+      <RotatingIcon
+        name="sync"
+        size={24}
+        color="#00FF00"
+        clockwise={true}
+        duration={5000}
+      />,
+    );
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it('should render with default duration', () => {
+    const {toJSON} = render(
+      <RotatingIcon
+        name="loading"
+        size={20}
+        color="#CCCCCC"
+        clockwise={true}
+      />,
+    );
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it('should handle different icon names', () => {
+    const iconNames = ['sync', 'refresh', 'loading', 'autorenew'];
+
+    iconNames.forEach(name => {
+      const {toJSON} = render(
+        <RotatingIcon name={name} size={24} color="#000000" clockwise={true} />,
+      );
+      expect(toJSON()).toBeTruthy();
+    });
+  });
+
+  it('should handle different sizes', () => {
+    const sizes = [16, 24, 32, 48];
+
+    sizes.forEach(size => {
+      const {toJSON} = render(
+        <RotatingIcon
+          name="sync"
+          size={size}
+          color="#000000"
+          clockwise={true}
+        />,
+      );
+      expect(toJSON()).toBeTruthy();
+    });
+  });
+
+  it('should handle different colors', () => {
+    const colors = ['#FF0000', '#00FF00', '#0000FF', '#FFFFFF'];
+
+    colors.forEach(color => {
+      const {toJSON} = render(
+        <RotatingIcon name="sync" size={24} color={color} clockwise={true} />,
+      );
+      expect(toJSON()).toBeTruthy();
+    });
+  });
+});

components/SectionLayout.test.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import {SectionLayout} from './SectionLayout';
+import {Text, View} from 'react-native';
+
+// Mock ui components
+jest.mock('./ui', () => ({
+  Column: ({children}: {children: React.ReactNode}) => <>{children}</>,
+  Row: ({children}: {children: React.ReactNode}) => <>{children}</>,
+  Text: ({children}: {children: React.ReactNode}) => <>{children}</>,
+}));
+
+describe('SectionLayout Component', () => {
+  const defaultProps = {
+    headerIcon: <View testID="headerIcon">Icon</View>,
+    headerText: 'Section Header',
+    children: <Text>Section Content</Text>,
+    testId: 'testSection',
+  };
+
+  it('should match snapshot with default props', () => {
+    const {toJSON} = render(<SectionLayout {...defaultProps} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with custom marginBottom', () => {
+    const {toJSON} = render(
+      <SectionLayout {...defaultProps} marginBottom={20} />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with different header text', () => {
+    const {toJSON} = render(
+      <SectionLayout {...defaultProps} headerText="Custom Section Title" />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with complex children', () => {
+    const {toJSON} = render(
+      <SectionLayout
+        headerIcon={defaultProps.headerIcon}
+        headerText={defaultProps.headerText}
+        testId={defaultProps.testId}>
+        <Text>Line 1</Text>
+        <Text>Line 2</Text>
+        <View>
+          <Text>Nested content</Text>
+        </View>
+      </SectionLayout>,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with different icon', () => {
+    const customIcon = <View testID="customIcon">🔍</View>;
+    const {toJSON} = render(
+      <SectionLayout {...defaultProps} headerIcon={customIcon} />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with zero marginBottom', () => {
+    const {toJSON} = render(
+      <SectionLayout {...defaultProps} marginBottom={0} />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

components/TextEditOverlay.test.tsx

@@ -0,0 +1,150 @@
+import React from 'react';
+import {render, fireEvent} from '@testing-library/react-native';
+import {TextEditOverlay} from './TextEditOverlay';
+
+// Mock react-native-elements with a more realistic Input
+jest.mock('react-native-elements', () => {
+  const RN = jest.requireActual('react-native');
+  return {
+    Input: (props: {value: string; onChangeText: (text: string) => void}) => (
+      <RN.TextInput
+        value={props.value}
+        onChangeText={props.onChangeText}
+        testID="text-input"
+      />
+    ),
+  };
+});
+
+// Mock ui components with more realistic Button
+jest.mock('./ui', () => {
+  const RN = jest.requireActual('react-native');
+  const React = jest.requireActual('react');
+  return {
+    Button: (props: {title: string; onPress: () => void}) => (
+      <RN.TouchableOpacity
+        onPress={props.onPress}
+        testID={`button-${props.title}`}>
+        <RN.Text>{props.title}</RN.Text>
+      </RN.TouchableOpacity>
+    ),
+    Centered: ({children}: {children: React.ReactNode}) => <>{children}</>,
+    Column: ({children}: {children: React.ReactNode}) => <>{children}</>,
+    Row: ({children}: {children: React.ReactNode}) => <>{children}</>,
+    Text: ({children}: {children: React.ReactNode}) => <>{children}</>,
+  };
+});
+
+describe('TextEditOverlay Component', () => {
+  const defaultProps = {
+    isVisible: true,
+    label: 'Edit Name',
+    value: 'John Doe',
+    onSave: jest.fn(),
+    onDismiss: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should match snapshot with default props', () => {
+    const {toJSON} = render(<TextEditOverlay {...defaultProps} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with different label', () => {
+    const {toJSON} = render(
+      <TextEditOverlay {...defaultProps} label="Edit Email" />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with maxLength', () => {
+    const {toJSON} = render(
+      <TextEditOverlay {...defaultProps} maxLength={50} />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with empty value', () => {
+    const {toJSON} = render(<TextEditOverlay {...defaultProps} value="" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with long value', () => {
+    const {toJSON} = render(
+      <TextEditOverlay
+        {...defaultProps}
+        value="This is a very long text value that should be editable"
+      />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should call onSave with value when save button is pressed', () => {
+    const onSave = jest.fn();
+    const {getByTestId} = render(
+      <TextEditOverlay {...defaultProps} onSave={onSave} value="Test Value" />,
+    );
+
+    const saveButton = getByTestId('button-save');
+    fireEvent.press(saveButton);
+
+    // onSave should be called with the current value
+    expect(onSave).toHaveBeenCalledTimes(1);
+    expect(typeof onSave.mock.calls[0][0]).toBe('string');
+  });
+
+  it('should call onSave with original value when save is pressed without changes', () => {
+    const onSave = jest.fn();
+    const {getByTestId} = render(
+      <TextEditOverlay {...defaultProps} onSave={onSave} />,
+    );
+
+    const saveButton = getByTestId('button-save');
+    fireEvent.press(saveButton);
+
+    expect(onSave).toHaveBeenCalledWith('John Doe');
+  });
+
+  it('should call onDismiss and reset value when cancel button is pressed', () => {
+    const onDismiss = jest.fn();
+    const {getByTestId} = render(
+      <TextEditOverlay {...defaultProps} onDismiss={onDismiss} />,
+    );
+
+    const input = getByTestId('text-input');
+    // Simulate text change
+    input.props.onChangeText('Modified Text');
+
+    const cancelButton = getByTestId('button-cancel');
+    fireEvent.press(cancelButton);
+
+    expect(onDismiss).toHaveBeenCalled();
+  });
+
+  it('should handle text input changes', () => {
+    const {getByTestId} = render(<TextEditOverlay {...defaultProps} />);
+
+    const input = getByTestId('text-input');
+
+    // Verify input has onChangeText handler
+    expect(input.props.onChangeText).toBeDefined();
+    expect(typeof input.props.onChangeText).toBe('function');
+  });
+
+  it('should not use isVisible prop', () => {
+    // Note: isVisible is defined in the interface but not used in the component
+    // This test documents that the prop exists but has no effect
+    const {toJSON: jsonVisible} = render(
+      <TextEditOverlay {...defaultProps} isVisible={true} />,
+    );
+    const {toJSON: jsonHidden} = render(
+      <TextEditOverlay {...defaultProps} isVisible={false} />,
+    );
+
+    // Both render the same output regardless of isVisible value
+    expect(JSON.stringify(jsonVisible())).toEqual(JSON.stringify(jsonHidden()));
+  });
+});

components/TrustModal.test.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import {TrustModal} from './TrustModal';
+
+// Mock useTranslation hook
+const mockT = jest.fn((key: string) => {
+  if (key === 'infoPoints' || key === 'verifierInfoPoints') {
+    return ['Point 1', 'Point 2', 'Point 3'];
+  }
+  return key;
+});
+
+jest.mock('react-i18next', () => ({
+  ...jest.requireActual('react-i18next'),
+  useTranslation: () => ({
+    t: mockT,
+    i18n: {changeLanguage: jest.fn()},
+  }),
+}));
+
+// Mock ui components
+jest.mock('./ui', () => ({
+  Button: jest.fn(() => null),
+  Column: ({children}: {children: React.ReactNode}) => <>{children}</>,
+  Row: ({children}: {children: React.ReactNode}) => <>{children}</>,
+  Text: ({children}: {children: React.ReactNode}) => <>{children}</>,
+}));
+
+// Mock react-native components
+jest.mock('react-native', () => {
+  const ReactNative = jest.requireActual('react-native');
+  return {
+    ...ReactNative,
+    Modal: ({children}: {children: React.ReactNode}) => <>{children}</>,
+    View: ({children}: {children: React.ReactNode}) => <>{children}</>,
+    ScrollView: ({children}: {children: React.ReactNode}) => <>{children}</>,
+    Image: jest.fn(() => null),
+  };
+});
+
+describe('TrustModal Component', () => {
+  const defaultProps = {
+    isVisible: true,
+    logo: 'https://example.com/logo.png',
+    name: 'Test Issuer',
+    onConfirm: jest.fn(),
+    onCancel: jest.fn(),
+  };
+
+  it('should match snapshot with issuer flow', () => {
+    const {toJSON} = render(<TrustModal {...defaultProps} flowType="issuer" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with verifier flow', () => {
+    const {toJSON} = render(
+      <TrustModal {...defaultProps} flowType="verifier" />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot when not visible', () => {
+    const {toJSON} = render(<TrustModal {...defaultProps} isVisible={false} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot without logo', () => {
+    const {toJSON} = render(
+      <TrustModal {...defaultProps} logo={undefined} flowType="issuer" />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot without name', () => {
+    const {toJSON} = render(
+      <TrustModal {...defaultProps} name={''} flowType="issuer" />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot without logo and name', () => {
+    const {toJSON} = render(
+      <TrustModal
+        isVisible={true}
+        logo={undefined}
+        name={''}
+        onConfirm={jest.fn()}
+        onCancel={jest.fn()}
+        flowType="issuer"
+      />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with long name', () => {
+    const {toJSON} = render(
+      <TrustModal
+        {...defaultProps}
+        name="Very Long Issuer Name That Should Wrap Properly"
+        flowType="verifier"
+      />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

components/VCVerification.test.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import {VCVerification} from './VCVerification';
+import {VCMetadata} from '../shared/VCMetadata';
+import {Display} from './VC/common/VCUtils';
+
+// Mock the Display class
+const mockDisplay = {
+  getTextColor: jest.fn((defaultColor: string) => defaultColor),
+} as unknown as Display;
+
+describe('VCVerification Component', () => {
+  it('should render for verified and valid credential', () => {
+    const vcMetadata = new VCMetadata({
+      isVerified: true,
+      isExpired: false,
+    });
+
+    const {toJSON} = render(
+      <VCVerification vcMetadata={vcMetadata} display={mockDisplay} />,
+    );
+
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it('should render for verified but expired credential', () => {
+    const vcMetadata = new VCMetadata({
+      isVerified: true,
+      isExpired: true,
+    });
+
+    const {toJSON} = render(
+      <VCVerification vcMetadata={vcMetadata} display={mockDisplay} />,
+    );
+
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it('should render for pending/unverified credential', () => {
+    const vcMetadata = new VCMetadata({
+      isVerified: false,
+      isExpired: false,
+    });
+
+    const {toJSON} = render(
+      <VCVerification vcMetadata={vcMetadata} display={mockDisplay} />,
+    );
+
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it('should render verification status text', () => {
+    const vcMetadata = new VCMetadata({
+      isVerified: true,
+      isExpired: false,
+    });
+
+    const {getByText} = render(
+      <VCVerification vcMetadata={vcMetadata} display={mockDisplay} />,
+    );
+
+    expect(getByText('valid')).toBeTruthy();
+  });
+
+  it('should call getTextColor from display prop', () => {
+    const vcMetadata = new VCMetadata({
+      isVerified: true,
+      isExpired: false,
+    });
+
+    render(<VCVerification vcMetadata={vcMetadata} display={mockDisplay} />);
+
+    expect(mockDisplay.getTextColor).toHaveBeenCalled();
+  });
+});

components/VPShareActivityLogEvent.test.ts

@@ -0,0 +1,234 @@
+import {VPShareActivityLog} from './VPShareActivityLogEvent';
+import {VCItemContainerFlowType} from '../shared/Utils';
+
+describe('VPShareActivityLog', () => {
+  describe('constructor', () => {
+    it('should create instance with default values', () => {
+      const log = new VPShareActivityLog({});
+
+      expect(log.type).toBe('');
+      expect(log.timestamp).toBeDefined();
+      expect(log.flow).toBe(VCItemContainerFlowType.VP_SHARE);
+      expect(log.info).toBe('');
+    });
+
+    it('should create instance with provided values', () => {
+      const timestamp = Date.now();
+      const log = new VPShareActivityLog({
+        type: 'SHARED_SUCCESSFULLY',
+        timestamp,
+        flow: VCItemContainerFlowType.QR_LOGIN,
+        info: 'Test info',
+      });
+
+      expect(log.type).toBe('SHARED_SUCCESSFULLY');
+      expect(log.timestamp).toBe(timestamp);
+      expect(log.flow).toBe(VCItemContainerFlowType.QR_LOGIN);
+      expect(log.info).toBe('Test info');
+    });
+
+    it('should handle different activity types', () => {
+      const types: Array<
+        | 'SHARED_SUCCESSFULLY'
+        | 'SHARED_WITH_FACE_VERIFIACTION'
+        | 'VERIFIER_AUTHENTICATION_FAILED'
+        | 'INVALID_AUTH_REQUEST'
+        | 'USER_DECLINED_CONSENT'
+      > = [
+        'SHARED_SUCCESSFULLY',
+        'SHARED_WITH_FACE_VERIFIACTION',
+        'VERIFIER_AUTHENTICATION_FAILED',
+        'INVALID_AUTH_REQUEST',
+        'USER_DECLINED_CONSENT',
+      ];
+
+      types.forEach(type => {
+        const log = new VPShareActivityLog({type});
+        expect(log.type).toBe(type);
+      });
+    });
+  });
+
+  describe('getActionText', () => {
+    it('should return formatted action text', () => {
+      const log = new VPShareActivityLog({
+        type: 'SHARED_SUCCESSFULLY',
+        info: 'Test info',
+      });
+
+      const mockT = jest.fn(key => `Translated: ${key}`);
+      const result = log.getActionText(mockT);
+
+      expect(mockT).toHaveBeenCalledWith(
+        'ActivityLogText:vpSharing:SHARED_SUCCESSFULLY',
+        {info: 'Test info'},
+      );
+      expect(result).toContain('Translated:');
+    });
+
+    it('should handle empty type', () => {
+      const log = new VPShareActivityLog({type: ''});
+      const mockT = jest.fn(key => key);
+
+      log.getActionText(mockT);
+      expect(mockT).toHaveBeenCalled();
+    });
+
+    it('should pass info to translation function', () => {
+      const log = new VPShareActivityLog({
+        type: 'TECHNICAL_ERROR',
+        info: 'Error details',
+      });
+
+      const mockT = jest.fn();
+      log.getActionText(mockT);
+
+      expect(mockT).toHaveBeenCalledWith(
+        expect.any(String),
+        expect.objectContaining({info: 'Error details'}),
+      );
+    });
+  });
+
+  describe('getLogFromObject', () => {
+    it('should create log from object', () => {
+      const data = {
+        type: 'SHARED_SUCCESSFULLY',
+        timestamp: 1234567890,
+        flow: VCItemContainerFlowType.VP_SHARE,
+        info: 'Test',
+      };
+
+      const log = VPShareActivityLog.getLogFromObject(data);
+
+      expect(log).toBeInstanceOf(VPShareActivityLog);
+      expect(log.type).toBe('SHARED_SUCCESSFULLY');
+      expect(log.timestamp).toBe(1234567890);
+    });
+
+    it('should handle empty object', () => {
+      const log = VPShareActivityLog.getLogFromObject({});
+
+      expect(log).toBeInstanceOf(VPShareActivityLog);
+      expect(log.type).toBe('');
+    });
+
+    it('should handle partial object', () => {
+      const log = VPShareActivityLog.getLogFromObject({
+        type: 'USER_DECLINED_CONSENT',
+      });
+
+      expect(log).toBeInstanceOf(VPShareActivityLog);
+      expect(log.type).toBe('USER_DECLINED_CONSENT');
+    });
+  });
+
+  describe('getActionLabel', () => {
+    it('should return formatted action label in English', () => {
+      const log = new VPShareActivityLog({
+        timestamp: Date.now() - 60000, // 1 minute ago
+      });
+
+      const label = log.getActionLabel('enUS');
+
+      expect(label).toBeDefined();
+      expect(typeof label).toBe('string');
+      expect(label.length).toBeGreaterThan(0);
+    });
+
+    it('should handle different languages', () => {
+      const log = new VPShareActivityLog({
+        timestamp: Date.now() - 3600000, // 1 hour ago
+      });
+
+      const languages = ['enUS', 'hi', 'kn', 'ta', 'ar'];
+
+      languages.forEach(lang => {
+        const label = log.getActionLabel(lang);
+        expect(label).toBeDefined();
+        expect(typeof label).toBe('string');
+      });
+    });
+
+    it('should show relative time', () => {
+      const recentTimestamp = Date.now() - 5000; // 5 seconds ago
+      const log = new VPShareActivityLog({timestamp: recentTimestamp});
+
+      const label = log.getActionLabel('enUS');
+
+      expect(label).toBeDefined();
+      expect(label.length).toBeGreaterThan(0);
+    });
+
+    it('should handle old timestamps', () => {
+      const oldTimestamp = Date.now() - 86400000; // 1 day ago
+      const log = new VPShareActivityLog({timestamp: oldTimestamp});
+
+      const label = log.getActionLabel('enUS');
+
+      expect(label).toBeDefined();
+      expect(label).toContain('ago');
+    });
+  });
+
+  describe('Activity Log Types', () => {
+    it('should handle all success types', () => {
+      const successTypes: Array<
+        | 'SHARED_SUCCESSFULLY'
+        | 'SHARED_WITH_FACE_VERIFIACTION'
+        | 'SHARED_AFTER_RETRY'
+        | 'SHARED_WITH_FACE_VERIFICATION_AFTER_RETRY'
+      > = [
+        'SHARED_SUCCESSFULLY',
+        'SHARED_WITH_FACE_VERIFIACTION',
+        'SHARED_AFTER_RETRY',
+        'SHARED_WITH_FACE_VERIFICATION_AFTER_RETRY',
+      ];
+
+      successTypes.forEach(type => {
+        const log = new VPShareActivityLog({type});
+        expect(log.type).toBe(type);
+      });
+    });
+
+    it('should handle all error types', () => {
+      const errorTypes: Array<
+        | 'VERIFIER_AUTHENTICATION_FAILED'
+        | 'INVALID_AUTH_REQUEST'
+        | 'RETRY_ATTEMPT_FAILED'
+        | 'MAX_RETRY_ATTEMPT_FAILED'
+        | 'FACE_VERIFICATION_FAILED'
+        | 'TECHNICAL_ERROR'
+      > = [
+        'VERIFIER_AUTHENTICATION_FAILED',
+        'INVALID_AUTH_REQUEST',
+        'RETRY_ATTEMPT_FAILED',
+        'MAX_RETRY_ATTEMPT_FAILED',
+        'FACE_VERIFICATION_FAILED',
+        'TECHNICAL_ERROR',
+      ];
+
+      errorTypes.forEach(type => {
+        const log = new VPShareActivityLog({type});
+        expect(log.type).toBe(type);
+      });
+    });
+
+    it('should handle credential-related types', () => {
+      const credentialTypes: Array<
+        | 'NO_SELECTED_VC_HAS_IMAGE'
+        | 'CREDENTIAL_MISMATCH_FROM_KEBAB'
+        | 'NO_CREDENTIAL_MATCHING_REQUEST'
+      > = [
+        'NO_SELECTED_VC_HAS_IMAGE',
+        'CREDENTIAL_MISMATCH_FROM_KEBAB',
+        'NO_CREDENTIAL_MATCHING_REQUEST',
+      ];
+
+      credentialTypes.forEach(type => {
+        const log = new VPShareActivityLog({type});
+        expect(log.type).toBe(type);
+      });
+    });
+  });
+});

components/VcItemContainerProfileImage.test.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import {VcItemContainerProfileImage} from './VcItemContainerProfileImage';
+import {View} from 'react-native';
+
+// Mock SvgImage
+jest.mock('./ui/svg', () => ({
+  SvgImage: {
+    pinIcon: jest.fn(() => <View testID="mockPinIcon" />),
+  },
+}));
+
+// Mock ProfileIcon
+jest.mock('./ProfileIcon', () => ({
+  ProfileIcon: jest.fn(() => <View testID="mockProfileIcon" />),
+}));
+
+describe('VcItemContainerProfileImage Component', () => {
+  const vcDataWithImage = {
+    face: 'https://example.com/avatar.jpg',
+  };
+
+  const vcDataWithoutImage = {
+    face: null,
+  };
+
+  it('should match snapshot with face image', () => {
+    const {toJSON} = render(
+      <VcItemContainerProfileImage
+        verifiableCredentialData={vcDataWithImage}
+      />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with face image and pinned', () => {
+    const {toJSON} = render(
+      <VcItemContainerProfileImage
+        verifiableCredentialData={vcDataWithImage}
+        isPinned={true}
+      />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot without face image', () => {
+    const {toJSON} = render(
+      <VcItemContainerProfileImage
+        verifiableCredentialData={vcDataWithoutImage}
+      />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot without face image and pinned', () => {
+    const {toJSON} = render(
+      <VcItemContainerProfileImage
+        verifiableCredentialData={vcDataWithoutImage}
+        isPinned={true}
+      />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should match snapshot with empty string face', () => {
+    const {toJSON} = render(
+      <VcItemContainerProfileImage verifiableCredentialData={{face: ''}} />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

components/VerifiedIcon.test.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import VerifiedIcon from './VerifiedIcon';
+
+describe('VerifiedIcon', () => {
+  it('should render VerifiedIcon component', () => {
+    const {toJSON} = render(<VerifiedIcon />);
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it('should match snapshot', () => {
+    const {toJSON} = render(<VerifiedIcon />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('should have proper styling structure', () => {
+    const {toJSON} = render(<VerifiedIcon />);
+    const tree = toJSON();
+
+    // Verify component structure exists
+    expect(tree).toBeTruthy();
+    expect(tree.children).toBeTruthy();
+  });
+
+  it('should render with check-circle icon', () => {
+    const {toJSON} = render(<VerifiedIcon />);
+    const tree = toJSON();
+    expect(tree).toBeTruthy();
+  });
+});

components/__snapshots__/AccountInformation.test.tsx.snap

@@ -0,0 +1,821 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AccountInformation Component should match snapshot with different email 1`] = `
+<View
+  accessible={true}
+  style={
+    [
+      {
+        "alignItems": undefined,
+        "flexDirection": "row",
+        "justifyContent": undefined,
+      },
+      null,
+      null,
+      null,
+      null,
+      null,
+      null,
+      null,
+      null,
+      null,
+      {
+        "columnGap": 11,
+        "marginBottom": 21,
+      },
+      null,
+      null,
+    ]
+  }
+>
+  <View
+    accessible={true}
+    style={
+      [
+        {
+          "alignItems": undefined,
+          "flexDirection": "column",
+          "justifyContent": undefined,
+        },
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        {
+          "justifyContent": "center",
+        },
+        null,
+        null,
+        null,
+        null,
+        null,
+      ]
+    }
+  >
+    <Image
+      accessibilityLabel="associatedAccountPicture"
+      accessible={true}
+      source={
+        {
+          "uri": "https://example.com/avatar.jpg",
+        }
+      }
+      style={
+        {
+          "borderRadius": 45,
+          "height": 40,
+          "width": 40,
+        }
+      }
+    />
+  </View>
+  <View
+    accessible={true}
+    style={
+      [
+        {
+          "alignItems": undefined,
+          "flexDirection": "column",
+          "justifyContent": undefined,
+        },
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+      ]
+    }
+  >
+    <View
+      accessible={true}
+      style={
+        [
+          {
+            "alignItems": undefined,
+            "flexDirection": "row",
+            "justifyContent": undefined,
+          },
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+        ]
+      }
+    >
+      <Text
+        accessibilityLabel="associatedAccount"
+        style={
+          [
+            {
+              "color": "#000000",
+              "fontSize": 16,
+              "lineHeight": 18,
+            },
+            {
+              "fontFamily": "Inter_400Regular",
+              "fontSize": 14,
+            },
+            null,
+            {
+              "textAlign": "left",
+            },
+            null,
+            null,
+            {
+              "color": "#707070",
+              "fontSize": 12,
+            },
+          ]
+        }
+      >
+        associatedAccount
+      </Text>
+    </View>
+    <View
+      accessible={true}
+      style={
+        [
+          {
+            "alignItems": undefined,
+            "flexDirection": "row",
+            "justifyContent": undefined,
+          },
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+        ]
+      }
+    >
+      <Text
+        accessibilityLabel="associatedAccountEmail"
+        style={
+          [
+            {
+              "color": "#000000",
+              "fontSize": 16,
+              "lineHeight": 18,
+            },
+            {
+              "fontFamily": "Inter_400Regular",
+              "fontSize": 14,
+            },
+            null,
+            {
+              "textAlign": "left",
+            },
+            null,
+            null,
+            {
+              "fontFamily": "Helvetica Neue",
+              "fontSize": 13,
+            },
+          ]
+        }
+      >
+        another@test.com
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`AccountInformation Component should match snapshot with different picture URL 1`] = `
+<View
+  accessible={true}
+  style={
+    [
+      {
+        "alignItems": undefined,
+        "flexDirection": "row",
+        "justifyContent": undefined,
+      },
+      null,
+      null,
+      null,
+      null,
+      null,
+      null,
+      null,
+      null,
+      null,
+      {
+        "columnGap": 11,
+        "marginBottom": 21,
+      },
+      null,
+      null,
+    ]
+  }
+>
+  <View
+    accessible={true}
+    style={
+      [
+        {
+          "alignItems": undefined,
+          "flexDirection": "column",
+          "justifyContent": undefined,
+        },
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        {
+          "justifyContent": "center",
+        },
+        null,
+        null,
+        null,
+        null,
+        null,
+      ]
+    }
+  >
+    <Image
+      accessibilityLabel="associatedAccountPicture"
+      accessible={true}
+      source={
+        {
+          "uri": "https://example.com/different-avatar.jpg",
+        }
+      }
+      style={
+        {
+          "borderRadius": 45,
+          "height": 40,
+          "width": 40,
+        }
+      }
+    />
+  </View>
+  <View
+    accessible={true}
+    style={
+      [
+        {
+          "alignItems": undefined,
+          "flexDirection": "column",
+          "justifyContent": undefined,
+        },
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+      ]
+    }
+  >
+    <View
+      accessible={true}
+      style={
+        [
+          {
+            "alignItems": undefined,
+            "flexDirection": "row",
+            "justifyContent": undefined,
+          },
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+        ]
+      }
+    >
+      <Text
+        accessibilityLabel="associatedAccount"
+        style={
+          [
+            {
+              "color": "#000000",
+              "fontSize": 16,
+              "lineHeight": 18,
+            },
+            {
+              "fontFamily": "Inter_400Regular",
+              "fontSize": 14,
+            },
+            null,
+            {
+              "textAlign": "left",
+            },
+            null,
+            null,
+            {
+              "color": "#707070",
+              "fontSize": 12,
+            },
+          ]
+        }
+      >
+        associatedAccount
+      </Text>
+    </View>
+    <View
+      accessible={true}
+      style={
+        [
+          {
+            "alignItems": undefined,
+            "flexDirection": "row",
+            "justifyContent": undefined,
+          },
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+        ]
+      }
+    >
+      <Text
+        accessibilityLabel="associatedAccountEmail"
+        style={
+          [
+            {
+              "color": "#000000",
+              "fontSize": 16,
+              "lineHeight": 18,
+            },
+            {
+              "fontFamily": "Inter_400Regular",
+              "fontSize": 14,
+            },
+            null,
+            {
+              "textAlign": "left",
+            },
+            null,
+            null,
+            {
+              "fontFamily": "Helvetica Neue",
+              "fontSize": 13,
+            },
+          ]
+        }
+      >
+        test@example.com
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`AccountInformation Component should match snapshot with email and picture 1`] = `
+<View
+  accessible={true}
+  style={
+    [
+      {
+        "alignItems": undefined,
+        "flexDirection": "row",
+        "justifyContent": undefined,
+      },
+      null,
+      null,
+      null,
+      null,
+      null,
+      null,
+      null,
+      null,
+      null,
+      {
+        "columnGap": 11,
+        "marginBottom": 21,
+      },
+      null,
+      null,
+    ]
+  }
+>
+  <View
+    accessible={true}
+    style={
+      [
+        {
+          "alignItems": undefined,
+          "flexDirection": "column",
+          "justifyContent": undefined,
+        },
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        {
+          "justifyContent": "center",
+        },
+        null,
+        null,
+        null,
+        null,
+        null,
+      ]
+    }
+  >
+    <Image
+      accessibilityLabel="associatedAccountPicture"
+      accessible={true}
+      source={
+        {
+          "uri": "https://example.com/avatar.jpg",
+        }
+      }
+      style={
+        {
+          "borderRadius": 45,
+          "height": 40,
+          "width": 40,
+        }
+      }
+    />
+  </View>
+  <View
+    accessible={true}
+    style={
+      [
+        {
+          "alignItems": undefined,
+          "flexDirection": "column",
+          "justifyContent": undefined,
+        },
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+      ]
+    }
+  >
+    <View
+      accessible={true}
+      style={
+        [
+          {
+            "alignItems": undefined,
+            "flexDirection": "row",
+            "justifyContent": undefined,
+          },
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+        ]
+      }
+    >
+      <Text
+        accessibilityLabel="associatedAccount"
+        style={
+          [
+            {
+              "color": "#000000",
+              "fontSize": 16,
+              "lineHeight": 18,
+            },
+            {
+              "fontFamily": "Inter_400Regular",
+              "fontSize": 14,
+            },
+            null,
+            {
+              "textAlign": "left",
+            },
+            null,
+            null,
+            {
+              "color": "#707070",
+              "fontSize": 12,
+            },
+          ]
+        }
+      >
+        associatedAccount
+      </Text>
+    </View>
+    <View
+      accessible={true}
+      style={
+        [
+          {
+            "alignItems": undefined,
+            "flexDirection": "row",
+            "justifyContent": undefined,
+          },
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+        ]
+      }
+    >
+      <Text
+        accessibilityLabel="associatedAccountEmail"
+        style={
+          [
+            {
+              "color": "#000000",
+              "fontSize": 16,
+              "lineHeight": 18,
+            },
+            {
+              "fontFamily": "Inter_400Regular",
+              "fontSize": 14,
+            },
+            null,
+            {
+              "textAlign": "left",
+            },
+            null,
+            null,
+            {
+              "fontFamily": "Helvetica Neue",
+              "fontSize": 13,
+            },
+          ]
+        }
+      >
+        test@example.com
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`AccountInformation Component should match snapshot with long email 1`] = `
+<View
+  accessible={true}
+  style={
+    [
+      {
+        "alignItems": undefined,
+        "flexDirection": "row",
+        "justifyContent": undefined,
+      },
+      null,
+      null,
+      null,
+      null,
+      null,
+      null,
+      null,
+      null,
+      null,
+      {
+        "columnGap": 11,
+        "marginBottom": 21,
+      },
+      null,
+      null,
+    ]
+  }
+>
+  <View
+    accessible={true}
+    style={
+      [
+        {
+          "alignItems": undefined,
+          "flexDirection": "column",
+          "justifyContent": undefined,
+        },
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        {
+          "justifyContent": "center",
+        },
+        null,
+        null,
+        null,
+        null,
+        null,
+      ]
+    }
+  >
+    <Image
+      accessibilityLabel="associatedAccountPicture"
+      accessible={true}
+      source={
+        {
+          "uri": "https://example.com/avatar.jpg",
+        }
+      }
+      style={
+        {
+          "borderRadius": 45,
+          "height": 40,
+          "width": 40,
+        }
+      }
+    />
+  </View>
+  <View
+    accessible={true}
+    style={
+      [
+        {
+          "alignItems": undefined,
+          "flexDirection": "column",
+          "justifyContent": undefined,
+        },
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+      ]
+    }
+  >
+    <View
+      accessible={true}
+      style={
+        [
+          {
+            "alignItems": undefined,
+            "flexDirection": "row",
+            "justifyContent": undefined,
+          },
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+        ]
+      }
+    >
+      <Text
+        accessibilityLabel="associatedAccount"
+        style={
+          [
+            {
+              "color": "#000000",
+              "fontSize": 16,
+              "lineHeight": 18,
+            },
+            {
+              "fontFamily": "Inter_400Regular",
+              "fontSize": 14,
+            },
+            null,
+            {
+              "textAlign": "left",
+            },
+            null,
+            null,
+            {
+              "color": "#707070",
+              "fontSize": 12,
+            },
+          ]
+        }
+      >
+        associatedAccount
+      </Text>
+    </View>
+    <View
+      accessible={true}
+      style={
+        [
+          {
+            "alignItems": undefined,
+            "flexDirection": "row",
+            "justifyContent": undefined,
+          },
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+        ]
+      }
+    >
+      <Text
+        accessibilityLabel="associatedAccountEmail"
+        style={
+          [
+            {
+              "color": "#000000",
+              "fontSize": 16,
+              "lineHeight": 18,
+            },
+            {
+              "fontFamily": "Inter_400Regular",
+              "fontSize": 14,
+            },
+            null,
+            {
+              "textAlign": "left",
+            },
+            null,
+            null,
+            {
+              "fontFamily": "Helvetica Neue",
+              "fontSize": 13,
+            },
+          ]
+        }
+      >
+        very.long.email.address@example-domain.com
+      </Text>
+    </View>
+  </View>
+</View>
+`;

components/__snapshots__/ActivityLogText.test.tsx.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ActivityLogText Component should match snapshot with VC activity 1`] = `null`;
+
+exports[`ActivityLogText Component should match snapshot with VP activity 1`] = `null`;

components/__snapshots__/BackupAndRestoreBannerNotification.test.tsx.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BackupAndRestoreBannerNotification Component should match snapshot with no banners 1`] = `null`;

components/__snapshots__/BannerNotification.test.tsx.snap

@@ -0,0 +1,851 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BannerNotification Component should match snapshot with different testId 1`] = `
+<View
+  accessibilityLabel="customBanner"
+  accessible={true}
+>
+  <View
+    accessible={true}
+    style={
+      [
+        {
+          "alignItems": undefined,
+          "flexDirection": "row",
+          "justifyContent": undefined,
+        },
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        [
+          {
+            "alignItems": "flex-start",
+            "backgroundColor": "#DB2E2E",
+            "columnGap": 7,
+            "justifyContent": "space-between",
+            "marginVertical": 1,
+            "paddingHorizontal": 18,
+            "paddingVertical": 12,
+            "position": "relative",
+            "width": "100%",
+          },
+          {
+            "backgroundColor": "#4B9D20",
+          },
+        ],
+        null,
+        null,
+      ]
+    }
+  >
+    <View
+      accessible={true}
+      style={
+        [
+          {
+            "alignItems": undefined,
+            "flexDirection": "column",
+            "justifyContent": undefined,
+          },
+          {
+            "flex": 1,
+          },
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+        ]
+      }
+    >
+      <Text
+        accessibilityLabel="customBannerText"
+        style={
+          [
+            {
+              "color": "#000000",
+              "fontSize": 16,
+              "lineHeight": 18,
+            },
+            {
+              "fontFamily": "Inter_600SemiBold",
+              "fontSize": 15,
+            },
+            {
+              "color": "#FFFFFF",
+            },
+            {
+              "textAlign": "left",
+            },
+            null,
+            null,
+            {
+              "fontFamily": "Inter_600SemiBold",
+              "fontSize": 12,
+              "lineHeight": 15,
+              "padding": 1,
+              "textAlignVertical": "center",
+            },
+          ]
+        }
+      >
+        Test notification message
+      </Text>
+    </View>
+    <View
+      accessible={true}
+      style={
+        [
+          {
+            "alignItems": undefined,
+            "flexDirection": "column",
+            "justifyContent": undefined,
+          },
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+        ]
+      }
+    >
+      <View
+        accessibilityLabel="close"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          {
+            "paddingLeft": 9,
+          }
+        }
+      />
+    </View>
+  </View>
+</View>
+`;
+
+exports[`BannerNotification Component should match snapshot with error status 1`] = `
+<View
+  accessibilityLabel="bannerTest"
+  accessible={true}
+>
+  <View
+    accessible={true}
+    style={
+      [
+        {
+          "alignItems": undefined,
+          "flexDirection": "row",
+          "justifyContent": undefined,
+        },
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        [
+          {
+            "alignItems": "flex-start",
+            "backgroundColor": "#DB2E2E",
+            "columnGap": 7,
+            "justifyContent": "space-between",
+            "marginVertical": 1,
+            "paddingHorizontal": 18,
+            "paddingVertical": 12,
+            "position": "relative",
+            "width": "100%",
+          },
+          {
+            "backgroundColor": "#DB2E2E",
+          },
+        ],
+        null,
+        null,
+      ]
+    }
+  >
+    <View
+      accessible={true}
+      style={
+        [
+          {
+            "alignItems": undefined,
+            "flexDirection": "column",
+            "justifyContent": undefined,
+          },
+          {
+            "flex": 1,
+          },
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+        ]
+      }
+    >
+      <Text
+        accessibilityLabel="bannerTestText"
+        style={
+          [
+            {
+              "color": "#000000",
+              "fontSize": 16,
+              "lineHeight": 18,
+            },
+            {
+              "fontFamily": "Inter_600SemiBold",
+              "fontSize": 15,
+            },
+            {
+              "color": "#FFFFFF",
+            },
+            {
+              "textAlign": "left",
+            },
+            null,
+            null,
+            {
+              "fontFamily": "Inter_600SemiBold",
+              "fontSize": 12,
+              "lineHeight": 15,
+              "padding": 1,
+              "textAlignVertical": "center",
+            },
+          ]
+        }
+      >
+        Test notification message
+      </Text>
+    </View>
+    <View
+      accessible={true}
+      style={
+        [
+          {
+            "alignItems": undefined,
+            "flexDirection": "column",
+            "justifyContent": undefined,
+          },
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+        ]
+      }
+    >
+      <View
+        accessibilityLabel="close"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          {
+            "paddingLeft": 9,
+          }
+        }
+      />
+    </View>
+  </View>
+</View>
+`;
+
+exports[`BannerNotification Component should match snapshot with in progress status 1`] = `
+<View
+  accessibilityLabel="bannerTest"
+  accessible={true}
+>
+  <View
+    accessible={true}
+    style={
+      [
+        {
+          "alignItems": undefined,
+          "flexDirection": "row",
+          "justifyContent": undefined,
+        },
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        [
+          {
+            "alignItems": "flex-start",
+            "backgroundColor": "#DB2E2E",
+            "columnGap": 7,
+            "justifyContent": "space-between",
+            "marginVertical": 1,
+            "paddingHorizontal": 18,
+            "paddingVertical": 12,
+            "position": "relative",
+            "width": "100%",
+          },
+          {
+            "backgroundColor": "#D9822B",
+          },
+        ],
+        null,
+        null,
+      ]
+    }
+  >
+    <View
+      accessible={true}
+      style={
+        [
+          {
+            "alignItems": undefined,
+            "flexDirection": "column",
+            "justifyContent": undefined,
+          },
+          {
+            "flex": 1,
+          },
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+        ]
+      }
+    >
+      <Text
+        accessibilityLabel="bannerTestText"
+        style={
+          [
+            {
+              "color": "#000000",
+              "fontSize": 16,
+              "lineHeight": 18,
+            },
+            {
+              "fontFamily": "Inter_600SemiBold",
+              "fontSize": 15,
+            },
+            {
+              "color": "#FFFFFF",
+            },
+            {
+              "textAlign": "left",
+            },
+            null,
+            null,
+            {
+              "fontFamily": "Inter_600SemiBold",
+              "fontSize": 12,
+              "lineHeight": 15,
+              "padding": 1,
+              "textAlignVertical": "center",
+            },
+          ]
+        }
+      >
+        Test notification message
+      </Text>
+    </View>
+    <View
+      accessible={true}
+      style={
+        [
+          {
+            "alignItems": undefined,
+            "flexDirection": "column",
+            "justifyContent": undefined,
+          },
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+        ]
+      }
+    >
+      <View
+        accessibilityLabel="close"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          {
+            "paddingLeft": 9,
+          }
+        }
+      />
+    </View>
+  </View>
+</View>
+`;
+
+exports[`BannerNotification Component should match snapshot with long message 1`] = `
+<View
+  accessibilityLabel="bannerTest"
+  accessible={true}
+>
+  <View
+    accessible={true}
+    style={
+      [
+        {
+          "alignItems": undefined,
+          "flexDirection": "row",
+          "justifyContent": undefined,
+        },
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        [
+          {
+            "alignItems": "flex-start",
+            "backgroundColor": "#DB2E2E",
+            "columnGap": 7,
+            "justifyContent": "space-between",
+            "marginVertical": 1,
+            "paddingHorizontal": 18,
+            "paddingVertical": 12,
+            "position": "relative",
+            "width": "100%",
+          },
+          {
+            "backgroundColor": "#4B9D20",
+          },
+        ],
+        null,
+        null,
+      ]
+    }
+  >
+    <View
+      accessible={true}
+      style={
+        [
+          {
+            "alignItems": undefined,
+            "flexDirection": "column",
+            "justifyContent": undefined,
+          },
+          {
+            "flex": 1,
+          },
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+        ]
+      }
+    >
+      <Text
+        accessibilityLabel="bannerTestText"
+        style={
+          [
+            {
+              "color": "#000000",
+              "fontSize": 16,
+              "lineHeight": 18,
+            },
+            {
+              "fontFamily": "Inter_600SemiBold",
+              "fontSize": 15,
+            },
+            {
+              "color": "#FFFFFF",
+            },
+            {
+              "textAlign": "left",
+            },
+            null,
+            null,
+            {
+              "fontFamily": "Inter_600SemiBold",
+              "fontSize": 12,
+              "lineHeight": 15,
+              "padding": 1,
+              "textAlignVertical": "center",
+            },
+          ]
+        }
+      >
+        This is a very long notification message that should wrap to multiple lines and still be displayed correctly
+      </Text>
+    </View>
+    <View
+      accessible={true}
+      style={
+        [
+          {
+            "alignItems": undefined,
+            "flexDirection": "column",
+            "justifyContent": undefined,
+          },
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+        ]
+      }
+    >
+      <View
+        accessibilityLabel="close"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          {
+            "paddingLeft": 9,
+          }
+        }
+      />
+    </View>
+  </View>
+</View>
+`;
+
+exports[`BannerNotification Component should match snapshot with success status 1`] = `
+<View
+  accessibilityLabel="bannerTest"
+  accessible={true}
+>
+  <View
+    accessible={true}
+    style={
+      [
+        {
+          "alignItems": undefined,
+          "flexDirection": "row",
+          "justifyContent": undefined,
+        },
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        [
+          {
+            "alignItems": "flex-start",
+            "backgroundColor": "#DB2E2E",
+            "columnGap": 7,
+            "justifyContent": "space-between",
+            "marginVertical": 1,
+            "paddingHorizontal": 18,
+            "paddingVertical": 12,
+            "position": "relative",
+            "width": "100%",
+          },
+          {
+            "backgroundColor": "#4B9D20",
+          },
+        ],
+        null,
+        null,
+      ]
+    }
+  >
+    <View
+      accessible={true}
+      style={
+        [
+          {
+            "alignItems": undefined,
+            "flexDirection": "column",
+            "justifyContent": undefined,
+          },
+          {
+            "flex": 1,
+          },
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+        ]
+      }
+    >
+      <Text
+        accessibilityLabel="bannerTestText"
+        style={
+          [
+            {
+              "color": "#000000",
+              "fontSize": 16,
+              "lineHeight": 18,
+            },
+            {
+              "fontFamily": "Inter_600SemiBold",
+              "fontSize": 15,
+            },
+            {
+              "color": "#FFFFFF",
+            },
+            {
+              "textAlign": "left",
+            },
+            null,
+            null,
+            {
+              "fontFamily": "Inter_600SemiBold",
+              "fontSize": 12,
+              "lineHeight": 15,
+              "padding": 1,
+              "textAlignVertical": "center",
+            },
+          ]
+        }
+      >
+        Test notification message
+      </Text>
+    </View>
+    <View
+      accessible={true}
+      style={
+        [
+          {
+            "alignItems": undefined,
+            "flexDirection": "column",
+            "justifyContent": undefined,
+          },
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+        ]
+      }
+    >
+      <View
+        accessibilityLabel="close"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          {
+            "paddingLeft": 9,
+          }
+        }
+      />
+    </View>
+  </View>
+</View>
+`;

components/__snapshots__/BannerNotificationContainer.test.tsx.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BannerNotificationContainer Component should match snapshot with no banners visible 1`] = `null`;
+
+exports[`BannerNotificationContainer Component should match snapshot with verification banner disabled 1`] = `null`;
+
+exports[`BannerNotificationContainer Component should match snapshot with verification banner enabled 1`] = `null`;

components/__snapshots__/CopilotTooltip.test.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CopilotTooltip Component should match snapshot with first step 1`] = `
+[
+  "Step 1 Title",
+  "Step 1 Description",
+  "1/5",
+]
+`;

components/__snapshots__/CopyButton.test.tsx.snap

@@ -0,0 +1,268 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CopyButton Component should match snapshot with default props 1`] = `
+<View
+  accessibilityLabel="clipboard.copyButton"
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={false}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+>
+  <View
+    accessible={true}
+    style={
+      [
+        {
+          "alignItems": undefined,
+          "flexDirection": "row",
+          "justifyContent": undefined,
+        },
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+      ]
+    }
+  >
+    <Text
+      accessibilityLabel="clipboard.copyText"
+      style={
+        [
+          {
+            "color": "#000000",
+            "fontSize": 16,
+            "lineHeight": 18,
+          },
+          {
+            "fontFamily": "Inter_600SemiBold",
+            "fontSize": 15,
+          },
+          null,
+          {
+            "textAlign": "center",
+          },
+          null,
+          null,
+          {
+            "maxWidth": 130,
+            "paddingTop": 0,
+          },
+        ]
+      }
+    >
+      clipboard.copy
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`CopyButton Component should match snapshot with long content 1`] = `
+<View
+  accessibilityLabel="clipboard.copyButton"
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={false}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+>
+  <View
+    accessible={true}
+    style={
+      [
+        {
+          "alignItems": undefined,
+          "flexDirection": "row",
+          "justifyContent": undefined,
+        },
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+      ]
+    }
+  >
+    <Text
+      accessibilityLabel="clipboard.copyText"
+      style={
+        [
+          {
+            "color": "#000000",
+            "fontSize": 16,
+            "lineHeight": 18,
+          },
+          {
+            "fontFamily": "Inter_600SemiBold",
+            "fontSize": 15,
+          },
+          null,
+          {
+            "textAlign": "center",
+          },
+          null,
+          null,
+          {
+            "maxWidth": 130,
+            "paddingTop": 0,
+          },
+        ]
+      }
+    >
+      clipboard.copy
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`CopyButton Component should match snapshot with special characters 1`] = `
+<View
+  accessibilityLabel="clipboard.copyButton"
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={false}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+>
+  <View
+    accessible={true}
+    style={
+      [
+        {
+          "alignItems": undefined,
+          "flexDirection": "row",
+          "justifyContent": undefined,
+        },
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+      ]
+    }
+  >
+    <Text
+      accessibilityLabel="clipboard.copyText"
+      style={
+        [
+          {
+            "color": "#000000",
+            "fontSize": 16,
+            "lineHeight": 18,
+          },
+          {
+            "fontFamily": "Inter_600SemiBold",
+            "fontSize": 15,
+          },
+          null,
+          {
+            "textAlign": "center",
+          },
+          null,
+          null,
+          {
+            "maxWidth": 130,
+            "paddingTop": 0,
+          },
+        ]
+      }
+    >
+      clipboard.copy
+    </Text>
+  </View>
+</View>
+`;

components/__snapshots__/DropdownIcon.test.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DropdownIcon Component should match snapshot with default props 1`] = `<View />`;
+
+exports[`DropdownIcon Component should match snapshot with different icon 1`] = `<View />`;
+
+exports[`DropdownIcon Component should match snapshot with empty items 1`] = `<View />`;
+
+exports[`DropdownIcon Component should match snapshot with multiple items 1`] = `<View />`;

components/__snapshots__/DualMessageOverlay.test.tsx.snap

@@ -0,0 +1,170 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DualMessageOverlay Component should match snapshot with both buttons 1`] = `
+[
+  "Confirm Action",
+  "Are you sure you want to proceed?",
+  <Text
+    style={
+      [
+        {
+          "color": "#000000",
+          "fontSize": 16,
+          "lineHeight": 18,
+        },
+        {
+          "fontFamily": "Inter_700Bold",
+          "fontSize": 15,
+          "justifyContent": "center",
+        },
+        {
+          "color": "#FFFFFF",
+        },
+        {
+          "textAlign": "left",
+        },
+        null,
+        null,
+        {
+          "paddingLeft": 0,
+        },
+      ]
+    }
+  >
+    tryAgain
+  </Text>,
+  <Text
+    style={
+      [
+        {
+          "color": "#000000",
+          "fontSize": 16,
+          "lineHeight": 18,
+        },
+        {
+          "fontFamily": "Inter_700Bold",
+          "fontSize": 15,
+          "justifyContent": "center",
+        },
+        {
+          "color": "#FFFFFF",
+        },
+        {
+          "textAlign": "left",
+        },
+        null,
+        null,
+        {
+          "paddingLeft": 0,
+        },
+      ]
+    }
+  >
+    ignore
+  </Text>,
+]
+`;
+
+exports[`DualMessageOverlay Component should match snapshot with children 1`] = `
+[
+  "Confirm Action",
+  "Are you sure you want to proceed?",
+  <Text>
+    Custom content here
+  </Text>,
+]
+`;
+
+exports[`DualMessageOverlay Component should match snapshot with custom height 1`] = `
+[
+  "Confirm Action",
+  "Are you sure you want to proceed?",
+]
+`;
+
+exports[`DualMessageOverlay Component should match snapshot with hint text 1`] = `
+[
+  "Confirm Action",
+  "Are you sure you want to proceed?",
+  "Additional information",
+]
+`;
+
+exports[`DualMessageOverlay Component should match snapshot with only ignore button 1`] = `
+[
+  "Confirm Action",
+  "Are you sure you want to proceed?",
+  <Text
+    style={
+      [
+        {
+          "color": "#000000",
+          "fontSize": 16,
+          "lineHeight": 18,
+        },
+        {
+          "fontFamily": "Inter_700Bold",
+          "fontSize": 15,
+          "justifyContent": "center",
+        },
+        {
+          "color": "#FFFFFF",
+        },
+        {
+          "textAlign": "left",
+        },
+        null,
+        null,
+        {
+          "paddingLeft": 0,
+        },
+      ]
+    }
+  >
+    ignore
+  </Text>,
+]
+`;
+
+exports[`DualMessageOverlay Component should match snapshot with only try again button 1`] = `
+[
+  "Confirm Action",
+  "Are you sure you want to proceed?",
+  <Text
+    style={
+      [
+        {
+          "color": "#000000",
+          "fontSize": 16,
+          "lineHeight": 18,
+        },
+        {
+          "fontFamily": "Inter_700Bold",
+          "fontSize": 15,
+          "justifyContent": "center",
+        },
+        {
+          "color": "#FFFFFF",
+        },
+        {
+          "textAlign": "left",
+        },
+        null,
+        null,
+        {
+          "paddingLeft": 0,
+        },
+      ]
+    }
+  >
+    tryAgain
+  </Text>,
+]
+`;
+
+exports[`DualMessageOverlay Component should match snapshot with title and message 1`] = `
+[
+  "Confirm Action",
+  "Are you sure you want to proceed?",
+]
+`;

components/__snapshots__/EditableListItem.test.tsx.snap

@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EditableListItem Component should match snapshot with custom title color 1`] = `
+[
+  "Contact Information",
+  "Edit your details",
+  "editLabel",
+  "editLabel",
+]
+`;
+
+exports[`EditableListItem Component should match snapshot with default props 1`] = `
+[
+  "Contact Information",
+  "Edit your details",
+  "editLabel",
+  "editLabel",
+]
+`;
+
+exports[`EditableListItem Component should match snapshot with error state 1`] = `
+[
+  "Contact Information",
+  "Edit your details",
+  "editLabel",
+  "Failed to update",
+  "editLabel",
+]
+`;
+
+exports[`EditableListItem Component should match snapshot with progress indicator 1`] = `
+[
+  "Contact Information",
+  "Edit your details",
+  "editLabel",
+  "editLabel",
+]
+`;
+
+exports[`EditableListItem Component should match snapshot with single item 1`] = `
+[
+  "Contact Information",
+  "Edit your details",
+  "editLabel",
+]
+`;
+
+exports[`EditableListItem Component should match snapshot with success response 1`] = `
+[
+  "Contact Information",
+  "Edit your details",
+  "editLabel",
+  "editLabel",
+]
+`;

components/__snapshots__/GlobalContextProvider.test.tsx.snap

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GlobalContextProvider Component should match snapshot with children 1`] = `
+<Text>
+  Test Child
+</Text>
+`;
+
+exports[`GlobalContextProvider Component should match snapshot with multiple children 1`] = `
+[
+  <Text>
+    Child 1
+  </Text>,
+  <Text>
+    Child 2
+  </Text>,
+]
+`;

components/__snapshots__/LanguageSelector.test.tsx.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LanguageSelector Component should match snapshot with custom trigger component 1`] = `<View />`;
+
+exports[`LanguageSelector Component should match snapshot with default trigger 1`] = `<View />`;

components/__snapshots__/Message.test.tsx.snap

@@ -0,0 +1,88 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Message Component should match snapshot with cancel button 1`] = `
+<View
+  style={
+    {
+      "backgroundColor": "rgba(0,0,0,.6)",
+      "height": 1334,
+      "position": "absolute",
+      "top": 0,
+      "width": 750,
+      "zIndex": 9,
+    }
+  }
+>
+  Test
+</View>
+`;
+
+exports[`Message Component should match snapshot with hint text 1`] = `
+<View
+  style={
+    {
+      "backgroundColor": "rgba(0,0,0,.6)",
+      "height": 1334,
+      "position": "absolute",
+      "top": 0,
+      "width": 750,
+      "zIndex": 9,
+    }
+  }
+>
+  Test
+  Hint text
+</View>
+`;
+
+exports[`Message Component should match snapshot with message only 1`] = `
+<View
+  style={
+    {
+      "backgroundColor": "rgba(0,0,0,.6)",
+      "height": 1334,
+      "position": "absolute",
+      "top": 0,
+      "width": 750,
+      "zIndex": 9,
+    }
+  }
+>
+  Test Message
+</View>
+`;
+
+exports[`Message Component should match snapshot with title and message 1`] = `
+<View
+  style={
+    {
+      "backgroundColor": "rgba(0,0,0,.6)",
+      "height": 1334,
+      "position": "absolute",
+      "top": 0,
+      "width": 750,
+      "zIndex": 9,
+    }
+  }
+>
+  Title
+  Message
+</View>
+`;
+
+exports[`Message Component should match snapshot with title only 1`] = `
+<View
+  style={
+    {
+      "backgroundColor": "rgba(0,0,0,.6)",
+      "height": 1334,
+      "position": "absolute",
+      "top": 0,
+      "width": 750,
+      "zIndex": 9,
+    }
+  }
+>
+  Test Title
+</View>
+`;

components/__snapshots__/MessageOverlay.test.tsx.snap

@@ -0,0 +1,68 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ErrorMessageOverlay Component should match snapshot with error 1`] = `
+[
+  "network.title",
+  "network.message",
+]
+`;
+
+exports[`ErrorMessageOverlay Component should match snapshot with testID 1`] = `
+[
+  "network.title",
+  "network.message",
+]
+`;
+
+exports[`MessageOverlay Component should match snapshot with button 1`] = `
+[
+  "Test Title",
+  "Test Message",
+]
+`;
+
+exports[`MessageOverlay Component should match snapshot with custom children 1`] = `
+[
+  "Test Title",
+  "Test Message",
+  <Text>
+    Custom Content
+  </Text>,
+]
+`;
+
+exports[`MessageOverlay Component should match snapshot with custom minHeight 1`] = `
+[
+  "Test Title",
+  "Test Message",
+]
+`;
+
+exports[`MessageOverlay Component should match snapshot with hint text 1`] = `
+[
+  "Test Title",
+  "Test Message",
+  "This is a hint",
+]
+`;
+
+exports[`MessageOverlay Component should match snapshot with numeric progress 1`] = `
+[
+  "Test Title",
+  "Test Message",
+]
+`;
+
+exports[`MessageOverlay Component should match snapshot with progress indicator 1`] = `
+[
+  "Test Title",
+  "Test Message",
+]
+`;
+
+exports[`MessageOverlay Component should match snapshot with title and message 1`] = `
+[
+  "Test Title",
+  "Test Message",
+]
+`;

components/__snapshots__/Passcode.test.tsx.snap

@@ -0,0 +1,629 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Passcode Component should match snapshot with both message and error 1`] = `
+<Modal
+  animationType="slide"
+  hardwareAccelerated={false}
+  onRequestClose={[MockFunction]}
+  style={
+    {
+      "height": 1334,
+      "width": 750,
+    }
+  }
+  visible={true}
+>
+  <View
+    accessible={true}
+    style={
+      [
+        {
+          "alignItems": undefined,
+          "flexDirection": "column",
+          "justifyContent": undefined,
+        },
+        {
+          "flex": 1,
+        },
+        {
+          "paddingBottom": 32,
+          "paddingEnd": 32,
+          "paddingStart": 32,
+          "paddingTop": 32,
+        },
+        null,
+        {
+          "backgroundColor": "#FFFFFF",
+        },
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+      ]
+    }
+  >
+    <View
+      accessible={true}
+      style={
+        [
+          {
+            "alignItems": undefined,
+            "flexDirection": "column",
+            "justifyContent": undefined,
+          },
+          {
+            "flex": 1,
+          },
+          null,
+          null,
+          null,
+          {
+            "width": "100%",
+          },
+          null,
+          {
+            "justifyContent": "space-between",
+          },
+          null,
+          null,
+          null,
+          null,
+          null,
+        ]
+      }
+    >
+      <Text
+        style={
+          [
+            {
+              "color": "#000000",
+              "fontSize": 16,
+              "lineHeight": 18,
+            },
+            {
+              "fontFamily": "Inter_400Regular",
+              "fontSize": 14,
+            },
+            null,
+            {
+              "textAlign": "center",
+            },
+            null,
+            null,
+            null,
+          ]
+        }
+      >
+        Enter passcode
+      </Text>
+    </View>
+    <View
+      accessible={true}
+      style={
+        [
+          {
+            "alignItems": undefined,
+            "flexDirection": "column",
+            "justifyContent": undefined,
+          },
+          {
+            "flex": 1,
+          },
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+        ]
+      }
+    >
+      <Text
+        style={
+          [
+            {
+              "color": "#000000",
+              "fontSize": 16,
+              "lineHeight": 18,
+            },
+            {
+              "fontFamily": "Inter_400Regular",
+              "fontSize": 14,
+            },
+            {
+              "color": "#D52929",
+            },
+            {
+              "textAlign": "center",
+            },
+            null,
+            null,
+            null,
+          ]
+        }
+      >
+        Authentication failed
+      </Text>
+    </View>
+  </View>
+</Modal>
+`;
+
+exports[`Passcode Component should match snapshot with custom message 1`] = `
+<Modal
+  animationType="slide"
+  hardwareAccelerated={false}
+  onRequestClose={[MockFunction]}
+  style={
+    {
+      "height": 1334,
+      "width": 750,
+    }
+  }
+  visible={true}
+>
+  <View
+    accessible={true}
+    style={
+      [
+        {
+          "alignItems": undefined,
+          "flexDirection": "column",
+          "justifyContent": undefined,
+        },
+        {
+          "flex": 1,
+        },
+        {
+          "paddingBottom": 32,
+          "paddingEnd": 32,
+          "paddingStart": 32,
+          "paddingTop": 32,
+        },
+        null,
+        {
+          "backgroundColor": "#FFFFFF",
+        },
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+      ]
+    }
+  >
+    <View
+      accessible={true}
+      style={
+        [
+          {
+            "alignItems": undefined,
+            "flexDirection": "column",
+            "justifyContent": undefined,
+          },
+          {
+            "flex": 1,
+          },
+          null,
+          null,
+          null,
+          {
+            "width": "100%",
+          },
+          null,
+          {
+            "justifyContent": "space-between",
+          },
+          null,
+          null,
+          null,
+          null,
+          null,
+        ]
+      }
+    >
+      <Text
+        style={
+          [
+            {
+              "color": "#000000",
+              "fontSize": 16,
+              "lineHeight": 18,
+            },
+            {
+              "fontFamily": "Inter_400Regular",
+              "fontSize": 14,
+            },
+            null,
+            {
+              "textAlign": "center",
+            },
+            null,
+            null,
+            null,
+          ]
+        }
+      >
+        Please enter your 6-digit passcode
+      </Text>
+    </View>
+    <View
+      accessible={true}
+      style={
+        [
+          {
+            "alignItems": undefined,
+            "flexDirection": "column",
+            "justifyContent": undefined,
+          },
+          {
+            "flex": 1,
+          },
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+        ]
+      }
+    >
+      <Text
+        style={
+          [
+            {
+              "color": "#000000",
+              "fontSize": 16,
+              "lineHeight": 18,
+            },
+            {
+              "fontFamily": "Inter_400Regular",
+              "fontSize": 14,
+            },
+            {
+              "color": "#D52929",
+            },
+            {
+              "textAlign": "center",
+            },
+            null,
+            null,
+            null,
+          ]
+        }
+      />
+    </View>
+  </View>
+</Modal>
+`;
+
+exports[`Passcode Component should match snapshot with default props 1`] = `
+<Modal
+  animationType="slide"
+  hardwareAccelerated={false}
+  onRequestClose={[MockFunction]}
+  style={
+    {
+      "height": 1334,
+      "width": 750,
+    }
+  }
+  visible={true}
+>
+  <View
+    accessible={true}
+    style={
+      [
+        {
+          "alignItems": undefined,
+          "flexDirection": "column",
+          "justifyContent": undefined,
+        },
+        {
+          "flex": 1,
+        },
+        {
+          "paddingBottom": 32,
+          "paddingEnd": 32,
+          "paddingStart": 32,
+          "paddingTop": 32,
+        },
+        null,
+        {
+          "backgroundColor": "#FFFFFF",
+        },
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+      ]
+    }
+  >
+    <View
+      accessible={true}
+      style={
+        [
+          {
+            "alignItems": undefined,
+            "flexDirection": "column",
+            "justifyContent": undefined,
+          },
+          {
+            "flex": 1,
+          },
+          null,
+          null,
+          null,
+          {
+            "width": "100%",
+          },
+          null,
+          {
+            "justifyContent": "space-between",
+          },
+          null,
+          null,
+          null,
+          null,
+          null,
+        ]
+      }
+    >
+      <Text
+        style={
+          [
+            {
+              "color": "#000000",
+              "fontSize": 16,
+              "lineHeight": 18,
+            },
+            {
+              "fontFamily": "Inter_400Regular",
+              "fontSize": 14,
+            },
+            null,
+            {
+              "textAlign": "center",
+            },
+            null,
+            null,
+            null,
+          ]
+        }
+      >
+        Enter your passcode
+      </Text>
+    </View>
+    <View
+      accessible={true}
+      style={
+        [
+          {
+            "alignItems": undefined,
+            "flexDirection": "column",
+            "justifyContent": undefined,
+          },
+          {
+            "flex": 1,
+          },
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+        ]
+      }
+    >
+      <Text
+        style={
+          [
+            {
+              "color": "#000000",
+              "fontSize": 16,
+              "lineHeight": 18,
+            },
+            {
+              "fontFamily": "Inter_400Regular",
+              "fontSize": 14,
+            },
+            {
+              "color": "#D52929",
+            },
+            {
+              "textAlign": "center",
+            },
+            null,
+            null,
+            null,
+          ]
+        }
+      />
+    </View>
+  </View>
+</Modal>
+`;
+
+exports[`Passcode Component should match snapshot with error message 1`] = `
+<Modal
+  animationType="slide"
+  hardwareAccelerated={false}
+  onRequestClose={[MockFunction]}
+  style={
+    {
+      "height": 1334,
+      "width": 750,
+    }
+  }
+  visible={true}
+>
+  <View
+    accessible={true}
+    style={
+      [
+        {
+          "alignItems": undefined,
+          "flexDirection": "column",
+          "justifyContent": undefined,
+        },
+        {
+          "flex": 1,
+        },
+        {
+          "paddingBottom": 32,
+          "paddingEnd": 32,
+          "paddingStart": 32,
+          "paddingTop": 32,
+        },
+        null,
+        {
+          "backgroundColor": "#FFFFFF",
+        },
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+        null,
+      ]
+    }
+  >
+    <View
+      accessible={true}
+      style={
+        [
+          {
+            "alignItems": undefined,
+            "flexDirection": "column",
+            "justifyContent": undefined,
+          },
+          {
+            "flex": 1,
+          },
+          null,
+          null,
+          null,
+          {
+            "width": "100%",
+          },
+          null,
+          {
+            "justifyContent": "space-between",
+          },
+          null,
+          null,
+          null,
+          null,
+          null,
+        ]
+      }
+    >
+      <Text
+        style={
+          [
+            {
+              "color": "#000000",
+              "fontSize": 16,
+              "lineHeight": 18,
+            },
+            {
+              "fontFamily": "Inter_400Regular",
+              "fontSize": 14,
+            },
+            null,
+            {
+              "textAlign": "center",
+            },
+            null,
+            null,
+            null,
+          ]
+        }
+      >
+        Enter your passcode
+      </Text>
+    </View>
+    <View
+      accessible={true}
+      style={
+        [
+          {
+            "alignItems": undefined,
+            "flexDirection": "column",
+            "justifyContent": undefined,
+          },
+          {
+            "flex": 1,
+          },
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+          null,
+        ]
+      }
+    >
+      <Text
+        style={
+          [
+            {
+              "color": "#000000",
+              "fontSize": 16,
+              "lineHeight": 18,
+            },
+            {
+              "fontFamily": "Inter_400Regular",
+              "fontSize": 14,
+            },
+            {
+              "color": "#D52929",
+            },
+            {
+              "textAlign": "center",
+            },
+            null,
+            null,
+            null,
+          ]
+        }
+      >
+        Incorrect passcode. Try again.
+      </Text>
+    </View>
+  </View>
+</Modal>
+`;

components/__snapshots__/PasscodeVerify.test.tsx.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PasscodeVerify Component should match snapshot with default props 1`] = `null`;
+
+exports[`PasscodeVerify Component should match snapshot with different testID 1`] = `null`;
+
+exports[`PasscodeVerify Component should match snapshot without onError handler 1`] = `null`;

components/__snapshots__/PendingIcon.test.tsx.snap

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PendingIcon should match snapshot 1`] = `
+<View
+  style={
+    {
+      "marginRight": 3,
+    }
+  }
+>
+  <View
+    style={
+      {
+        "backgroundColor": "white",
+        "borderRadius": 10,
+      }
+    }
+  />
+</View>
+`;
+
+exports[`PendingIcon should render with custom color 1`] = `
+<View
+  style={
+    {
+      "marginRight": 3,
+    }
+  }
+>
+  <View
+    style={
+      {
+        "backgroundColor": "white",
+        "borderRadius": 10,
+      }
+    }
+  />
+</View>
+`;

components/__snapshots__/PinInput.test.tsx.snap

@@ -0,0 +1,719 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PinInput Component should match snapshot with 4 digit PIN 1`] = `
+<View
+  accessible={true}
+  style={
+    [
+      {
+        "alignItems": undefined,
+        "flexDirection": "row",
+        "justifyContent": undefined,
+      },
+      null,
+      null,
+      null,
+      null,
+      {
+        "width": "66.66666666666667%",
+      },
+      null,
+      null,
+      null,
+      null,
+      null,
+      null,
+      null,
+    ]
+  }
+>
+  <TextInput
+    contextMenuHidden={true}
+    keyboardType="numeric"
+    maxLength={1}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    onKeyPress={[Function]}
+    secureTextEntry={true}
+    selectTextOnFocus={true}
+    selectionColor="#951F6F"
+    style={
+      {
+        "borderBottomWidth": 3,
+        "borderColor": "#951F6F",
+        "color": "#000000",
+        "flex": 1,
+        "fontFamily": "Inter_700Bold",
+        "fontSize": 29,
+        "height": 50,
+        "margin": 8,
+        "textAlign": "center",
+      }
+    }
+    value=""
+  />
+  <TextInput
+    contextMenuHidden={true}
+    keyboardType="numeric"
+    maxLength={1}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    onKeyPress={[Function]}
+    secureTextEntry={true}
+    selectTextOnFocus={true}
+    selectionColor="#951F6F"
+    style={
+      {
+        "borderBottomWidth": 3,
+        "borderColor": "#C7C7C7",
+        "color": "#000000",
+        "flex": 1,
+        "fontFamily": "Inter_600SemiBold",
+        "fontSize": 33,
+        "height": 50,
+        "lineHeight": 28,
+        "margin": 8,
+        "textAlign": "center",
+      }
+    }
+    value=""
+  />
+  <TextInput
+    contextMenuHidden={true}
+    keyboardType="numeric"
+    maxLength={1}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    onKeyPress={[Function]}
+    secureTextEntry={true}
+    selectTextOnFocus={true}
+    selectionColor="#951F6F"
+    style={
+      {
+        "borderBottomWidth": 3,
+        "borderColor": "#C7C7C7",
+        "color": "#000000",
+        "flex": 1,
+        "fontFamily": "Inter_600SemiBold",
+        "fontSize": 33,
+        "height": 50,
+        "lineHeight": 28,
+        "margin": 8,
+        "textAlign": "center",
+      }
+    }
+    value=""
+  />
+  <TextInput
+    contextMenuHidden={true}
+    keyboardType="numeric"
+    maxLength={1}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    onKeyPress={[Function]}
+    secureTextEntry={true}
+    selectTextOnFocus={true}
+    selectionColor="#951F6F"
+    style={
+      {
+        "borderBottomWidth": 3,
+        "borderColor": "#C7C7C7",
+        "color": "#000000",
+        "flex": 1,
+        "fontFamily": "Inter_600SemiBold",
+        "fontSize": 33,
+        "height": 50,
+        "lineHeight": 28,
+        "margin": 8,
+        "textAlign": "center",
+      }
+    }
+    value=""
+  />
+</View>
+`;
+
+exports[`PinInput Component should match snapshot with 6 digit PIN 1`] = `
+<View
+  accessible={true}
+  style={
+    [
+      {
+        "alignItems": undefined,
+        "flexDirection": "row",
+        "justifyContent": undefined,
+      },
+      null,
+      null,
+      null,
+      null,
+      {
+        "width": "100%",
+      },
+      null,
+      null,
+      null,
+      null,
+      null,
+      null,
+      null,
+    ]
+  }
+>
+  <TextInput
+    contextMenuHidden={true}
+    keyboardType="numeric"
+    maxLength={1}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    onKeyPress={[Function]}
+    secureTextEntry={true}
+    selectTextOnFocus={true}
+    selectionColor="#951F6F"
+    style={
+      {
+        "borderBottomWidth": 3,
+        "borderColor": "#951F6F",
+        "color": "#000000",
+        "flex": 1,
+        "fontFamily": "Inter_700Bold",
+        "fontSize": 29,
+        "height": 50,
+        "margin": 8,
+        "textAlign": "center",
+      }
+    }
+    value=""
+  />
+  <TextInput
+    contextMenuHidden={true}
+    keyboardType="numeric"
+    maxLength={1}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    onKeyPress={[Function]}
+    secureTextEntry={true}
+    selectTextOnFocus={true}
+    selectionColor="#951F6F"
+    style={
+      {
+        "borderBottomWidth": 3,
+        "borderColor": "#C7C7C7",
+        "color": "#000000",
+        "flex": 1,
+        "fontFamily": "Inter_600SemiBold",
+        "fontSize": 33,
+        "height": 50,
+        "lineHeight": 28,
+        "margin": 8,
+        "textAlign": "center",
+      }
+    }
+    value=""
+  />
+  <TextInput
+    contextMenuHidden={true}
+    keyboardType="numeric"
+    maxLength={1}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    onKeyPress={[Function]}
+    secureTextEntry={true}
+    selectTextOnFocus={true}
+    selectionColor="#951F6F"
+    style={
+      {
+        "borderBottomWidth": 3,
+        "borderColor": "#C7C7C7",
+        "color": "#000000",
+        "flex": 1,
+        "fontFamily": "Inter_600SemiBold",
+        "fontSize": 33,
+        "height": 50,
+        "lineHeight": 28,
+        "margin": 8,
+        "textAlign": "center",
+      }
+    }
+    value=""
+  />
+  <TextInput
+    contextMenuHidden={true}
+    keyboardType="numeric"
+    maxLength={1}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    onKeyPress={[Function]}
+    secureTextEntry={true}
+    selectTextOnFocus={true}
+    selectionColor="#951F6F"
+    style={
+      {
+        "borderBottomWidth": 3,
+        "borderColor": "#C7C7C7",
+        "color": "#000000",
+        "flex": 1,
+        "fontFamily": "Inter_600SemiBold",
+        "fontSize": 33,
+        "height": 50,
+        "lineHeight": 28,
+        "margin": 8,
+        "textAlign": "center",
+      }
+    }
+    value=""
+  />
+  <TextInput
+    contextMenuHidden={true}
+    keyboardType="numeric"
+    maxLength={1}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    onKeyPress={[Function]}
+    secureTextEntry={true}
+    selectTextOnFocus={true}
+    selectionColor="#951F6F"
+    style={
+      {
+        "borderBottomWidth": 3,
+        "borderColor": "#C7C7C7",
+        "color": "#000000",
+        "flex": 1,
+        "fontFamily": "Inter_600SemiBold",
+        "fontSize": 33,
+        "height": 50,
+        "lineHeight": 28,
+        "margin": 8,
+        "textAlign": "center",
+      }
+    }
+    value=""
+  />
+  <TextInput
+    contextMenuHidden={true}
+    keyboardType="numeric"
+    maxLength={1}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    onKeyPress={[Function]}
+    secureTextEntry={true}
+    selectTextOnFocus={true}
+    selectionColor="#951F6F"
+    style={
+      {
+        "borderBottomWidth": 3,
+        "borderColor": "#C7C7C7",
+        "color": "#000000",
+        "flex": 1,
+        "fontFamily": "Inter_600SemiBold",
+        "fontSize": 33,
+        "height": 50,
+        "lineHeight": 28,
+        "margin": 8,
+        "textAlign": "center",
+      }
+    }
+    value=""
+  />
+</View>
+`;
+
+exports[`PinInput Component should match snapshot with custom testID 1`] = `
+<View
+  accessibilityLabel="customPinInput"
+  accessible={true}
+  style={
+    [
+      {
+        "alignItems": undefined,
+        "flexDirection": "row",
+        "justifyContent": undefined,
+      },
+      null,
+      null,
+      null,
+      null,
+      {
+        "width": "66.66666666666667%",
+      },
+      null,
+      null,
+      null,
+      null,
+      null,
+      null,
+      null,
+    ]
+  }
+>
+  <TextInput
+    contextMenuHidden={true}
+    keyboardType="numeric"
+    maxLength={1}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    onKeyPress={[Function]}
+    secureTextEntry={true}
+    selectTextOnFocus={true}
+    selectionColor="#951F6F"
+    style={
+      {
+        "borderBottomWidth": 3,
+        "borderColor": "#951F6F",
+        "color": "#000000",
+        "flex": 1,
+        "fontFamily": "Inter_700Bold",
+        "fontSize": 29,
+        "height": 50,
+        "margin": 8,
+        "textAlign": "center",
+      }
+    }
+    value=""
+  />
+  <TextInput
+    contextMenuHidden={true}
+    keyboardType="numeric"
+    maxLength={1}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    onKeyPress={[Function]}
+    secureTextEntry={true}
+    selectTextOnFocus={true}
+    selectionColor="#951F6F"
+    style={
+      {
+        "borderBottomWidth": 3,
+        "borderColor": "#C7C7C7",
+        "color": "#000000",
+        "flex": 1,
+        "fontFamily": "Inter_600SemiBold",
+        "fontSize": 33,
+        "height": 50,
+        "lineHeight": 28,
+        "margin": 8,
+        "textAlign": "center",
+      }
+    }
+    value=""
+  />
+  <TextInput
+    contextMenuHidden={true}
+    keyboardType="numeric"
+    maxLength={1}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    onKeyPress={[Function]}
+    secureTextEntry={true}
+    selectTextOnFocus={true}
+    selectionColor="#951F6F"
+    style={
+      {
+        "borderBottomWidth": 3,
+        "borderColor": "#C7C7C7",
+        "color": "#000000",
+        "flex": 1,
+        "fontFamily": "Inter_600SemiBold",
+        "fontSize": 33,
+        "height": 50,
+        "lineHeight": 28,
+        "margin": 8,
+        "textAlign": "center",
+      }
+    }
+    value=""
+  />
+  <TextInput
+    contextMenuHidden={true}
+    keyboardType="numeric"
+    maxLength={1}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    onKeyPress={[Function]}
+    secureTextEntry={true}
+    selectTextOnFocus={true}
+    selectionColor="#951F6F"
+    style={
+      {
+        "borderBottomWidth": 3,
+        "borderColor": "#C7C7C7",
+        "color": "#000000",
+        "flex": 1,
+        "fontFamily": "Inter_600SemiBold",
+        "fontSize": 33,
+        "height": 50,
+        "lineHeight": 28,
+        "margin": 8,
+        "textAlign": "center",
+      }
+    }
+    value=""
+  />
+</View>
+`;
+
+exports[`PinInput Component should match snapshot with onChange handler 1`] = `
+<View
+  accessible={true}
+  style={
+    [
+      {
+        "alignItems": undefined,
+        "flexDirection": "row",
+        "justifyContent": undefined,
+      },
+      null,
+      null,
+      null,
+      null,
+      {
+        "width": "66.66666666666667%",
+      },
+      null,
+      null,
+      null,
+      null,
+      null,
+      null,
+      null,
+    ]
+  }
+>
+  <TextInput
+    contextMenuHidden={true}
+    keyboardType="numeric"
+    maxLength={1}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    onKeyPress={[Function]}
+    secureTextEntry={true}
+    selectTextOnFocus={true}
+    selectionColor="#951F6F"
+    style={
+      {
+        "borderBottomWidth": 3,
+        "borderColor": "#951F6F",
+        "color": "#000000",
+        "flex": 1,
+        "fontFamily": "Inter_700Bold",
+        "fontSize": 29,
+        "height": 50,
+        "margin": 8,
+        "textAlign": "center",
+      }
+    }
+    value=""
+  />
+  <TextInput
+    contextMenuHidden={true}
+    keyboardType="numeric"
+    maxLength={1}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    onKeyPress={[Function]}
+    secureTextEntry={true}
+    selectTextOnFocus={true}
+    selectionColor="#951F6F"
+    style={
+      {
+        "borderBottomWidth": 3,
+        "borderColor": "#C7C7C7",
+        "color": "#000000",
+        "flex": 1,
+        "fontFamily": "Inter_600SemiBold",
+        "fontSize": 33,
+        "height": 50,
+        "lineHeight": 28,
+        "margin": 8,
+        "textAlign": "center",
+      }
+    }
+    value=""
+  />
+  <TextInput
+    contextMenuHidden={true}
+    keyboardType="numeric"
+    maxLength={1}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    onKeyPress={[Function]}
+    secureTextEntry={true}
+    selectTextOnFocus={true}
+    selectionColor="#951F6F"
+    style={
+      {
+        "borderBottomWidth": 3,
+        "borderColor": "#C7C7C7",
+        "color": "#000000",
+        "flex": 1,
+        "fontFamily": "Inter_600SemiBold",
+        "fontSize": 33,
+        "height": 50,
+        "lineHeight": 28,
+        "margin": 8,
+        "textAlign": "center",
+      }
+    }
+    value=""
+  />
+  <TextInput
+    contextMenuHidden={true}
+    keyboardType="numeric"
+    maxLength={1}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    onKeyPress={[Function]}
+    secureTextEntry={true}
+    selectTextOnFocus={true}
+    selectionColor="#951F6F"
+    style={
+      {
+        "borderBottomWidth": 3,
+        "borderColor": "#C7C7C7",
+        "color": "#000000",
+        "flex": 1,
+        "fontFamily": "Inter_600SemiBold",
+        "fontSize": 33,
+        "height": 50,
+        "lineHeight": 28,
+        "margin": 8,
+        "textAlign": "center",
+      }
+    }
+    value=""
+  />
+</View>
+`;
+
+exports[`PinInput Component should match snapshot with onDone and autosubmit 1`] = `
+<View
+  accessible={true}
+  style={
+    [
+      {
+        "alignItems": undefined,
+        "flexDirection": "row",
+        "justifyContent": undefined,
+      },
+      null,
+      null,
+      null,
+      null,
+      {
+        "width": "66.66666666666667%",
+      },
+      null,
+      null,
+      null,
+      null,
+      null,
+      null,
+      null,
+    ]
+  }
+>
+  <TextInput
+    contextMenuHidden={true}
+    keyboardType="numeric"
+    maxLength={1}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    onKeyPress={[Function]}
+    secureTextEntry={true}
+    selectTextOnFocus={true}
+    selectionColor="#951F6F"
+    style={
+      {
+        "borderBottomWidth": 3,
+        "borderColor": "#951F6F",
+        "color": "#000000",
+        "flex": 1,
+        "fontFamily": "Inter_700Bold",
+        "fontSize": 29,
+        "height": 50,
+        "margin": 8,
+        "textAlign": "center",
+      }
+    }
+    value=""
+  />
+  <TextInput
+    contextMenuHidden={true}
+    keyboardType="numeric"
+    maxLength={1}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    onKeyPress={[Function]}
+    secureTextEntry={true}
+    selectTextOnFocus={true}
+    selectionColor="#951F6F"
+    style={
+      {
+        "borderBottomWidth": 3,
+        "borderColor": "#C7C7C7",
+        "color": "#000000",
+        "flex": 1,
+        "fontFamily": "Inter_600SemiBold",
+        "fontSize": 33,
+        "height": 50,
+        "lineHeight": 28,
+        "margin": 8,
+        "textAlign": "center",
+      }
+    }
+    value=""
+  />
+  <TextInput
+    contextMenuHidden={true}
+    keyboardType="numeric"
+    maxLength={1}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    onKeyPress={[Function]}
+    secureTextEntry={true}
+    selectTextOnFocus={true}
+    selectionColor="#951F6F"
+    style={
+      {
+        "borderBottomWidth": 3,
+        "borderColor": "#C7C7C7",
+        "color": "#000000",
+        "flex": 1,
+        "fontFamily": "Inter_600SemiBold",
+        "fontSize": 33,
+        "height": 50,
+        "lineHeight": 28,
+        "margin": 8,
+        "textAlign": "center",
+      }
+    }
+    value=""
+  />
+  <TextInput
+    contextMenuHidden={true}
+    keyboardType="numeric"
+    maxLength={1}
+    onChangeText={[Function]}
+    onFocus={[Function]}
+    onKeyPress={[Function]}
+    secureTextEntry={true}
+    selectTextOnFocus={true}
+    selectionColor="#951F6F"
+    style={
+      {
+        "borderBottomWidth": 3,
+        "borderColor": "#C7C7C7",
+        "color": "#000000",
+        "flex": 1,
+        "fontFamily": "Inter_600SemiBold",
+        "fontSize": 33,
+        "height": 50,
+        "lineHeight": 28,
+        "margin": 8,
+        "textAlign": "center",
+      }
+    }
+    value=""
+  />
+</View>
+`;

components/__snapshots__/ProfileIcon.test.tsx.snap

@@ -0,0 +1,82 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ProfileIcon Component should match snapshot with custom container styles 1`] = `
+<View
+  accessibilityLabel="ProfileIconOuter"
+  accessible={true}
+  style={
+    {
+      "position": "relative",
+    }
+  }
+>
+  <View
+    accessibilityLabel="ProfileIconInner"
+    accessible={true}
+    style={
+      {
+        "backgroundColor": "blue",
+        "borderRadius": 10,
+        "padding": 5,
+      }
+    }
+  />
+</View>
+`;
+
+exports[`ProfileIcon Component should match snapshot with custom icon size 1`] = `
+<View
+  accessibilityLabel="ProfileIconOuter"
+  accessible={true}
+  style={
+    {
+      "position": "relative",
+    }
+  }
+>
+  <View
+    accessibilityLabel="ProfileIconInner"
+    accessible={true}
+    style={{}}
+  />
+</View>
+`;
+
+exports[`ProfileIcon Component should match snapshot with pinned icon 1`] = `
+<View
+  accessibilityLabel="ProfileIconOuter"
+  accessible={true}
+  style={
+    {
+      "position": "relative",
+    }
+  }
+>
+  <View
+    accessibilityLabel="ProfileIconInner"
+    accessible={true}
+    style={{}}
+  />
+  <View
+    testID="mockPinIcon"
+  />
+</View>
+`;
+
+exports[`ProfileIcon Component should match snapshot without pinned icon 1`] = `
+<View
+  accessibilityLabel="ProfileIconOuter"
+  accessible={true}
+  style={
+    {
+      "position": "relative",
+    }
+  }
+>
+  <View
+    accessibilityLabel="ProfileIconInner"
+    accessible={true}
+    style={{}}
+  />
+</View>
+`;

components/__snapshots__/ProgressingModal.test.tsx.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ProgressingModal Component should match snapshot as requester 1`] = `null`;
+
+exports[`ProgressingModal Component should match snapshot with BLE error visible 1`] = `"Bluetooth error occurred"`;
+
+exports[`ProgressingModal Component should match snapshot with default props 1`] = `null`;
+
+exports[`ProgressingModal Component should match snapshot with hint visible 1`] = `"Please wait..."`;
+
+exports[`ProgressingModal Component should match snapshot with progress spinner 1`] = `
+<Spinner
+  color="#951F6F"
+  style={
+    {
+      "marginLeft": 6,
+    }
+  }
+  type="ThreeBounce"
+/>
+`;
+
+exports[`ProgressingModal Component should match snapshot with retry button 1`] = `"Connection failed"`;
+
+exports[`ProgressingModal Component should match snapshot with stay in progress button 1`] = `"Taking longer than expected"`;

components/__snapshots__/QrCodeOverlay.test.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`QrCodeOverlay Component should match snapshot with default props 1`] = `null`;
+
+exports[`QrCodeOverlay Component should match snapshot with force visible 1`] = `null`;
+
+exports[`QrCodeOverlay Component should match snapshot with inline QR disabled 1`] = `null`;
+
+exports[`QrCodeOverlay Component should match snapshot with onClose handler 1`] = `null`;

components/__snapshots__/QrScanner.test.tsx.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`QrScanner Component should match snapshot with custom title 1`] = `<View />`;
+
+exports[`QrScanner Component should match snapshot with default props 1`] = `<View />`;
+
+exports[`QrScanner Component should match snapshot with title 1`] = `<View />`;

components/__snapshots__/SectionLayout.test.tsx.snap

@@ -0,0 +1,165 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SectionLayout Component should match snapshot with complex children 1`] = `
+<View
+  accessibilityLabel="testSection"
+  accessible={true}
+  style={
+    {
+      "marginBottom": 0,
+      "marginLeft": 18,
+      "marginRight": 18,
+      "marginTop": 16,
+      "rowGap": 2,
+    }
+  }
+>
+  <View
+    testID="headerIcon"
+  >
+    Icon
+  </View>
+  Section Header
+  <Text>
+    Line 1
+  </Text>
+  <Text>
+    Line 2
+  </Text>
+  <View>
+    <Text>
+      Nested content
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`SectionLayout Component should match snapshot with custom marginBottom 1`] = `
+<View
+  accessibilityLabel="testSection"
+  accessible={true}
+  style={
+    {
+      "marginBottom": 20,
+      "marginLeft": 18,
+      "marginRight": 18,
+      "marginTop": 16,
+      "rowGap": 2,
+    }
+  }
+>
+  <View
+    testID="headerIcon"
+  >
+    Icon
+  </View>
+  Section Header
+  <Text>
+    Section Content
+  </Text>
+</View>
+`;
+
+exports[`SectionLayout Component should match snapshot with default props 1`] = `
+<View
+  accessibilityLabel="testSection"
+  accessible={true}
+  style={
+    {
+      "marginBottom": 0,
+      "marginLeft": 18,
+      "marginRight": 18,
+      "marginTop": 16,
+      "rowGap": 2,
+    }
+  }
+>
+  <View
+    testID="headerIcon"
+  >
+    Icon
+  </View>
+  Section Header
+  <Text>
+    Section Content
+  </Text>
+</View>
+`;
+
+exports[`SectionLayout Component should match snapshot with different header text 1`] = `
+<View
+  accessibilityLabel="testSection"
+  accessible={true}
+  style={
+    {
+      "marginBottom": 0,
+      "marginLeft": 18,
+      "marginRight": 18,
+      "marginTop": 16,
+      "rowGap": 2,
+    }
+  }
+>
+  <View
+    testID="headerIcon"
+  >
+    Icon
+  </View>
+  Custom Section Title
+  <Text>
+    Section Content
+  </Text>
+</View>
+`;
+
+exports[`SectionLayout Component should match snapshot with different icon 1`] = `
+<View
+  accessibilityLabel="testSection"
+  accessible={true}
+  style={
+    {
+      "marginBottom": 0,
+      "marginLeft": 18,
+      "marginRight": 18,
+      "marginTop": 16,
+      "rowGap": 2,
+    }
+  }
+>
+  <View
+    testID="customIcon"
+  >
+    🔍
+  </View>
+  Section Header
+  <Text>
+    Section Content
+  </Text>
+</View>
+`;
+
+exports[`SectionLayout Component should match snapshot with zero marginBottom 1`] = `
+<View
+  accessibilityLabel="testSection"
+  accessible={true}
+  style={
+    {
+      "marginBottom": 0,
+      "marginLeft": 18,
+      "marginRight": 18,
+      "marginTop": 16,
+      "rowGap": 2,
+    }
+  }
+>
+  <View
+    testID="headerIcon"
+  >
+    Icon
+  </View>
+  Section Header
+  <Text>
+    Section Content
+  </Text>
+</View>
+`;

components/__snapshots__/TextEditOverlay.test.tsx.snap

@@ -0,0 +1,501 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TextEditOverlay Component should match snapshot with default props 1`] = `
+<View
+  style={
+    {
+      "backgroundColor": "rgba(0,0,0,.6)",
+      "height": 1334,
+      "position": "absolute",
+      "top": 0,
+      "width": 750,
+      "zIndex": 9,
+    }
+  }
+>
+  Edit Name
+  <TextInput
+    onChangeText={[MockFunction]}
+    testID="text-input"
+    value="John Doe"
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "opacity": 1,
+      }
+    }
+    testID="button-cancel"
+  >
+    <Text>
+      cancel
+    </Text>
+  </View>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "opacity": 1,
+      }
+    }
+    testID="button-save"
+  >
+    <Text>
+      save
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`TextEditOverlay Component should match snapshot with different label 1`] = `
+<View
+  style={
+    {
+      "backgroundColor": "rgba(0,0,0,.6)",
+      "height": 1334,
+      "position": "absolute",
+      "top": 0,
+      "width": 750,
+      "zIndex": 9,
+    }
+  }
+>
+  Edit Email
+  <TextInput
+    onChangeText={[MockFunction]}
+    testID="text-input"
+    value="John Doe"
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "opacity": 1,
+      }
+    }
+    testID="button-cancel"
+  >
+    <Text>
+      cancel
+    </Text>
+  </View>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "opacity": 1,
+      }
+    }
+    testID="button-save"
+  >
+    <Text>
+      save
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`TextEditOverlay Component should match snapshot with empty value 1`] = `
+<View
+  style={
+    {
+      "backgroundColor": "rgba(0,0,0,.6)",
+      "height": 1334,
+      "position": "absolute",
+      "top": 0,
+      "width": 750,
+      "zIndex": 9,
+    }
+  }
+>
+  Edit Name
+  <TextInput
+    onChangeText={[MockFunction]}
+    testID="text-input"
+    value=""
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "opacity": 1,
+      }
+    }
+    testID="button-cancel"
+  >
+    <Text>
+      cancel
+    </Text>
+  </View>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "opacity": 1,
+      }
+    }
+    testID="button-save"
+  >
+    <Text>
+      save
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`TextEditOverlay Component should match snapshot with long value 1`] = `
+<View
+  style={
+    {
+      "backgroundColor": "rgba(0,0,0,.6)",
+      "height": 1334,
+      "position": "absolute",
+      "top": 0,
+      "width": 750,
+      "zIndex": 9,
+    }
+  }
+>
+  Edit Name
+  <TextInput
+    onChangeText={[MockFunction]}
+    testID="text-input"
+    value="This is a very long text value that should be editable"
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "opacity": 1,
+      }
+    }
+    testID="button-cancel"
+  >
+    <Text>
+      cancel
+    </Text>
+  </View>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "opacity": 1,
+      }
+    }
+    testID="button-save"
+  >
+    <Text>
+      save
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`TextEditOverlay Component should match snapshot with maxLength 1`] = `
+<View
+  style={
+    {
+      "backgroundColor": "rgba(0,0,0,.6)",
+      "height": 1334,
+      "position": "absolute",
+      "top": 0,
+      "width": 750,
+      "zIndex": 9,
+    }
+  }
+>
+  Edit Name
+  <TextInput
+    onChangeText={[MockFunction]}
+    testID="text-input"
+    value="John Doe"
+  />
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "opacity": 1,
+      }
+    }
+    testID="button-cancel"
+  >
+    <Text>
+      cancel
+    </Text>
+  </View>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "opacity": 1,
+      }
+    }
+    testID="button-save"
+  >
+    <Text>
+      save
+    </Text>
+  </View>
+</View>
+`;

components/__snapshots__/VcItemContainerProfileImage.test.tsx.snap

@@ -0,0 +1,104 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VcItemContainerProfileImage Component should match snapshot with empty string face 1`] = `
+<View
+  testID="mockProfileIcon"
+/>
+`;
+
+exports[`VcItemContainerProfileImage Component should match snapshot with face image 1`] = `
+<View
+  accessibilityIgnoresInvertColors={true}
+  style={
+    {
+      "borderRadius": 100,
+      "height": 53,
+      "width": 40,
+    }
+  }
+>
+  <Image
+    source={
+      {
+        "uri": "https://example.com/avatar.jpg",
+      }
+    }
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "height": 53,
+          "width": 40,
+        },
+        {
+          "borderRadius": 10,
+          "height": 53,
+          "width": 40,
+        },
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`VcItemContainerProfileImage Component should match snapshot with face image and pinned 1`] = `
+<View
+  accessibilityIgnoresInvertColors={true}
+  style={
+    {
+      "borderRadius": 100,
+      "height": 53,
+      "width": 40,
+    }
+  }
+>
+  <Image
+    source={
+      {
+        "uri": "https://example.com/avatar.jpg",
+      }
+    }
+    style={
+      [
+        {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        {
+          "height": 53,
+          "width": 40,
+        },
+        {
+          "borderRadius": 10,
+          "height": 53,
+          "width": 40,
+        },
+      ]
+    }
+  />
+  <View
+    testID="mockPinIcon"
+  />
+</View>
+`;
+
+exports[`VcItemContainerProfileImage Component should match snapshot without face image 1`] = `
+<View
+  testID="mockProfileIcon"
+/>
+`;
+
+exports[`VcItemContainerProfileImage Component should match snapshot without face image and pinned 1`] = `
+<View
+  testID="mockProfileIcon"
+/>
+`;

components/__snapshots__/VerifiedIcon.test.tsx.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VerifiedIcon should match snapshot 1`] = `
+<View
+  style={
+    {
+      "marginRight": 3,
+    }
+  }
+>
+  <View
+    style={
+      {
+        "backgroundColor": "white",
+        "borderRadius": 10,
+      }
+    }
+  />
+</View>
+`;

components/ui/Layout.test.tsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import {Column, Row} from './Layout';
+import {Text} from 'react-native';
+
+describe('Layout Components', () => {
+  describe('Column Component', () => {
+    it('should render Column component', () => {
+      const {toJSON} = render(
+        <Column>
+          <Text>Test</Text>
+        </Column>,
+      );
+      expect(toJSON()).toBeTruthy();
+    });
+
+    it('should render children in column', () => {
+      const {getByText} = render(
+        <Column>
+          <Text>Child 1</Text>
+          <Text>Child 2</Text>
+        </Column>,
+      );
+
+      expect(getByText('Child 1')).toBeTruthy();
+      expect(getByText('Child 2')).toBeTruthy();
+    });
+
+    it('should render with fill prop', () => {
+      const {getByLabelText} = render(
+        <Column fill testID="fill-column">
+          <Text>Fill Column</Text>
+        </Column>,
+      );
+      expect(getByLabelText('fill-column')).toBeTruthy();
+    });
+
+    it('should render with multiple layout props', () => {
+      const {getByLabelText} = render(
+        <Column
+          testID="complex-column"
+          fill
+          padding="10"
+          margin="10 20"
+          backgroundColor="#FF0000"
+          align="center"
+          crossAlign="center">
+          <Text>Complex Column</Text>
+        </Column>,
+      );
+      expect(getByLabelText('complex-column')).toBeTruthy();
+    });
+  });
+
+  describe('Row Component', () => {
+    it('should render Row component', () => {
+      const {toJSON} = render(
+        <Row>
+          <Text>Test</Text>
+        </Row>,
+      );
+      expect(toJSON()).toBeTruthy();
+    });
+
+    it('should render children in row', () => {
+      const {getByText} = render(
+        <Row>
+          <Text>Item 1</Text>
+          <Text>Item 2</Text>
+          <Text>Item 3</Text>
+        </Row>,
+      );
+
+      expect(getByText('Item 1')).toBeTruthy();
+      expect(getByText('Item 2')).toBeTruthy();
+      expect(getByText('Item 3')).toBeTruthy();
+    });
+
+    it('should render with fill prop', () => {
+      const {getByLabelText} = render(
+        <Row fill testID="fill-row">
+          <Text>Fill Row</Text>
+        </Row>,
+      );
+      expect(getByLabelText('fill-row')).toBeTruthy();
+    });
+
+    it('should render with multiple layout props', () => {
+      const {getByLabelText} = render(
+        <Row
+          testID="complex-row"
+          fill
+          padding="10"
+          margin="5"
+          backgroundColor="#0000FF"
+          align="center"
+          crossAlign="center">
+          <Text>Complex Row</Text>
+        </Row>,
+      );
+      expect(getByLabelText('complex-row')).toBeTruthy();
+    });
+
+    it('should handle nested layouts', () => {
+      const {getByText} = render(
+        <Row>
+          <Column>
+            <Text>Nested 1</Text>
+          </Column>
+          <Column>
+            <Text>Nested 2</Text>
+          </Column>
+        </Row>,
+      );
+
+      expect(getByText('Nested 1')).toBeTruthy();
+      expect(getByText('Nested 2')).toBeTruthy();
+    });
+  });
+});

components/ui/TextItem.test.tsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import {TextItem} from './TextItem';
+
+describe('TextItem', () => {
+  it('should render text without label', () => {
+    const {getByText} = render(<TextItem text="Test Text" />);
+    expect(getByText('Test Text')).toBeTruthy();
+  });
+
+  it('should render text with label', () => {
+    const {getByText} = render(
+      <TextItem text="Main Text" label="Label Text" />,
+    );
+    expect(getByText('Main Text')).toBeTruthy();
+    expect(getByText('Label Text')).toBeTruthy();
+  });
+
+  it('should render only text when label is not provided', () => {
+    const {getByText, queryByText} = render(<TextItem text="Only Text" />);
+    expect(getByText('Only Text')).toBeTruthy();
+    expect(queryByText('Label Text')).toBeNull();
+  });
+
+  it('should render with testID prop', () => {
+    const {toJSON} = render(<TextItem text="Test" testID="customTestID" />);
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it('should render with divider prop', () => {
+    const {getByText} = render(<TextItem text="Test" divider={true} />);
+    expect(getByText('Test')).toBeTruthy();
+  });
+
+  it('should render without divider when not specified', () => {
+    const {getByText} = render(<TextItem text="Test" divider={false} />);
+    expect(getByText('Test')).toBeTruthy();
+  });
+
+  it('should render with topDivider prop', () => {
+    const {getByText} = render(<TextItem text="Test" topDivider={true} />);
+    expect(getByText('Test')).toBeTruthy();
+  });
+
+  it('should render without topDivider when not specified', () => {
+    const {getByText} = render(<TextItem text="Test" topDivider={false} />);
+    expect(getByText('Test')).toBeTruthy();
+  });
+
+  it('should render with both dividers', () => {
+    const {getByText} = render(
+      <TextItem text="Test" divider={true} topDivider={true} />,
+    );
+    expect(getByText('Test')).toBeTruthy();
+  });
+
+  it('should render with custom margin when provided', () => {
+    const {getByText} = render(<TextItem text="Test" margin="10" />);
+    expect(getByText('Test')).toBeTruthy();
+  });
+
+  it('should render long text correctly', () => {
+    const longText = 'A'.repeat(200);
+    const {getByText} = render(<TextItem text={longText} />);
+    expect(getByText(longText)).toBeTruthy();
+  });
+
+  it('should handle empty text', () => {
+    const {toJSON} = render(<TextItem text="" />);
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it('should handle special characters in text', () => {
+    const specialText = '!@#$%^&*()_+-={}[]|:";\'<>?,./';
+    const {getByText} = render(<TextItem text={specialText} />);
+    expect(getByText(specialText)).toBeTruthy();
+  });
+
+  it('should render with all props combined', () => {
+    const {getByText} = render(
+      <TextItem
+        text="Complete Test"
+        label="All Props"
+        testID="allProps"
+        divider={true}
+        topDivider={true}
+        margin="20"
+      />,
+    );
+
+    expect(getByText('Complete Test')).toBeTruthy();
+    expect(getByText('All Props')).toBeTruthy();
+  });
+
+  it('should render multiple TextItems', () => {
+    const {getByText} = render(
+      <>
+        <TextItem text="First" label="One" />
+        <TextItem text="Second" label="Two" />
+        <TextItem text="Third" label="Three" />
+      </>,
+    );
+
+    expect(getByText('First')).toBeTruthy();
+    expect(getByText('Second')).toBeTruthy();
+    expect(getByText('Third')).toBeTruthy();
+    expect(getByText('One')).toBeTruthy();
+    expect(getByText('Two')).toBeTruthy();
+    expect(getByText('Three')).toBeTruthy();
+  });
+});

components/ui/Timestamp.test.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import {Timestamp} from './Timestamp';
+
+describe('Timestamp', () => {
+  it('should render formatted date and time', () => {
+    // March 15, 2024 at 14:30:00
+    const timestamp = new Date(2024, 2, 15, 14, 30, 0).getTime();
+    const {getByText} = render(<Timestamp time={timestamp} testId="test" />);
+
+    const formatted = getByText(/15 March 2024/);
+    expect(formatted).toBeTruthy();
+    expect(formatted.props.children).toContain('PM');
+  });
+
+  it('should format AM time correctly', () => {
+    // March 15, 2024 at 09:15:00
+    const timestamp = new Date(2024, 2, 15, 9, 15, 0).getTime();
+    const {getByText} = render(<Timestamp time={timestamp} testId="morning" />);
+
+    const formatted = getByText(/09:15 AM/);
+    expect(formatted).toBeTruthy();
+  });
+
+  it('should format PM time correctly', () => {
+    // June 20, 2024 at 18:45:00
+    const timestamp = new Date(2024, 5, 20, 18, 45, 0).getTime();
+    const {getByText} = render(<Timestamp time={timestamp} testId="evening" />);
+
+    const formatted = getByText(/06:45 PM/);
+    expect(formatted).toBeTruthy();
+  });
+
+  it('should handle midnight correctly', () => {
+    // January 1, 2024 at 00:00:00
+    const timestamp = new Date(2024, 0, 1, 0, 0, 0).getTime();
+    const {getByText} = render(
+      <Timestamp time={timestamp} testId="midnight" />,
+    );
+
+    const formatted = getByText(/12:00 AM/);
+    expect(formatted).toBeTruthy();
+  });
+
+  it('should handle noon correctly', () => {
+    // December 25, 2023 at 12:00:00
+    const timestamp = new Date(2023, 11, 25, 12, 0, 0).getTime();
+    const {getByText} = render(<Timestamp time={timestamp} testId="noon" />);
+
+    const formatted = getByText(/12:00 PM/);
+    expect(formatted).toBeTruthy();
+  });
+
+  it('should pad single digit minutes with zero', () => {
+    // April 10, 2024 at 15:05:00
+    const timestamp = new Date(2024, 3, 10, 15, 5, 0).getTime();
+    const {getByText} = render(<Timestamp time={timestamp} testId="padded" />);
+
+    const formatted = getByText(/03:05 PM/);
+    expect(formatted).toBeTruthy();
+  });
+
+  it('should render with testID prop', () => {
+    const timestamp = new Date(2024, 0, 1, 0, 0, 0).getTime();
+    const {toJSON} = render(<Timestamp time={timestamp} testId="myTest" />);
+
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it('should display different months correctly', () => {
+    const months = [
+      {month: 0, name: 'January'},
+      {month: 1, name: 'February'},
+      {month: 2, name: 'March'},
+      {month: 6, name: 'July'},
+      {month: 11, name: 'December'},
+    ];
+
+    months.forEach(({month, name}) => {
+      const timestamp = new Date(2024, month, 15, 12, 0, 0).getTime();
+      const {getByText} = render(
+        <Timestamp time={timestamp} testId="month-test" />,
+      );
+      expect(getByText(new RegExp(name))).toBeTruthy();
+    });
+  });
+});

components/ui/ToastItem.test.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import {ToastItem} from './ToastItem';
+
+describe('ToastItem', () => {
+  it('should render toast message', () => {
+    const {getByText} = render(<ToastItem message="Success!" />);
+    expect(getByText('Success!')).toBeTruthy();
+  });
+
+  it('should render long message', () => {
+    const longMessage =
+      'This is a very long toast message that should still be displayed properly';
+    const {getByText} = render(<ToastItem message={longMessage} />);
+    expect(getByText(longMessage)).toBeTruthy();
+  });
+
+  it('should render short message', () => {
+    const {getByText} = render(<ToastItem message="OK" />);
+    expect(getByText('OK')).toBeTruthy();
+  });
+
+  it('should render empty message', () => {
+    const {toJSON} = render(<ToastItem message="" />);
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it('should render message with special characters', () => {
+    const message = 'Error: Operation failed! (Code: 500)';
+    const {getByText} = render(<ToastItem message={message} />);
+    expect(getByText(message)).toBeTruthy();
+  });
+
+  it('should render message with numbers', () => {
+    const message = '123 items processed successfully';
+    const {getByText} = render(<ToastItem message={message} />);
+    expect(getByText(message)).toBeTruthy();
+  });
+
+  it('should render message with emojis', () => {
+    const message = '✅ Success! 🎉';
+    const {getByText} = render(<ToastItem message={message} />);
+    expect(getByText(message)).toBeTruthy();
+  });
+
+  it('should render multiline message', () => {
+    const message = 'Line 1\nLine 2\nLine 3';
+    const {getByText} = render(<ToastItem message={message} />);
+    expect(getByText(message)).toBeTruthy();
+  });
+
+  it('should render different toast messages', () => {
+    const messages = [
+      'Operation completed',
+      'Error occurred',
+      'Warning: Low storage',
+      'Info: Update available',
+    ];
+
+    messages.forEach(message => {
+      const {getByText} = render(<ToastItem message={message} />);
+      expect(getByText(message)).toBeTruthy();
+    });
+  });
+});

components/ui/themes/themes.test.ts

@@ -0,0 +1,106 @@
+import {DefaultTheme} from './DefaultTheme';
+import {PurpleTheme} from './PurpleTheme';
+
+describe('DefaultTheme', () => {
+  it('should be defined', () => {
+    expect(DefaultTheme).toBeDefined();
+  });
+
+  it('should have Colors property', () => {
+    expect(DefaultTheme.Colors).toBeDefined();
+    expect(typeof DefaultTheme.Colors).toBe('object');
+  });
+
+  it('should have ProfileIconColor', () => {
+    expect(DefaultTheme.Colors.ProfileIconColor).toBeDefined();
+  });
+
+  it('should have TextStyles property', () => {
+    expect(DefaultTheme.TextStyles).toBeDefined();
+    expect(typeof DefaultTheme.TextStyles).toBe('object');
+  });
+
+  it('should have ButtonStyles property', () => {
+    expect(DefaultTheme.ButtonStyles).toBeDefined();
+    expect(typeof DefaultTheme.ButtonStyles).toBe('object');
+  });
+
+  it('should have spacing function', () => {
+    expect(DefaultTheme.spacing).toBeDefined();
+    expect(typeof DefaultTheme.spacing).toBe('function');
+  });
+
+  it('should have elevation function', () => {
+    expect(DefaultTheme.elevation).toBeDefined();
+    expect(typeof DefaultTheme.elevation).toBe('function');
+  });
+});
+
+describe('PurpleTheme', () => {
+  it('should be defined', () => {
+    expect(PurpleTheme).toBeDefined();
+  });
+
+  it('should have Colors property', () => {
+    expect(PurpleTheme.Colors).toBeDefined();
+    expect(typeof PurpleTheme.Colors).toBe('object');
+  });
+
+  it('should have ProfileIconColor', () => {
+    expect(PurpleTheme.Colors.ProfileIconColor).toBeDefined();
+  });
+
+  it('should have different colors than Default', () => {
+    expect(PurpleTheme.Colors).not.toEqual(DefaultTheme.Colors);
+  });
+
+  it('should have TextStyles property', () => {
+    expect(PurpleTheme.TextStyles).toBeDefined();
+    expect(typeof PurpleTheme.TextStyles).toBe('object');
+  });
+
+  it('should have ButtonStyles property', () => {
+    expect(PurpleTheme.ButtonStyles).toBeDefined();
+    expect(typeof PurpleTheme.ButtonStyles).toBe('object');
+  });
+
+  it('should have spacing function', () => {
+    expect(PurpleTheme.spacing).toBeDefined();
+    expect(typeof PurpleTheme.spacing).toBe('function');
+  });
+
+  it('should have elevation function', () => {
+    expect(PurpleTheme.elevation).toBeDefined();
+    expect(typeof PurpleTheme.elevation).toBe('function');
+  });
+
+  it('should have same structure as DefaultTheme', () => {
+    const defaultKeys = Object.keys(DefaultTheme);
+    const purpleKeys = Object.keys(PurpleTheme);
+    expect(purpleKeys.sort()).toEqual(defaultKeys.sort());
+  });
+});
+
+describe('Theme spacing function', () => {
+  it('should return spacing styles for Default theme', () => {
+    const spacing = DefaultTheme.spacing('margin', 'xs');
+    expect(spacing).toBeDefined();
+  });
+
+  it('should return spacing styles for Purple theme', () => {
+    const spacing = PurpleTheme.spacing('padding', 'sm');
+    expect(spacing).toBeDefined();
+  });
+});
+
+describe('Theme elevation function', () => {
+  it('should return elevation styles for Default theme', () => {
+    const elevation = DefaultTheme.elevation(2);
+    expect(elevation).toBeDefined();
+  });
+
+  it('should return elevation styles for Purple theme', () => {
+    const elevation = PurpleTheme.elevation(3);
+    expect(elevation).toBeDefined();
+  });
+});