@procivis/one-react-native-components 0.1.63 → 0.2.54

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

@@ -0,0 +1,7 @@
+import { CredentialListQuery, CredentialSchemaListQuery, DidListQuery, HistoryListQuery, ProofListQuery, ProofSchemaListQuery } from '@procivis/react-native-one-core';
+export declare const getQueryKeyFromCredentialListQueryParams: (queryParams?: Partial<CredentialListQuery>) => (string | string[] | undefined)[];
+export declare const getQueryKeyFromHistoryListQueryParams: (queryParams?: Partial<HistoryListQuery>) => (string | import("@procivis/react-native-one-core").HistoryEntityTypeEnum[] | undefined)[];
+export declare const getQueryKeyFromCredentialSchemaListQueryParams: (queryParams?: Partial<CredentialSchemaListQuery>) => (string | string[] | undefined)[];
+export declare const getQueryKeyFromProofSchemaListQueryParams: (queryParams?: Partial<ProofSchemaListQuery>) => (string | string[] | undefined)[];
+export declare const getQueryKeyFromProofListQueryParams: (queryParams?: Partial<ProofListQuery>) => (string | string[] | undefined)[];
+export declare const getQueryKeyFromDidListQueryParams: (queryParams?: Partial<DidListQuery>) => (string | boolean | string[] | undefined)[];

package/lib/typescript/utils/ref.d.ts

@@ -8,4 +8,4 @@ import React from 'react';
  *    return <RefComponent ref={forwardedRef} {...props} />;
  * }
  */
-export declare const useForwardedRef: <Component extends React.ComponentClass<any, any> | React.Component<any, {}, any>>(passedRef?: React.Ref<Component> | undefined) => [React.Ref<Component>, React.RefObject<Component>];
+export declare const useForwardedRef: <Component extends React.Component<any, {}, any> | React.ComponentClass<any, any>>(passedRef?: React.Ref<Component> | undefined) => [React.Ref<Component>, React.RefObject<Component>];

package/lib/typescript/utils/reporting.d.ts

@@ -0,0 +1,4 @@
+import * as Sentry from '@sentry/react-native';
+export declare function reportError(message: string): void;
+export declare function reportException(e: unknown, message?: string): void;
+export declare function reportTraceInfo(category: string, message?: string, data?: Sentry.Breadcrumb['data']): void;

package/lib/typescript/utils/string.d.ts

@@ -0,0 +1,4 @@
+export declare const capitalizeFirstLetter: (string: string) => string;
+export declare const capitalize: (str: string) => string;
+export declare const replaceBreakingHyphens: (str: string) => string;
+export declare const isASCII: (str: string) => boolean;

package/lib/typescript/utils/uuid.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Insecure identifier generator
+ * @returns {string} UUID v4
+ * @example `11edc52b-2918-4d71-9058-f7285e29d894`
+ */
+export declare const generateUUID: () => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@procivis/one-react-native-components",
-  "version": "0.1.63",
+  "version": "0.2.54",
   "author": "Procivis AG (https://procivis.ch)",
   "license": "Apache-2.0",
   "description": "Common Procivis ONE UI components for react-native",
@@ -50,10 +50,12 @@
     "@babel/preset-env": "^7.20.0",
     "@babel/runtime": "^7.20.0",
     "@commitlint/config-conventional": "^11.0.0",
+    "@procivis/react-native-one-core": "1.33398.0",
     "@procivis/react-native-picker": "5.0.3",
     "@react-native-async-storage/async-storage": "^1.17.3",
     "@react-native-community/blur": "^4.4.0",
     "@react-native-community/datetimepicker": "^8.2.0",
+    "@react-native-community/netinfo": "^11.4.1",
     "@react-native-community/slider": "^4.5.2",
     "@react-native/babel-preset": "0.73.21",
     "@react-native/eslint-config": "0.73.2",
@@ -62,6 +64,7 @@
     "@react-native/typescript-config": "0.73.1",
     "@react-navigation/native": "^6.0.6",
     "@release-it/conventional-changelog": "^2.0.0",
+    "@sentry/react-native": "^5.24.1",
     "@storybook/addon-actions": "6.5",
     "@storybook/addon-controls": "6.5",
     "@storybook/addon-essentials": "6.5",
@@ -77,6 +80,7 @@
     "@types/react": "^18.2.6",
     "@typescript-eslint/eslint-plugin": "^5.17.0",
     "@typescript-eslint/parser": "^5.17.0",
+    "apisauce": "2.0.0",
     "babel-jest": "^29.6.3",
     "babel-loader": "^8.2.4",
     "babel-plugin-react-native-web": "^0.18.9",
@@ -90,7 +94,9 @@
     "eslint-plugin-simple-import-sort": "^8.0.0",
     "husky": "^6.0.0",
     "jest": "^29.6.3",
+    "lottie-react-native": "^7.2.2",
     "metro-react-native-babel-preset": "0.73.10",
+    "parse-url": "^9.2.0",
     "patch-package": "^6.4.7",
     "prettier": "2.8.8",
     "pure-svg-code": "1.0.6",
@@ -98,6 +104,7 @@
     "react": "18.2.0",
     "react-dom": "^18.2.0",
     "react-native": "0.73.9",
+    "react-native-bluetooth-state-manager": "^1.3.5",
     "react-native-builder-bob": "^0.18.0",
     "react-native-gesture-handler": "2.14.0",
     "react-native-reanimated": "^3.15.0",
@@ -105,25 +112,41 @@
     "react-native-safe-area-context": "^3.3.2",
     "react-native-screens": "^3.21.0",
     "react-native-svg": "^15.1.0",
+    "react-native-system-time": "git+https://github.com/procivis/react-native-system-time.git#f184f8a45a7d6974a34dffa47544424ac9d382c3",
+    "react-native-uuid": "^2.0.1",
     "react-native-vision-camera": "^4.5.1",
     "react-native-web": "^0.18.9",
+    "react-query": "^3.39.3",
     "release-it": "^14.2.2",
+    "shx": "^0.3.4",
     "storybook-addon-designs": "^6.3.1",
+    "timeago.js": "^4.0.2",
     "typescript": "5.0.4"
   },
   "peerDependencies": {
+    "@procivis/react-native-one-core": "^1.33398.0",
     "@procivis/react-native-picker": "*",
     "@react-native-community/blur": "*",
+    "@react-native-community/netinfo": "^11.4.1",
     "@react-native/normalize-color": "*",
     "@react-navigation/native": "*",
+    "@sentry/react-native": "^5.24.1",
+    "apisauce": "2.0.0",
+    "lottie-react-native": "^7.2.2",
+    "parse-url": "^9.2.0",
     "pure-svg-code": "*",
     "qrcode-svg": "*",
     "react": "*",
     "react-native": "*",
+    "react-native-bluetooth-state-manager": "^1.3.5",
     "react-native-reanimated-carousel": "*",
     "react-native-safe-area-context": "*",
     "react-native-svg": "*",
-    "react-native-vision-camera": "^4"
+    "react-native-system-time": "*",
+    "react-native-uuid": "^2.0.1",
+    "react-native-vision-camera": "^4",
+    "react-query": "^3.39.3",
+    "timeago.js": "^4.0.2"
   },
   "jest": {
     "preset": "react-native",
@@ -167,7 +190,11 @@
       "simple-import-sort",
       "jest"
     ],
+    "parserOptions": {
+      "project": true
+    },
     "rules": {
+      "@typescript-eslint/no-floating-promises": "warn",
       "no-restricted-imports": [
         "error",
         {

package/src/components/backup/index.ts

@@ -0,0 +1 @@
+export * from './preview-credentials';

package/src/components/backup/preview-credentials.tsx

@@ -0,0 +1,38 @@
+import { CredentialListItem } from '@procivis/react-native-one-core';
+import React, { FC } from 'react';
+import { ImageSourcePropType, View } from 'react-native';
+
+import { useCredentialListExpandedCard } from '../../utils/hooks/credential-card/credential-card-expanding';
+import { CardLabels } from '../../utils/parsers/credential';
+import { CredentialDetails } from '../credential/credential';
+
+interface PreviewCredentialsProps {
+  credentials: CredentialListItem[] | undefined;
+  labels: CardLabels;
+  onImagePreview: (title: string, image: ImageSourcePropType) => void;
+}
+
+export const PreviewCredentials: FC<PreviewCredentialsProps> = ({ credentials, labels, onImagePreview }) => {
+  const { expandedCredential, onHeaderPress } = useCredentialListExpandedCard();
+
+  if (!credentials || credentials.length === 0) {
+    return null;
+  }
+
+  return (
+    <View>
+      {credentials.map((credential, index, { length }) => (
+        <View key={credential.id}>
+          <CredentialDetails
+            credentialId={credential.id}
+            expanded={expandedCredential === credential.id}
+            labels={labels}
+            lastItem={index === length - 1}
+            onHeaderPress={onHeaderPress}
+            onImagePreview={onImagePreview}
+          />
+        </View>
+      ))}
+    </View>
+  );
+};

package/src/components/credential/credential.tsx

@@ -0,0 +1,72 @@
+import { Claim } from '@procivis/react-native-one-core';
+import React, { FC } from 'react';
+import { ImageSourcePropType, StyleSheet } from 'react-native';
+
+import { CredentialDetailsCardListItem, CredentialHeaderProps } from '../../ui-components/credential/card';
+import { concatTestID } from '../../utils';
+import { useCoreConfig } from '../../utils/hooks/core/core-config';
+import { useCredentialDetail } from '../../utils/hooks/core/credentials';
+import { CardLabels, detailsCardFromCredentialWithClaims } from '../../utils/parsers/credential';
+
+export interface CredentialDetailsProps {
+  claims?: Claim[];
+  credentialId: string;
+  expanded?: boolean;
+  headerAccessory?: CredentialHeaderProps['accessory'];
+  labels: CardLabels;
+  lastItem?: boolean;
+  onHeaderPress?: (credentialId?: string) => void;
+  onImagePreview: (title: string, image: ImageSourcePropType) => void;
+}
+
+export const CredentialDetails: FC<CredentialDetailsProps> = ({
+  claims,
+  credentialId,
+  expanded = false,
+  labels,
+  lastItem,
+  onHeaderPress,
+  onImagePreview,
+  headerAccessory,
+}) => {
+  const { data: credential } = useCredentialDetail(credentialId);
+  const { data: config } = useCoreConfig();
+
+  if (!credential || !config) {
+    return null;
+  }
+  const testID = concatTestID('Credential.credential', credential.id);
+
+  const { card, attributes } = detailsCardFromCredentialWithClaims(
+    credential,
+    claims ?? credential.claims,
+    config,
+    testID,
+    labels,
+  );
+  if (headerAccessory) {
+    card.header.accessory = headerAccessory;
+  }
+
+  return (
+    <CredentialDetailsCardListItem
+      attributes={attributes}
+      card={{
+        ...card,
+        credentialId,
+        onHeaderPress,
+      }}
+      expanded={expanded}
+      lastItem={lastItem}
+      onImagePreview={onImagePreview}
+      style={styles.credential}
+      testID={testID}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  credential: {
+    marginBottom: 8,
+  },
+});

package/src/components/credential/index.ts

@@ -0,0 +1 @@
+export * from './credential';

package/src/components/entity/EntityButtons.tsx

@@ -0,0 +1,79 @@
+import { TrustEntity } from '@procivis/react-native-one-core';
+import React, { FC, memo, useCallback, useMemo } from 'react';
+import { Linking, StyleSheet, View } from 'react-native';
+
+import { Button, ButtonType } from '../../ui-components/buttons';
+import { EntityLabels } from '../../ui-components/screens/nerd-mode-screen';
+import { concatTestID, reportException } from '../../utils';
+
+export interface EntityButton {
+  url: string;
+  label: string;
+}
+
+interface EntityButtonsProps {
+  entity?: TrustEntity;
+  labels: EntityLabels;
+  testID?: string;
+}
+
+const EntityButtons: FC<EntityButtonsProps> = ({ entity, labels, testID }) => {
+  const buttons = useMemo(
+    () =>
+      [
+        {
+          label: labels.visitWebsite,
+          url: entity?.website || '',
+          testID: 'website',
+        },
+        {
+          label: labels.termsAndServices,
+          url: entity?.termsUrl || '',
+          testID: 'termsOfService',
+        },
+        {
+          label: labels.privacyPolicy,
+          url: entity?.privacyUrl || '',
+          testID: 'privacyPolicy',
+        },
+      ].filter((btn) => Boolean(btn.url)),
+    [entity, labels],
+  );
+
+  const openURL = useCallback(
+    (url: string) => () => {
+      Linking.openURL(url).catch((e) => {
+        reportException(e, 'Error opening entity link');
+      });
+    },
+    [],
+  );
+  return (
+    <View style={[styles.buttons]} testID={testID}>
+      {buttons.map(({ label, url, testID: testIdSuffix }) => (
+        <Button
+          key={label}
+          title={label}
+          onPress={openURL(url)}
+          style={styles.urlButton}
+          testID={concatTestID(testID, testIdSuffix)}
+          type={ButtonType.SmallTech}
+        />
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  buttons: {
+    paddingBottom: 10,
+    paddingHorizontal: 12,
+  },
+  urlButton: {
+    borderRadius: 4,
+    borderWidth: 0,
+    marginTop: 4,
+  },
+});
+
+export default memo(EntityButtons);

package/src/components/entity/entity-attributes.tsx

@@ -0,0 +1,62 @@
+import { TrustEntity } from '@procivis/react-native-one-core';
+import React, { FC, memo } from 'react';
+import { View } from 'react-native';
+
+import { NerdModeItem } from '../../ui-components/nerd-view';
+import { AttributesLabels, EntityType } from '../../ui-components/screens/nerd-mode-screen';
+import { addElementIf } from '../../utils/array';
+
+interface EntityAttributesProps {
+  trustEntity?: TrustEntity;
+  trusted: boolean;
+  labels: AttributesLabels;
+  onCopyToClipboard: (value: string) => void;
+  entityType: EntityType;
+}
+
+const EntityAttributes: FC<EntityAttributesProps> = ({
+  trustEntity,
+  trusted,
+  labels,
+  entityType,
+  onCopyToClipboard,
+}) => {
+  const didId = trustEntity?.did?.did || '';
+  const didSections = didId.split(':') ?? [];
+  const identifier = didSections.pop();
+  const didMethod = didSections.length ? didSections.join(':') + ':' : '';
+
+  const attributes = [
+    ...addElementIf(trusted, {
+      attributeKey: labels.trustRegistry,
+      highlightedText: trustEntity?.trustAnchor.name,
+      testID: 'trustRegistry',
+    }),
+    ...addElementIf(Boolean(didId), {
+      attributeKey: entityType === EntityType.CredentialEntity ? labels.issuerDid : labels.entityDid,
+      attributeText: identifier,
+      canBeCopied: true,
+      highlightedText: didMethod,
+      testID: 'issuerDID',
+    }),
+    ...addElementIf(trusted && Boolean(trustEntity?.role), {
+      attributeKey: labels.role,
+      highlightedText: trustEntity?.role,
+      testID: 'role',
+    }),
+  ];
+  return (
+    <View>
+      {attributes.map((attribute) => (
+        <NerdModeItem
+          key={attribute.attributeKey}
+          {...attribute}
+          labels={labels}
+          onCopyToClipboard={onCopyToClipboard}
+        />
+      ))}
+    </View>
+  );
+};
+
+export default memo(EntityAttributes);

package/src/components/entity/entity-details-with-buttons.tsx

@@ -0,0 +1,98 @@
+import { DidListItem, TrustEntityRoleEnum, TrustEntityStateEnum } from '@procivis/react-native-one-core';
+import React, { FC, memo, useMemo } from 'react';
+import { StyleProp, View, ViewStyle } from 'react-native';
+
+import EntityCluster from '../../ui-components/entity/entity-cluster';
+import { EntityTrustedIcon } from '../../ui-components/icons';
+import { AttributesLabels, EntityLabels, EntityType } from '../../ui-components/screens/nerd-mode-screen';
+import { useAppColorScheme } from '../../ui-components/theme/color-scheme-context';
+import { concatTestID, replaceBreakingHyphens } from '../../utils';
+import { useTrustEntity } from '../../utils/hooks/core/trust-entity';
+import EntityAttributes from './entity-attributes';
+import EntityButtons from './EntityButtons';
+
+export type ContextRole = Exclude<TrustEntityRoleEnum, TrustEntityRoleEnum.BOTH>;
+
+interface EntityDetailsWithButtonsProps {
+  did?: DidListItem;
+  entityLabels: EntityLabels;
+  attributesLabels: AttributesLabels;
+  style?: StyleProp<ViewStyle>;
+  textColor?: string;
+  testID?: string;
+  role: ContextRole;
+  onCopyToClipboard: (value: string) => void;
+  entityType: EntityType;
+}
+
+const EntityDetailsWithButtons: FC<EntityDetailsWithButtonsProps> = ({
+  did,
+  entityLabels,
+  attributesLabels,
+  onCopyToClipboard,
+  role,
+  entityType,
+  testID,
+  ...props
+}) => {
+  let { data } = useTrustEntity(did?.id);
+  const trustEntity = data ?? undefined;
+
+  const colorScheme = useAppColorScheme();
+
+  const trusted = Boolean(
+    trustEntity &&
+      trustEntity.state === TrustEntityStateEnum.ACTIVE &&
+      (trustEntity.role === TrustEntityRoleEnum.BOTH || trustEntity.role === role),
+  );
+
+  const trustEntityName = useMemo(() => {
+    if (!trustEntity || !trusted) {
+      return role === TrustEntityRoleEnum.ISSUER ? entityLabels.unknownIssuer : entityLabels.unknownVerifier;
+    }
+    return trustEntity.name;
+  }, [entityLabels, role, trustEntity, trusted]);
+
+  const trustEntitySubline = useMemo(() => {
+    if (!trusted) {
+      return did?.did ? replaceBreakingHyphens(did.did) : undefined;
+    }
+
+    return `${entityLabels.trusted} • ${trustEntity?.trustAnchor.name}`;
+  }, [trustEntity, trusted, entityLabels.trusted, did]);
+
+  const trustEntityStatusIcon = useMemo(() => {
+    if (!trusted) {
+      return undefined;
+    }
+    return <EntityTrustedIcon testID={concatTestID(testID, 'statusIcon', 'trusted')} />;
+  }, [testID, trusted]);
+
+  return (
+    <View style={{ backgroundColor: colorScheme.nerdView.background }}>
+      <EntityCluster
+        avatar={{
+          avatar: trusted && trustEntity?.logo ? { imageSource: { uri: trustEntity.logo } } : undefined,
+          placeholderText: trustEntity?.name.substring(0, 1),
+          statusIcon: trustEntityStatusIcon,
+          testID: concatTestID(testID, 'avatar'),
+        }}
+        entityName={trustEntityName}
+        subline={trustEntitySubline}
+        sublineColor={trusted ? colorScheme.success : colorScheme.white}
+        testID={testID}
+        {...props}
+      />
+      {trusted && <EntityButtons entity={trustEntity} labels={entityLabels} testID={concatTestID(testID, 'links')} />}
+      <EntityAttributes
+        trustEntity={trustEntity}
+        trusted={trusted}
+        labels={attributesLabels}
+        onCopyToClipboard={onCopyToClipboard}
+        entityType={entityType}
+      />
+    </View>
+  );
+};
+
+export default memo(EntityDetailsWithButtons);

package/src/components/entity/entity-details.tsx

@@ -0,0 +1,85 @@
+import { DidListItem, TrustEntity, TrustEntityRoleEnum, TrustEntityStateEnum } from '@procivis/react-native-one-core';
+import React, { FC, ReactNode, useMemo } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+
+import EntityCluster from '../../ui-components/entity/entity-cluster';
+import { EntityTrustedIcon } from '../../ui-components/icons';
+import { concatTestID, replaceBreakingHyphens } from '../../utils';
+import { useTrustEntity } from '../../utils/hooks/core/trust-entity';
+
+export type EntityDetailsLabels = {
+  unknown: string;
+};
+
+export type EntityDetailsProps = {
+  labels: EntityDetailsLabels;
+  renderMore?: (trustEntity: TrustEntity) => ReactNode;
+  role: Exclude<TrustEntityRoleEnum, TrustEntityRoleEnum.BOTH>;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+} & (
+  | {
+      did?: DidListItem;
+    }
+  | {
+      entity: TrustEntity;
+    }
+);
+
+const EntityDetails: FC<EntityDetailsProps> = ({ labels, renderMore, role, style, testID, ...props }) => {
+  const { data } = useTrustEntity('did' in props ? props.did?.id : undefined);
+  const trustEntity: TrustEntity | undefined = 'entity' in props ? props.entity : data ?? undefined;
+
+  const trusted =
+    trustEntity &&
+    trustEntity.state === TrustEntityStateEnum.ACTIVE &&
+    (trustEntity.role === TrustEntityRoleEnum.BOTH || trustEntity.role === role);
+
+  const trustEntityName = useMemo(() => {
+    if (!trusted) {
+      return labels.unknown;
+    }
+    return trustEntity.name;
+  }, [labels.unknown, trustEntity, trusted]);
+
+  const trustEntitySubline = useMemo(() => {
+    if (!trustEntity) {
+      return 'did' in props ? (props.did?.did ? replaceBreakingHyphens(props.did.did) : undefined) : undefined;
+    }
+    if (!trusted) {
+      return replaceBreakingHyphens(trustEntity.did.did);
+    }
+    return undefined;
+  }, [props, trustEntity, trusted]);
+
+  const trustEntityStatusIcon = useMemo(() => {
+    if (!trusted) {
+      return undefined;
+    }
+    return <EntityTrustedIcon testID={concatTestID(testID, 'statusIcon', 'trusted')} />;
+  }, [testID, trusted]);
+
+  return (
+    <>
+      <EntityCluster
+        avatar={
+          trustEntity
+            ? {
+                avatar: trusted && trustEntity.logo ? { imageSource: { uri: trustEntity.logo } } : undefined,
+                placeholderText: trustEntity.name.substring(0, 1),
+                statusIcon: trustEntityStatusIcon,
+                testID: concatTestID(testID, 'avatar'),
+              }
+            : undefined
+        }
+        entityName={trustEntityName}
+        style={style}
+        subline={trustEntitySubline}
+        testID={testID}
+      />
+      {trustEntity && renderMore && renderMore(trustEntity)}
+    </>
+  );
+};
+
+export default EntityDetails;

package/src/components/entity/index.ts

@@ -0,0 +1,3 @@
+import EntityDetails, { EntityDetailsLabels, EntityDetailsProps } from './entity-details';
+
+export { EntityDetails, EntityDetailsLabels, EntityDetailsProps };

package/src/components/index.ts

@@ -0,0 +1,5 @@
+export * from './backup';
+export * from './credential';
+export * from './entity';
+export * from './navigation';
+export * from './proof-request';

package/src/components/navigation/header-buttons.tsx

@@ -0,0 +1,64 @@
+import { useNavigation } from '@react-navigation/native';
+import React, { FC, useCallback } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+
+import { BackButton, BackButtonIcon, GhostButton, InfoIcon, OptionsIcon } from '../../ui-components';
+
+export type HeaderButtonProps = {
+  onPress?: () => void;
+  testID: string;
+};
+
+export const HeaderBackButton: FC<HeaderButtonProps> = ({ onPress, testID }) => {
+  const navigation = useNavigation();
+  const handleBackButtonPress = useCallback(() => {
+    if (onPress) {
+      return onPress();
+    }
+    navigation.goBack();
+  }, [onPress, navigation]);
+  if (!navigation.canGoBack) {
+    return null;
+  }
+  return <BackButton onPress={handleBackButtonPress} testID={testID} />;
+};
+
+export const HeaderCloseButton: FC<HeaderButtonProps> = ({ onPress, testID }) => {
+  const navigation = useNavigation();
+  const handleCloseButtonPress = useCallback(() => {
+    if (onPress) {
+      return onPress();
+    }
+    navigation.goBack();
+  }, [onPress, navigation]);
+  return <BackButton icon={BackButtonIcon.Close} onPress={handleCloseButtonPress} testID={testID} />;
+};
+
+export type HeaderInfoButtonProps = {
+  accessibilityLabel: string;
+  onPress: () => void;
+  testID: string;
+};
+
+export const HeaderInfoButton: FC<HeaderInfoButtonProps> = ({ accessibilityLabel, onPress, testID }) => {
+  return <GhostButton accessibilityLabel={accessibilityLabel} icon={InfoIcon} onPress={onPress} testID={testID} />;
+};
+
+export type HeaderOptionsButtonProps = {
+  accessibilityLabel: string;
+  onPress: () => void;
+  style?: StyleProp<ViewStyle>;
+  testID: string;
+};
+
+export const HeaderOptionsButton: FC<HeaderOptionsButtonProps> = ({ onPress, testID, style, accessibilityLabel }) => {
+  return (
+    <GhostButton
+      accessibilityLabel={accessibilityLabel}
+      icon={OptionsIcon}
+      onPress={onPress}
+      style={style}
+      testID={testID}
+    />
+  );
+};

package/src/components/navigation/index.ts

@@ -0,0 +1 @@
+export * from './header-buttons';