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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@procivis/one-react-native-components",
-  "version": "0.3.53",
+  "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.56061.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.56061.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

@@ -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: {

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

@@ -52,20 +52,24 @@ const CredentialDetailsCardListItem: FC<CredentialDetailsCardListItemProps> = ({
   }, [cardListItemHeight, lastItem, expanded]);
 
   const cardWrapperStyle: ViewStyle = {
-    minHeight: cardWidth ? cardWidth / CredentialCardRatio : undefined,
+    minHeight: cardWidth ? Math.ceil(cardWidth / CredentialCardRatio) : undefined,
   }
 
   const onContentLayout = useCallback(
     (event: LayoutChangeEvent) => {
       const { width, height } = event.nativeEvent.layout;
+      const borderWidth = StyleSheet.flatten(style)?.borderWidth ?? 0;
+      const cardHeight = Math.round(height) + 2 * borderWidth;
+      if (cardHeight === detailsCardHeight) {
+        return;
+      }
       setCardWidth(width);
       if (!minHeight) {
-        setMinHeight(lastItem ? width / CredentialCardRatio : 60);
+        setMinHeight(lastItem ? Math.ceil(width / CredentialCardRatio) : 60);
       }
-      const borderWidth = StyleSheet.flatten(style)?.borderWidth ?? 0;
-      setDetailsCardHeight(height + 2 * borderWidth);
+      setDetailsCardHeight(cardHeight);
     },
-    [lastItem, minHeight, style],
+    [lastItem, minHeight, style, detailsCardHeight],
   );
 
   return (
@@ -73,7 +77,7 @@ const CredentialDetailsCardListItem: FC<CredentialDetailsCardListItemProps> = ({
       <View style={[styles.cardWrapper, cardWrapperStyle]}>
         <CredentialDetailsCard
           animate={false}
-          expanded={expanded}
+          expanded={true}
           onLayout={onContentLayout}
           style={detailsCardStyle}
           {...props}

package/src/ui-components/detail/detail.stories.tsx

@@ -18,11 +18,11 @@ const Render = ({ onRightAction, contentHeight, headerProps }: Args) => {
     <DetailScreen
       headerProps={{
         ...headerProps,
-        rightButton: (
+        rightButtons: [
           <TouchableOpacity onPress={onRightAction} hitSlop={hitSlop}>
             <Placeholder id="R" style={styles.rightButton} />
-          </TouchableOpacity>
-        ),
+          </TouchableOpacity>,
+        ],
       }}>
       <Placeholder id="Content" style={[contentHeight ? { height: contentHeight } : styles.content]} />
     </DetailScreen>

package/src/ui-components/header/header.stories.tsx

@@ -16,12 +16,14 @@ const Render = ({ onBack, withBackButton, withRightButton, ...args }: Args) => {
     <Header
       {...args}
       onBack={withBackButton ? onBack : undefined}
-      rightButton={
-        withRightButton ? (
-          <TouchableOpacity>
-            <Placeholder id="R" style={styles.rightButton} />
-          </TouchableOpacity>
-        ) : undefined
+      rightButtons={
+        withRightButton
+          ? [
+              <TouchableOpacity>
+                <Placeholder id="R" style={styles.rightButton} />
+              </TouchableOpacity>,
+            ]
+          : undefined
       }
     />
   );

package/src/ui-components/header/header.tsx

@@ -8,7 +8,7 @@ import { useAppColorScheme } from '../theme';
 
 export interface HeaderProps extends ViewProps {
   onBack?: () => void;
-  rightButton?: ReactNode;
+  rightButtons?: ReactNode[];
   style?: StyleProp<ViewStyle>;
   titleRowStyle?: StyleProp<ViewStyle>;
   title: ReactNode;
@@ -22,7 +22,7 @@ const backButtonHitSlop: Insets = { top: 12, bottom: 12, left: 20, right: 20 };
  * Following the design: https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=425-18624
  * states (Default + Dashboard)
  */
-const Header: FC<HeaderProps> = ({ onBack, rightButton, style, titleRowStyle, testID, title, ...viewProps }) => {
+const Header: FC<HeaderProps> = ({ onBack, rightButtons, style, titleRowStyle, testID, title, ...viewProps }) => {
   const colorScheme = useAppColorScheme();
 
   return (
@@ -31,7 +31,7 @@ const Header: FC<HeaderProps> = ({ onBack, rightButton, style, titleRowStyle, te
         <View style={styles.backButtonRow}>
           <BackButton hitSlop={backButtonHitSlop} onPress={onBack} testID={concatTestID(testID, 'back')} />
           <View />
-          {rightButton}
+          {rightButtons}
         </View>
       )}
 
@@ -39,7 +39,7 @@ const Header: FC<HeaderProps> = ({ onBack, rightButton, style, titleRowStyle, te
         style={[
           styles.titleRow,
           onBack ? styles.titleRow2nd : styles.titleRowNoBackButton,
-          (onBack || !rightButton) && styles.titleRowNoRightButton,
+          (onBack || !rightButtons) && styles.titleRowNoRightButton,
           titleRowStyle,
         ]}>
         {typeof title === 'string' ? (
@@ -55,7 +55,7 @@ const Header: FC<HeaderProps> = ({ onBack, rightButton, style, titleRowStyle, te
           <View style={styles.title}>{title}</View>
         )}
 
-        {!onBack && rightButton && <View style={styles.rightButtonWrapper}>{rightButton}</View>}
+        {!onBack && rightButtons && <View style={styles.rightButtonWrapper}>{rightButtons}</View>}
       </View>
     </View>
   );
@@ -75,6 +75,8 @@ const styles = StyleSheet.create({
   },
   rightButtonWrapper: {
     alignItems: 'center',
+    flexDirection: 'row',
+    gap: '16',
     height: 48,
     justifyContent: 'center',
     paddingHorizontal: 12,