@procivis/one-react-native-components 0.3.50 → 0.3.62

package/lib/typescript/utils/hooks/core/credentials.d.ts

@@ -1,15 +1,11 @@
-import { CredentialListQuery, InvitationResult } from '@procivis/react-native-one-core';
-import { Transport } from '../connectivity/connectivity';
+import { CredentialListQuery, HandleInvitationRequest, InitiateIssuanceRequest, InvitationResult } from '@procivis/react-native-one-core';
 export declare const CREDENTIAL_LIST_QUERY_KEY = "credential-list";
 export declare const CREDENTIAL_LIST_PAGED_QUERY_KEY = "credential-list-paged";
 export declare const CREDENTIAL_DETAIL_QUERY_KEY = "credential-detail";
 export declare const useCredentials: (queryParams?: Partial<CredentialListQuery>) => import("react-query").UseQueryResult<import("@procivis/react-native-one-core").CredentialListItem[], unknown>;
 export declare const usePagedCredentials: (queryParams?: Partial<CredentialListQuery>) => import("react-query").UseInfiniteQueryResult<import("@procivis/react-native-one-core").ItemList<import("@procivis/react-native-one-core").CredentialListItem>, unknown>;
 export declare const useCredentialDetail: (credentialId: string | undefined, active?: boolean) => import("react-query").UseQueryResult<import("@procivis/react-native-one-core").CredentialDetail | undefined, unknown>;
-export declare const useInvitationHandler: () => import("react-query").UseMutationResult<InvitationResult, unknown, {
-    invitationUrl: string;
-    transport: Transport;
-}, unknown>;
+export declare const useInvitationHandler: () => import("react-query").UseMutationResult<InvitationResult, unknown, Omit<HandleInvitationRequest, "organisationId">, unknown>;
 export declare const useCredentialAccept: () => import("react-query").UseMutationResult<void, unknown, {
     didId?: string | undefined;
     identifierId?: string | undefined;
@@ -21,3 +17,5 @@ export declare const useCredentialReject: () => import("react-query").UseMutatio
 export declare const useCredentialRevocationCheck: (forceRefresh: boolean) => import("react-query").UseMutationResult<import("@procivis/react-native-one-core").CredentialRevocationCheckResponse[], unknown, string[], unknown>;
 export declare const useCredentialDelete: () => import("react-query").UseMutationResult<void, unknown, string, unknown>;
 export declare const useInvalidateCredentialDetails: () => (credentialId: string | undefined) => Promise<void>;
+export declare const useInitiateIssuance: () => import("react-query").UseMutationResult<import("@procivis/react-native-one-core").InitiateIssuanceResponse, unknown, Omit<InitiateIssuanceRequest, "organisationId">, unknown>;
+export declare const useContinueIssuance: () => import("react-query").UseMutationResult<import("@procivis/react-native-one-core").ContinueIssuanceResponse, unknown, string, unknown>;

package/lib/typescript/utils/parsers/credential-sharing.d.ts

@@ -1,9 +1,9 @@
 import { Claim, Config, CredentialDetail, PresentationDefinitionField, PresentationDefinitionRequestedCredential } from '@procivis/react-native-one-core';
-import { CredentialAttribute, CredentialCardProps, CredentialDetailsCardProps } from '../../ui-components/credential';
+import { CredentialAttribute, CredentialCardProps } from '../../ui-components/credential';
 import { CredentialCardNotice } from '../../ui-components/credential/card/credential-card';
-import { CardLabels } from './credential';
-export declare const validityCheckedCardFromCredential: (credential: CredentialDetail, invalidLVVC: boolean, expanded: boolean, multipleCredentialsAvailable: boolean, config: Config, notice: CredentialCardNotice | undefined, testID: string, labels: ShareCredentialCardLabels) => Omit<CredentialCardProps, 'onHeaderPress' | 'style' | 'testID'>;
-export declare const missingCredentialCardFromRequest: (request: PresentationDefinitionRequestedCredential, notice: CredentialCardNotice | undefined, testID: string, labels: ShareCredentialCardLabels) => Omit<CredentialCardProps, 'onHeaderPress' | 'style'>;
+import { CardLabels, CredentialDetailsCardPropsWithoutWidth } from './credential';
+export declare const validityCheckedCardFromCredential: (credential: CredentialDetail, invalidLVVC: boolean, expanded: boolean, multipleCredentialsAvailable: boolean, config: Config, notice: CredentialCardNotice | undefined, testID: string, labels: ShareCredentialCardLabels) => Omit<CredentialCardProps, 'onHeaderPress' | 'style' | 'testID' | 'width'>;
+export declare const missingCredentialCardFromRequest: (request: PresentationDefinitionRequestedCredential, notice: CredentialCardNotice | undefined, testID: string, labels: ShareCredentialCardLabels) => Omit<CredentialCardProps, 'onHeaderPress' | 'style' | 'width'>;
 export declare const shareCredentialCardAttributeFromClaim: (id: string, config: Config, testID: string, labels: ShareCredentialCardLabels, claim?: Claim, field?: PresentationDefinitionField) => CredentialAttribute;
 export type ShareCredentialCardLabels = CardLabels & {
     selectiveDisclosureNotice: string;
@@ -11,6 +11,6 @@ export type ShareCredentialCardLabels = CardLabels & {
     missingCredential: string;
     multipleCredentials: string;
 };
-export declare const shareCredentialCardFromCredential: (credential: CredentialDetail | undefined, invalidLVVC: boolean, expanded: boolean, multipleCredentialsAvailable: boolean, request: PresentationDefinitionRequestedCredential, selectedFields: string[] | undefined, config: Config, testID: string, labels: ShareCredentialCardLabels) => Omit<CredentialDetailsCardProps, 'expanded'>;
+export declare const shareCredentialCardFromCredential: (credential: CredentialDetail | undefined, invalidLVVC: boolean, expanded: boolean, multipleCredentialsAvailable: boolean, request: PresentationDefinitionRequestedCredential, selectedFields: string[] | undefined, config: Config, testID: string, labels: ShareCredentialCardLabels) => CredentialDetailsCardPropsWithoutWidth;
 export declare const selectCredentialCardAttributeFromClaim: (id: string, config: Config, testID: string, labels: ShareCredentialCardLabels, claim?: Claim, field?: PresentationDefinitionField) => CredentialAttribute;
-export declare const selectCredentialCardFromCredential: (credential: CredentialDetail, selected: boolean, request: PresentationDefinitionRequestedCredential, config: Config, testID: string, labels: ShareCredentialCardLabels) => Omit<CredentialDetailsCardProps, 'expanded'>;
+export declare const selectCredentialCardFromCredential: (credential: CredentialDetail, selected: boolean, request: PresentationDefinitionRequestedCredential, config: Config, testID: string, labels: ShareCredentialCardLabels) => CredentialDetailsCardPropsWithoutWidth;

package/lib/typescript/utils/parsers/credential.d.ts

@@ -41,10 +41,13 @@ export declare const cardHeaderFromCredential: (credential: CredentialDetail, cl
 export type CardLabels = CardHeaderLabels & {
     validityIssuesNotice: string;
 };
-export declare const getCredentialCardPropsFromCredential: (credential: CredentialDetail, claims: Claim[] | undefined, config: Config, notice: CredentialCardNotice | undefined, testID: string, labels: CardLabels) => Omit<CredentialCardProps, 'onHeaderPress' | 'style'>;
+export declare const getCredentialCardPropsFromCredential: (credential: CredentialDetail, claims: Claim[] | undefined, config: Config, notice: CredentialCardNotice | undefined, testID: string, labels: CardLabels) => Omit<CredentialCardProps, 'onHeaderPress' | 'style' | 'width'>;
 export declare const detailsCardAttributeFromClaim: (claim: Claim, config: Config, testID: string) => CredentialAttribute;
-export declare const detailsCardFromCredential: (credential: CredentialDetail, config: Config, testID: string, labels: CardLabels) => Omit<CredentialDetailsCardProps, 'expanded'>;
-export declare const detailsCardFromCredentialWithClaims: (credential: CredentialDetail, claims: Claim[], config: Config, testID: string, labels: CardLabels) => Omit<CredentialDetailsCardProps, 'expanded'>;
+export type CredentialDetailsCardPropsWithoutWidth = Omit<CredentialDetailsCardProps, 'expanded' | 'card'> & {
+    card: Omit<CredentialCardProps, 'width'>;
+};
+export declare const detailsCardFromCredential: (credential: CredentialDetail, config: Config, testID: string, labels: CardLabels) => CredentialDetailsCardPropsWithoutWidth;
+export declare const detailsCardFromCredentialWithClaims: (credential: CredentialDetail, claims: Claim[], config: Config, testID: string, labels: CardLabels) => CredentialDetailsCardPropsWithoutWidth;
 export declare const nestAttributes: (attributes: CredentialAttribute[]) => CredentialAttribute[];
 export declare function getCredentialSchemaWithoutImages(credentialSchema: CredentialSchema): {
     layoutProperties: {

package/lib/typescript/utils/parsers/query.d.ts

@@ -1,6 +1,6 @@
 import { CredentialListQuery, CredentialSchemaListQuery, DidListQuery, HistoryListQuery, IdentifierListQuery, ProofListQuery, ProofSchemaListQuery } from '@procivis/react-native-one-core';
 export declare const getQueryKeyFromCredentialListQueryParams: (queryParams?: Partial<CredentialListQuery>) => (string | number | string[] | import("@procivis/react-native-one-core").CredentialListQueryExactColumnEnum[] | import("@procivis/react-native-one-core").CredentialStateEnum[] | import("@procivis/react-native-one-core").CredentialListIncludeEntityType[] | import("@procivis/react-native-one-core").CredentialListSearchType[] | undefined)[];
-export declare const getQueryKeyFromHistoryListQueryParams: (queryParams?: Partial<HistoryListQuery>) => (string | number | import("@procivis/react-native-one-core").HistoryActionEnum[] | import("@procivis/react-native-one-core").HistoryEntityTypeEnum[] | undefined)[];
+export declare const getQueryKeyFromHistoryListQueryParams: (queryParams?: Partial<HistoryListQuery>) => (string | number | import("@procivis/react-native-one-core").HistoryListSearch | import("@procivis/react-native-one-core").HistoryActionEnum[] | import("@procivis/react-native-one-core").HistoryEntityTypeEnum[] | undefined)[];
 export declare const getQueryKeyFromCredentialSchemaListQueryParams: (queryParams?: Partial<CredentialSchemaListQuery>) => (string | number | string[] | import("@procivis/react-native-one-core").ExactCredentialSchemaFilterColumnEnum[] | import("@procivis/react-native-one-core").CredentialSchemaListIncludeEntityType[] | undefined)[];
 export declare const getQueryKeyFromProofSchemaListQueryParams: (queryParams?: Partial<ProofSchemaListQuery>) => (string | number | string[] | import("@procivis/react-native-one-core").ExactProofSchemaFilterColumnEnum[] | undefined)[];
 export declare const getQueryKeyFromProofListQueryParams: (queryParams?: Partial<ProofListQuery>) => (string | number | string[] | import("@procivis/react-native-one-core").ExactProofFilterColumnEnum[] | import("@procivis/react-native-one-core").ProofStateEnum[] | import("@procivis/react-native-one-core").ProofRoleEnum[] | undefined)[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@procivis/one-react-native-components",
-  "version": "0.3.50",
+  "version": "0.3.62",
   "author": "Procivis AG (https://procivis.ch)",
   "license": "Apache-2.0",
   "description": "Common Procivis ONE UI components for react-native",
@@ -51,7 +51,7 @@
     "@babel/runtime": "^7.25.0",
     "@commitlint/config-conventional": "^11.0.0",
     "@gorhom/bottom-sheet": "^5.1.2",
-    "@procivis/react-native-one-core": "1.55028.0",
+    "@procivis/react-native-one-core": "1.58284.0",
     "@procivis/react-native-picker": "5.0.3",
     "@react-native-async-storage/async-storage": "^1.17.3",
     "@react-native-community/blur": "^4.4.0",
@@ -138,7 +138,7 @@
     "vite": "^6.2.2"
   },
   "peerDependencies": {
-    "@procivis/react-native-one-core": "^1.55028.0",
+    "@procivis/react-native-one-core": "^1.58284.0",
     "@procivis/react-native-picker": "*",
     "@react-native-community/blur": "*",
     "@react-native-community/netinfo": "^11.4.1",

package/src/components/credential/credential.tsx

@@ -1,6 +1,6 @@
 import { Claim } from '@procivis/react-native-one-core';
-import React, { FC } from 'react';
-import { ImageSourcePropType, StyleSheet } from 'react-native';
+import React, { FC, useMemo } from 'react';
+import { Dimensions, ImageSourcePropType, StyleSheet } from 'react-native';
 
 import { CredentialDetailsCardListItem, CredentialHeaderProps } from '../../ui-components/credential/card';
 import { concatTestID } from '../../utils';
@@ -31,6 +31,7 @@ export const CredentialDetails: FC<CredentialDetailsProps> = ({
 }) => {
   const { data: credential } = useCredentialDetail(credentialId);
   const { data: config } = useCoreConfig();
+  const cardWidth = useMemo(() => Dimensions.get('window').width - 32, []);
 
   if (!credential || !config) {
     return null;
@@ -55,6 +56,7 @@ export const CredentialDetails: FC<CredentialDetailsProps> = ({
         ...card,
         credentialId,
         onHeaderPress,
+        width: cardWidth,
       }}
       expanded={expanded}
       lastItem={lastItem}

package/src/components/history/history-list-item-icon.tsx

@@ -68,6 +68,8 @@ const defaultIcons: {
     PROOF_SCHEMA: HistorySchemaIcon,
     TRUST_ANCHOR: HistoryTrustAnchorIcon,
     TRUST_ENTITY: HistoryTrustedEntityIcon,
+    WALLET_UNIT: HistoryTrustedEntityIcon,
+    WALLET_UNIT_ATTESTATION: HistoryTrustedEntityIcon,
   },
 };
 

package/src/components/history/history-list-screen.tsx

@@ -52,7 +52,7 @@ export const HistoryListScreen: FC<PropsWithChildren<HistoryListScreenProps>> =
   const [scrollOffset] = useState(() => new Animated.Value(0));
 
   const [searchPhrase, setSearchPhrase] = useState<string>('');
-  const searchBarVisible = !empty || Boolean(queryParams.searchText);
+  const searchBarVisible = !empty || Boolean(queryParams.search?.text);
 
   const handleSearchPhraseChange = useMemo(() => debounce(onSearchPhraseChange, 500), [onSearchPhraseChange]);
   useEffect(() => {
@@ -118,13 +118,15 @@ export const HistoryListScreen: FC<PropsWithChildren<HistoryListScreenProps>> =
           !searchBarVisible
             ? undefined
             : {
-                rightButton: onOpenFilter ? (
-                  <FilterButton
-                    active={Boolean(queryParams.credentialSchemaId)}
-                    onPress={onOpenFilter}
-                    testID={concatTestID(testID, 'filter')}
-                  />
-                ) : undefined,
+                rightButtons: onOpenFilter
+                  ? [
+                      <FilterButton
+                        active={Boolean(queryParams.credentialSchemaId)}
+                        onPress={onOpenFilter}
+                        testID={concatTestID(testID, 'filter')}
+                      />,
+                    ]
+                  : undefined,
                 rightButtonAlwaysVisible: true,
                 searchBarProps: {
                   onSearchPhraseChange: setSearchPhrase,

package/src/components/proof-request/select-credential.tsx

@@ -1,6 +1,6 @@
 import { PresentationDefinitionRequestedCredential } from '@procivis/react-native-one-core';
-import React, { FC } from 'react';
-import { ImageSourcePropType } from 'react-native';
+import React, { FC, useMemo } from 'react';
+import { Dimensions, ImageSourcePropType } from 'react-native';
 
 import { CredentialDetailsCardListItem } from '../../ui-components';
 import { useCoreConfig } from '../../utils/hooks/core/core-config';
@@ -19,6 +19,7 @@ export const SelectCredential: FC<{
 }> = ({ credentialId, labels, lastItem, onImagePreview, onPress, request, selected, testID }) => {
   const { data: credential } = useCredentialDetail(credentialId);
   const { data: config } = useCoreConfig();
+  const cardWidth = useMemo(() => Dimensions.get('window').width - 32, []);
 
   if (!credential || !config) {
     return null;
@@ -39,6 +40,7 @@ export const SelectCredential: FC<{
       card={{
         ...card,
         onHeaderPress: onPress,
+        width: cardWidth,
       }}
       expanded={selected}
       lastItem={lastItem}

package/src/components/proof-request/share-credential.tsx

@@ -1,30 +1,29 @@
 import {
+  CredentialDetail,
   CredentialListItem,
   CredentialStateEnum,
   PresentationDefinitionField,
   PresentationDefinitionRequestedCredential,
 } from '@procivis/react-native-one-core';
 import React, { FunctionComponent, useMemo } from 'react';
-import { ImageSourcePropType, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import { Dimensions, ImageSourcePropType, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
 import { Button, ButtonType, CredentialDetailsCardListItem, Typography, useAppColorScheme } from '../../ui-components';
 import { concatTestID } from '../../utils';
 import { useCoreConfig } from '../../utils/hooks/core/core-config';
-import { useCredentialDetail } from '../../utils/hooks/core/credentials';
 import { getValidityState, ValidityState } from '../../utils/parsers/credential';
 import { shareCredentialCardFromCredential, ShareCredentialCardLabels } from '../../utils/parsers/credential-sharing';
 
 export type ShareCredentialLabels = ShareCredentialCardLabels & {
-  revokedCredentialNotice: string;
-  suspendedCredentialNotice: string;
   invalidCredentialNotice: string;
   multipleCredentialsNotice: string;
   multipleCredentialsSelect: string;
+  revokedCredentialNotice: string;
+  suspendedCredentialNotice: string;
 };
 
 export const ShareCredential: FunctionComponent<{
-  allCredentials: CredentialListItem[];
-  credentialId: string;
+  allCredentials: CredentialDetail[];
   expanded?: boolean;
   labels: ShareCredentialLabels;
   lastItem?: boolean;
@@ -39,7 +38,6 @@ export const ShareCredential: FunctionComponent<{
   testID: string;
 }> = ({
   allCredentials,
-  credentialId,
   expanded,
   labels,
   lastItem,
@@ -54,8 +52,9 @@ export const ShareCredential: FunctionComponent<{
   testID,
 }) => {
   const colorScheme = useAppColorScheme();
-  const { data: credential, isLoading } = useCredentialDetail(selectedCredentialId);
+  const credential = allCredentials.find((c) => c.id === selectedCredentialId);
   const { data: config } = useCoreConfig();
+  const cardWidth = useMemo(() => Dimensions.get('window').width - 32, []);
 
   const selectionOptions = useMemo(
     () =>
@@ -141,7 +140,7 @@ export const ShareCredential: FunctionComponent<{
     }
   }, [colorScheme, expanded, invalid, labels, multipleCredentialsAvailable, onSelectCredential, testID, validityState]);
 
-  if (isLoading || !config) {
+  if (!config) {
     return null;
   }
 
@@ -162,8 +161,9 @@ export const ShareCredential: FunctionComponent<{
       attributes={attributes}
       card={{
         ...card,
-        credentialId,
+        credentialId: request.id,
         onHeaderPress,
+        width: cardWidth,
       }}
       expanded={expanded}
       footer={footer}

package/src/ui-components/credential/card/credential-card.stories.tsx

@@ -1,9 +1,20 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryContext, StoryObj } from '@storybook/react';
+import React from 'react';
 
 import CredentialCardBackground from '../../../../storybook/assets/CredentialCardBackground.png';
 import ColorSchemes from '../../../../storybook/colorScheme';
 import { CredentialNoticeWarningIcon, CredentialWarningIcon, RequiredAttributeIcon } from '../../icons/credential';
-import CredentialCard from './credential-card';
+import CredentialCard, { CredentialCardProps } from './credential-card';
+
+const Render = (args: CredentialCardProps, context: StoryContext<CredentialCardProps>) => {
+  const viewport = context.parameters.viewport.viewports[context.userGlobals.viewport];
+  const width = parseInt(viewport.styles.width.replace('px', ''), 10);
+  const props = {
+    ...args,
+    width,
+  };
+  return <CredentialCard {...props} />;
+};
 
 const Basic: StoryObj<typeof CredentialCard> = {
   args: {
@@ -26,6 +37,7 @@ const Basic: StoryObj<typeof CredentialCard> = {
       noticeIcon: CredentialNoticeWarningIcon,
     },
   },
+  render: Render,
 };
 
 export { Basic as CredentialCard };

package/src/ui-components/credential/card/credential-card.tsx

@@ -1,5 +1,5 @@
-import React, { FC, useCallback, useMemo, useState } from 'react';
-import { ColorValue, Image, LayoutChangeEvent, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import React, { FC, useCallback, useMemo } from 'react';
+import { ColorValue, Image, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
 import { concatTestID } from '../../../utils/testID';
 import { TouchableOpacity } from '../../accessibility/accessibilityHistoryWrappers';
@@ -39,6 +39,7 @@ export type CredentialCardProps = {
   onHeaderPress?: (credentialId?: string) => void;
   style?: StyleProp<ViewStyle>;
   testID?: string;
+  width: number;
 };
 
 const CredentialCard: FC<CredentialCardProps> = ({
@@ -52,19 +53,13 @@ const CredentialCard: FC<CredentialCardProps> = ({
   onHeaderPress,
   style,
   testID,
+  width,
 }) => {
   const colorScheme = useAppColorScheme();
-  const [tappableHeaderHeight, setTappableHeaderHeight] = useState<number>();
-  const [cardSize, setCardSize] = useState<{ height: number; width: number }>();
-
-  const onCardLayoutChange = useCallback((event: LayoutChangeEvent) => {
-    const { width, height } = event.nativeEvent.layout;
-    setCardSize({ width, height });
-  }, []);
-
-  const onHeaderLayoutChange = useCallback((event: LayoutChangeEvent) => {
-    setTappableHeaderHeight(event.nativeEvent.layout.height);
-  }, []);
+  const cardSize = {
+    width,
+    height: Math.ceil(width / CredentialCardRatio),
+  };
 
   const headerPressHandler = useCallback(() => {
     onHeaderPress?.(credentialId);
@@ -88,35 +83,34 @@ const CredentialCard: FC<CredentialCardProps> = ({
 
   const shouldShowCarousel = cardSize?.width && cardSize.height;
   return (
-    <View onLayout={onCardLayoutChange} style={[styles.card, style]} testID={testID}>
+    <View style={[styles.card, cardSize, style]} testID={testID}>
       {cardImage ? (
         'imageSource' in cardImage ? (
-          <View style={styles.cardImage}>
+          <View style={cardSize}>
             <Image testID={concatTestID(testID, 'imageSource')} source={cardImage.imageSource} style={styles.image} />
           </View>
         ) : (
-          <ImageOrComponent testID={concatTestID(testID, 'cardImage')} source={cardImage} style={styles.cardImage} />
+          <ImageOrComponent testID={concatTestID(testID, 'cardImage')} source={cardImage} style={cardSize} />
         )
       ) : (
         <View
           testID={concatTestID(testID, 'cardBackgroundColor', String(color))}
-          style={[styles.cardImage, { backgroundColor: color }]}
+          style={[cardSize, { backgroundColor: color }]}
         />
       )}
       {onCardPress && <TouchableOpacity style={styles.cardButton} onPress={cardPressHandler} />}
       {shouldShowCarousel ? (
         <CarouselComponent
-          style={{ marginTop: tappableHeaderHeight ?? 0 }}
+          style={styles.carousel}
           imagesToRender={cardCarouselImages ?? []}
           carouselSize={{
             width: cardSize.width,
-            height: cardSize.height - (tappableHeaderHeight ?? 0),
+            height: cardSize.height - 60,
           }}
           testID={concatTestID(testID, 'carousel')}
         />
       ) : null}
       <TouchableOpacity
-        onLayout={onHeaderLayoutChange}
         activeOpacity={0.9}
         disabled={!onHeaderPress}
         onPress={headerPressHandler}
@@ -151,9 +145,8 @@ const styles = StyleSheet.create({
     position: 'absolute',
     width: '100%',
   },
-  cardImage: {
-    aspectRatio: CredentialCardRatio,
-    width: '100%',
+  carousel: {
+    marginTop: 60,
   },
   header: {
     position: 'absolute',

package/src/ui-components/credential/card/credential-details-card.stories.tsx

@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryContext, StoryObj } from '@storybook/react';
 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { Dimensions, StyleSheet, Text, View } from 'react-native';
 
 import CredentialDetailsCardBackground from '../../../../storybook/assets/CredentialCardBackground.png';
 import { Placeholder } from '../../../../storybook/placeholder';
@@ -23,8 +23,17 @@ const style = StyleSheet.create({
   },
 });
 
-const Render = ({ ...args }: CredentialDetailsCardProps) => {
-  return <CredentialDetailsCard {...args} style={style.card} />;
+const Render = (args: CredentialDetailsCardProps, context: StoryContext<CredentialDetailsCardProps>) => {
+  const viewport = context.parameters.viewport.viewports[context.userGlobals.viewport];
+  const width = parseInt(viewport.styles.width.replace('px', ''), 10) - 32;
+  const props = {
+    ...args,
+    card: {
+      ...args.card,
+      width,
+    },
+  };
+  return <CredentialDetailsCard {...props} style={style.card} />;
 };
 
 const Basic: StoryObj<typeof CredentialDetailsCard> = {
@@ -270,6 +279,7 @@ const Basic: StoryObj<typeof CredentialDetailsCard> = {
         text: 'Notice related to the credential',
         noticeIcon: CredentialNoticeWarningIcon,
       },
+      width: Dimensions.get('screen').width - 32,
     },
     showAllButtonLabel: 'See all',
     expanded: true,

package/src/ui-components/credential/card/credential-details-card.tsx

@@ -7,7 +7,7 @@ import { Button, ButtonType } from '../../buttons';
 import { DownIcon, UpIcon } from '../../icons/credential';
 import { useAppColorScheme } from '../../theme/color-scheme-context';
 import CredentialAttributeItem, { CredentialAttribute } from '../credential-attribute-item';
-import CredentialCard, { CredentialCardProps } from './credential-card';
+import CredentialCard, { CredentialCardProps, CredentialCardRatio } from './credential-card';
 
 export type CredentialDetailsCardProps = ViewProps & {
   animate?: boolean;
@@ -21,6 +21,7 @@ export type CredentialDetailsCardProps = ViewProps & {
 };
 
 const PREVIEW_ATTRIBUTES_COUNT = 3;
+const SEE_ALL_BUTTON_HEIGHT = 78;
 
 const CredentialDetailsCard: FC<CredentialDetailsCardProps> = ({
   animate = true,
@@ -38,7 +39,6 @@ const CredentialDetailsCard: FC<CredentialDetailsCardProps> = ({
   const colorScheme = useAppColorScheme();
   const [previewAttributesHeight, setPreviewAttributesHeight] = useState<number>();
   const [fullAttributesHeight, setFullAttributesHeight] = useState<number>();
-  const [buttonViewHeight, setButtonViewHeight] = useState<number>();
 
   const [allAttributesRendered, setAllAttributesRendered] = useState<boolean>(
     (attributes && attributes.length <= PREVIEW_ATTRIBUTES_COUNT) || !showAllButtonLabel,
@@ -46,17 +46,12 @@ const CredentialDetailsCard: FC<CredentialDetailsCardProps> = ({
 
   const CaretIcon = expanded ? UpIcon : DownIcon;
 
+  const cardHeight = Math.ceil(card.width / CredentialCardRatio);
   const currentHeight = useSharedValue<number | undefined>(undefined);
 
   const previewAttributes = attributes ? attributes.slice(0, PREVIEW_ATTRIBUTES_COUNT) : [];
   const extraAttributes = useMemo(() => (attributes ? attributes.slice(PREVIEW_ATTRIBUTES_COUNT) : []), [attributes]);
 
-  useEffect(() => {
-    if (!extraAttributes || allAttributesRendered) {
-      setButtonViewHeight(0);
-    }
-  }, [extraAttributes, allAttributesRendered]);
-
   useEffect(() => {
     if (extraAttributes.length === 0) {
       const viewStyle = StyleSheet.flatten([
@@ -69,53 +64,56 @@ const CredentialDetailsCard: FC<CredentialDetailsCardProps> = ({
   }, [extraAttributes, footer]);
 
   useEffect(() => {
-    if (previewAttributesHeight === undefined || buttonViewHeight === undefined) {
+    if (previewAttributesHeight === undefined) {
       return;
     }
     if (allAttributesRendered && fullAttributesHeight === undefined) {
       return;
     }
 
+    const buttonViewHeight = !extraAttributes || allAttributesRendered ? 0 : SEE_ALL_BUTTON_HEIGHT;
     const additionalAttributesHeight = fullAttributesHeight ?? 0;
     const additionalHeight = allAttributesRendered ? additionalAttributesHeight : buttonViewHeight;
-    const newHeight = expanded || !animate ? previewAttributesHeight + additionalHeight : 0;
+    const fullHeight = previewAttributesHeight + additionalHeight;
+
+    if (!animate) {
+      currentHeight.value = fullHeight;
+      return;
+    }
+
+    const newHeight = expanded ? fullHeight : 0;
 
     if (currentHeight.value === undefined || !animate) {
       currentHeight.value = newHeight;
       return;
     }
 
-    const duration = !expanded
-      ? 250
-      : allAttributesRendered
-      ? previewAttributes.length * 50
-      : extraAttributes.length * 50;
+    const duration = fullHeight / 5;
     currentHeight.value = withTiming(newHeight, {
       duration,
     });
   }, [
     allAttributesRendered,
-    buttonViewHeight,
     currentHeight,
     animate,
     expanded,
-    extraAttributes.length,
+    extraAttributes,
     fullAttributesHeight,
     previewAttributes.length,
     previewAttributesHeight,
   ]);
 
-  const credentialAttributesStyle = useAnimatedStyle(() => {
+  const animatedStyle = useAnimatedStyle(() => {
     if (currentHeight.value === undefined) {
       if (expanded) {
         return {};
       }
       return {
-        height: 0,
+        height: cardHeight,
       };
     }
     return {
-      height: currentHeight.value,
+      height: cardHeight + currentHeight.value,
     };
   }, [expanded, currentHeight]);
 
@@ -127,10 +125,6 @@ const CredentialDetailsCard: FC<CredentialDetailsCardProps> = ({
     setFullAttributesHeight(event.nativeEvent.layout.height);
   }, []);
 
-  const onButtonViewLayout = useCallback((event: LayoutChangeEvent) => {
-    setButtonViewHeight(event.nativeEvent.layout.height);
-  }, []);
-
   const footerView: ReactElement | undefined = useMemo(() => {
     if (!footer) {
       return undefined;
@@ -147,9 +141,11 @@ const CredentialDetailsCard: FC<CredentialDetailsCardProps> = ({
 
   const renderExtraAttributes =
     allAttributesRendered || (previewAttributesHeight !== undefined && currentHeight.value !== undefined);
+
+  const ContainerComponent = animate ? Animated.View : View;
   return (
-    <View
-      style={[styles.detailsCard, { backgroundColor: colorScheme.white }, style]}
+    <ContainerComponent
+      style={[styles.detailsCard, { backgroundColor: colorScheme.white }, animate ? animatedStyle : undefined, style]}
       {...viewProps}
       testID={concatTestID(card.testID, expanded ? 'expanded' : 'collapsed')}>
       <CredentialCard
@@ -158,7 +154,7 @@ const CredentialDetailsCard: FC<CredentialDetailsCardProps> = ({
         style={[styles.card, cardProps.style]}
       />
       {previewAttributes.length > 0 && (
-        <Animated.View style={[styles.attributesAnimatedWrapper, credentialAttributesStyle]}>
+        <View>
           <View style={styles.attributesWrapper}>
             <View onLayout={onPreviewAttrContentLayout} style={styles.previewAttributesWrapper}>
               {previewAttributes.map((attribute, idx) => (
@@ -173,7 +169,7 @@ const CredentialDetailsCard: FC<CredentialDetailsCardProps> = ({
               ))}
             </View>
             {!allAttributesRendered && extraAttributes.length > 0 && (
-              <View style={styles.allAttributesWrapper} onLayout={onButtonViewLayout}>
+              <View style={styles.buttonWrapper}>
                 <Button
                   onPress={() => setAllAttributesRendered(true)}
                   type={ButtonType.Secondary}
@@ -199,10 +195,10 @@ const CredentialDetailsCard: FC<CredentialDetailsCardProps> = ({
               </View>
             )}
           </View>
-        </Animated.View>
+        </View>
       )}
       {footerView ? <View style={styles.footer}>{footerView}</View> : null}
-    </View>
+    </ContainerComponent>
   );
 };
 
@@ -215,12 +211,14 @@ const styles = StyleSheet.create({
   allAttributesWrapperWithFooter: {
     paddingBottom: 0,
   },
-  attributesAnimatedWrapper: {
-    overflow: 'hidden',
-  },
   attributesWrapper: {
     paddingTop: 7,
-    position: 'absolute',
+    width: '100%',
+  },
+  buttonWrapper: {
+    height: SEE_ALL_BUTTON_HEIGHT,
+    paddingBottom: 12,
+    paddingHorizontal: 4,
     width: '100%',
   },
   card: {