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

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

@@ -0,0 +1,64 @@
+import { HistoryActionEnum, HistoryEntityTypeEnum, HistoryListItem } from '@procivis/react-native-one-core';
+import React, { FC, useCallback } from 'react';
+
+import { HistoryItemView } from '../../ui-components';
+import { formatTime, useTrustEntity } from '../../utils';
+import { HistoryListItemIcon } from './history-list-item-icon';
+
+export type HistoryListItemLabels = {
+  actions: { [key in keyof typeof HistoryActionEnum]: string };
+  entityTypes: { [key in keyof typeof HistoryEntityTypeEnum]: string };
+};
+
+export interface HistoryListItemViewProps {
+  dateFormatter?: (date: Date) => string;
+  first?: boolean;
+  infoLabelMode?: 'entity' | 'associatedLabel' | 'none';
+  item: HistoryListItem;
+  labels: HistoryListItemLabels;
+  last?: boolean;
+  onPress?: (item: HistoryListItem) => void;
+  testID?: string;
+}
+
+export const HistoryListItemView: FC<HistoryListItemViewProps> = ({
+  dateFormatter = formatTime,
+  first,
+  infoLabelMode = 'entity',
+  item,
+  labels,
+  last,
+  onPress,
+  testID
+}) => {
+  const { data: entity } = useTrustEntity(infoLabelMode === 'entity' ? item.target : undefined);
+
+  const label = `${labels.entityTypes[item.entityType]} ${labels.actions[item.action]}`;
+  let infoLabel;
+  switch (infoLabelMode) {
+    case 'entity':
+      infoLabel = entity?.name;
+      break;
+    case 'associatedLabel':
+      infoLabel = item.name;
+      break;
+  }
+  const icon = <HistoryListItemIcon item={item} />;
+
+  const pressHandler = useCallback(() => {
+    onPress?.(item);
+  }, [onPress, item]);
+
+  return (
+    <HistoryItemView
+      first={first}
+      icon={icon}
+      info={infoLabel}
+      label={label}
+      last={last}
+      onPress={pressHandler}
+      testID={testID}
+      time={dateFormatter(new Date(item.createdDate)) ?? ''}
+    />
+  );
+};

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

@@ -0,0 +1,157 @@
+import { HistoryListItem, HistoryListQuery } from '@procivis/react-native-one-core';
+import { debounce } from 'lodash';
+import React, { FC, PropsWithChildren, useEffect, useMemo, useState } from 'react';
+import { Animated, StyleSheet, View } from 'react-native';
+
+import {
+  BackButton,
+  FilterButton,
+  FoldableHeader,
+  NavigationHeader,
+  Typography,
+  useAppColorScheme,
+} from '../../ui-components';
+import { concatTestID, groupEntriesByDay, HistoryGroupByDaySection, useListContentInset } from '../../utils';
+import { HistoryListLabels, HistoryListView } from './history-list';
+import { HistoryListItemViewProps } from './history-list-item';
+
+export type HistoryListScreenLabels = {
+  emptyTitle: string;
+  emptySubtitle: string;
+  list: HistoryListLabels;
+  title: string;
+  search: string;
+};
+
+export type HistoryListScreenProps = {
+  groupItems?: (entries: HistoryListItem[]) => HistoryGroupByDaySection[];
+  itemInfoLabelMode?: HistoryListItemViewProps['infoLabelMode'];
+  labels: HistoryListScreenLabels;
+  onBackPressed: () => void;
+  onHistoryItemPressed: (historyItem: HistoryListItem) => void;
+  onOpenFilter?: () => void;
+  onSearchPhraseChange: (searchPhrase: string | undefined) => void;
+  queryParams: Partial<HistoryListQuery>;
+  testID?: string;
+};
+
+export const HistoryListScreen: FC<PropsWithChildren<HistoryListScreenProps>> = ({
+  children,
+  groupItems = groupEntriesByDay,
+  itemInfoLabelMode = 'entity',
+  labels,
+  onBackPressed,
+  onHistoryItemPressed,
+  onOpenFilter,
+  onSearchPhraseChange,
+  queryParams,
+  testID = 'HistoryScreen',
+}) => {
+  const colorScheme = useAppColorScheme();
+  const [empty, setEmpty] = useState<boolean>(false);
+  const [scrollOffset] = useState(() => new Animated.Value(0));
+
+  const [searchPhrase, setSearchPhrase] = useState<string>('');
+  const searchBarVisible = !empty || Boolean(queryParams.searchText);
+
+  const handleSearchPhraseChange = useMemo(() => debounce(onSearchPhraseChange, 500), [onSearchPhraseChange]);
+  useEffect(() => {
+    handleSearchPhraseChange(searchPhrase || undefined);
+  }, [searchPhrase, handleSearchPhraseChange]);
+
+  const headerHeight = searchBarVisible ? 112 : 70;
+
+  const insets = useListContentInset({
+    additionalBottomPadding: 24,
+    headerHeight,
+  });
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          backgroundColor: colorScheme.background,
+        },
+      ]}
+      testID={testID}>
+      {empty && (
+        <View
+          style={[
+            styles.emptyNotice,
+            {
+              backgroundColor: colorScheme.white,
+              marginTop: insets.paddingTop,
+            },
+          ]}>
+          <Typography align="center" color={colorScheme.text} preset="s">
+            {labels.emptyTitle}
+          </Typography>
+          <Typography align="center" color={colorScheme.text} preset="s/line-height-small" style={styles.shaded}>
+            {labels.emptySubtitle}
+          </Typography>
+        </View>
+      )}
+      <HistoryListView
+        contentContainerStyle={insets}
+        groupItems={groupItems}
+        itemProps={{ infoLabelMode: itemInfoLabelMode, onPress: onHistoryItemPressed }}
+        onEmpty={setEmpty}
+        onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: scrollOffset } } }], {
+          useNativeDriver: true,
+        })}
+        query={queryParams}
+        testID={concatTestID(testID, 'list')}
+        labels={labels.list}
+      />
+      {children}
+      <FoldableHeader
+        header={
+          <NavigationHeader
+            backgroundColor={'transparent'}
+            leftItem={<BackButton onPress={onBackPressed} testID={concatTestID(testID, 'back')} />}
+            title={labels.title}
+          />
+        }
+        scrollOffset={scrollOffset}
+        searchBar={
+          !searchBarVisible
+            ? undefined
+            : {
+                rightButton: onOpenFilter ? (
+                  <FilterButton
+                    active={Boolean(queryParams.credentialSchemaId)}
+                    onPress={onOpenFilter}
+                    testID={concatTestID(testID, 'filter')}
+                  />
+                ) : undefined,
+                rightButtonAlwaysVisible: true,
+                searchBarProps: {
+                  onSearchPhraseChange: setSearchPhrase,
+                  placeholder: labels.search,
+                  searchPhrase,
+                  testID: concatTestID(testID, 'search'),
+                },
+              }
+        }
+        staticHeader={!searchBarVisible}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  emptyNotice: {
+    borderRadius: 12,
+    marginHorizontal: 16,
+    paddingBottom: 20,
+    paddingHorizontal: 12,
+    paddingTop: 16,
+  },
+  shaded: {
+    opacity: 0.7,
+  },
+});

package/src/components/history/history-list-section-header.tsx

@@ -0,0 +1,42 @@
+import moment, { Moment } from 'moment';
+import React, { FC, useMemo } from 'react';
+
+import { HistorySectionHeaderView } from '../../ui-components';
+
+export type HistoryListSectionHeaderLabels = {
+  today: string;
+  yesterday: string;
+};
+
+export type HistoryListSectionHeaderViewProps = {
+  date: Moment;
+  firstYearEntry: boolean;
+  labels: HistoryListSectionHeaderLabels;
+  testID?: string;
+};
+
+// components used on the history section lists (Settings->History, CredentialDetail->History)
+// https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?type=design&node-id=1246-51813&mode=dev
+
+export const HistoryListSectionHeaderView: FC<HistoryListSectionHeaderViewProps> = ({
+  date,
+  firstYearEntry,
+  labels,
+  testID,
+}) => {
+  const day = useMemo(() => {
+    const now = moment();
+    const dateString = moment(date);
+
+    if (dateString.isSame(now, 'day')) {
+      return labels.today;
+    } else if (dateString.isSame(now.subtract(1, 'day'), 'day')) {
+      return labels.yesterday;
+    }
+    return dateString.format('Do MMMM');
+  }, [date, labels]);
+
+  return (
+    <HistorySectionHeaderView day={day} testID={testID} year={firstYearEntry ? date.year().toString() : undefined} />
+  );
+};

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

@@ -0,0 +1,116 @@
+import { HistoryListItem, HistoryListQuery } from '@procivis/react-native-one-core';
+import { useIsFocused } from '@react-navigation/native';
+import React, { FC, useCallback, useMemo } from 'react';
+import { Animated, SectionListProps, StyleSheet } from 'react-native';
+
+import { ActivityIndicator, useAppColorScheme } from '../../ui-components';
+import ListPageLoadingIndicator from '../../ui-components/list/list-page-loading-indicator';
+import { concatTestID, useHistory } from '../../utils';
+import { groupEntriesByDay, HistoryGroupByDaySection } from '../../utils/history';
+import { HistoryListItemLabels, HistoryListItemView, HistoryListItemViewProps } from './history-list-item';
+import { HistoryListSectionHeaderLabels, HistoryListSectionHeaderView } from './history-list-section-header';
+
+export type HistoryListLabels = {
+  sectionHeader: HistoryListSectionHeaderLabels;
+  item: HistoryListItemLabels;
+};
+
+export interface HistoryListViewProps
+  extends Omit<SectionListProps<HistoryListItem, HistoryGroupByDaySection>, 'sections'> {
+  // optional customization of item props
+  getItemProps?: (item: HistoryListItem) => Partial<HistoryListItemViewProps> | undefined;
+  groupItems?: (entries: HistoryListItem[]) => HistoryGroupByDaySection[];
+  itemProps?: Partial<HistoryListItemViewProps>;
+  labels: HistoryListLabels;
+  // callback when empty list displayed
+  onEmpty?: (empty: boolean) => void;
+  query: Partial<HistoryListQuery>;
+}
+
+export const HistoryListView: FC<HistoryListViewProps> = ({
+  query,
+  contentContainerStyle,
+  getItemProps,
+  groupItems = groupEntriesByDay,
+  itemProps,
+  labels,
+  onEmpty,
+  onScroll,
+  ...props
+}) => {
+  const isFocused = useIsFocused();
+  const colorScheme = useAppColorScheme();
+  const {
+    data: historyData,
+    fetchNextPage: fetchNextHistoryPage,
+    hasNextPage: hasNextHistoryPage,
+    isLoading,
+  } = useHistory(query);
+
+  const history = useMemo(() => {
+    const items = historyData?.pages
+      .flat()
+      .map((page) => page.values)
+      .flat();
+    if (!items) {
+      return undefined;
+    }
+    if (historyData) {
+      setImmediate(() => onEmpty?.(!items.length));
+    }
+    return groupItems(items);
+  }, [historyData, onEmpty, groupItems]);
+
+  const onEndReached = useCallback(() => {
+    if (hasNextHistoryPage) {
+      fetchNextHistoryPage().catch(() => {});
+    }
+  }, [fetchNextHistoryPage, hasNextHistoryPage]);
+
+  if (!history) {
+    return <ActivityIndicator animate={isFocused} />;
+  }
+
+  return (
+    <Animated.SectionList<HistoryListItem, HistoryGroupByDaySection>
+      ListFooterComponent={
+        isLoading ? <ListPageLoadingIndicator color={colorScheme.accent} style={styles.footer} /> : undefined
+      }
+      contentContainerStyle={[styles.listContent, contentContainerStyle]}
+      keyExtractor={(item) => item.id}
+      onEndReached={onEndReached}
+      onScroll={onScroll}
+      renderItem={({ item, index, section }) => (
+        <HistoryListItemView
+          first={!index}
+          item={item}
+          labels={labels.item}
+          last={index === section.data.length - 1}
+          testID={concatTestID(props.testID, 'item', index.toString())}
+          {...itemProps}
+          {...getItemProps?.(item)}
+        />
+      )}
+      renderSectionHeader={({ section }) => (
+        <HistoryListSectionHeaderView
+          date={section.date}
+          firstYearEntry={section.firstYearEntry}
+          labels={labels.sectionHeader}
+          testID={concatTestID(props.testID, 'section')}
+        />
+      )}
+      sections={history}
+      stickySectionHeadersEnabled={false}
+      {...props}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  footer: {
+    marginVertical: 16,
+  },
+  listContent: {
+    paddingHorizontal: 16,
+  },
+});

package/src/components/history/index.tsx

@@ -0,0 +1,6 @@
+export * from './history-details-screen';
+export * from './history-list';
+export * from './history-list-item';
+export * from './history-list-item-icon';
+export * from './history-list-screen';
+export * from './history-list-section-header';

package/src/components/index.ts

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

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

@@ -70,7 +70,8 @@ export const ShareCredential: FunctionComponent<{
     credential
       ? {
           ...credential,
-          issuerDid: credential?.issuerDid?.did,
+          issuerDid: credential?.issuerDid?.id,
+          issuer: credential?.issuer?.id,
         }
       : undefined,
   );

package/src/ui-components/accessibility/accessibility.ts

@@ -104,7 +104,7 @@ export function useIsOutsideTransition<
  * @param component component ref
  * @note Disabled on android as it is not reliable
  */
-export const focusAccessibility = (component?: React.Component | React.ComponentClass | null) => {
+export const focusAccessibility = (component?: React.ElementType<any, any> | null) => {
   if (Platform.OS === 'ios' && component) {
     const nodeHandle = findNodeHandle(component);
     if (nodeHandle) {
@@ -118,7 +118,7 @@ export const focusAccessibility = (component?: React.Component | React.Component
  * @param {boolean} focused Focusing happens when this changes to `true`
  * @returns reference to be used with the target element
  */
-export const useAccessibilityFocus = <T extends React.Component | React.ComponentClass>(focused: boolean = true) => {
+export const useAccessibilityFocus = <T extends React.ElementType<any, any>>(focused: boolean = true) => {
   const ref = useRef<T>(null);
 
   useEffect(() => {

package/src/ui-components/accessibility/accessibilityHistory.tsx

@@ -4,7 +4,7 @@ import React, { FC, PropsWithChildren, useCallback, useContext, useEffect, useMe
 import { useForwardedRef } from '../../utils/ref';
 import { focusAccessibility, useAccessibleAfterTransition } from './accessibility';
 
-type AccessibilityRefComponent = React.Component | React.ComponentClass | null;
+type AccessibilityRefComponent = React.ElementType<any, any> | null;
 interface AccessibilityRefContextValue {
   setRef: (route: string, ref: AccessibilityRefComponent) => void;
   getRef: (route: string) => AccessibilityRefComponent;
@@ -36,7 +36,7 @@ export const AccessibilityFocusHistoryProvider: FC<PropsWithChildren<{}>> = ({ c
  * @note This needs to be used inside {@link AccessibilityFocusHistoryProvider} and navigation context
  */
 export const useAccessibilityFocusHistory = <
-  Component extends React.Component<any> | React.ComponentClass<any>,
+  Component extends React.ElementType<any, any>,
   OnPress extends (...args: never[]) => void = () => void,
 >(
   pressHandler: OnPress | undefined,

package/src/ui-components/accessibility/accessibilityHistoryWrappers.tsx

@@ -20,7 +20,7 @@ interface OnPressProps {
   onPress?: RNOnPress | null;
 }
 
-const WithAccessibilityFocusHistory = <ComponentProps extends OnPressProps, RefType extends React.Component>(
+const WithAccessibilityFocusHistory = <ComponentProps extends OnPressProps, RefType extends React.ElementType<any, any>>(
   C: React.ComponentType<ComponentProps>,
   displayName: string,
 ) => {
@@ -52,8 +52,7 @@ const WithAccessibilityFocusHistory = <ComponentProps extends OnPressProps, RefT
 /**
  * Wrappers of RN touchable components with accessibilty focus history support
  */
-
-export const TouchableOpacity = WithAccessibilityFocusHistory<TouchableOpacityProps, RNTouchableOpacity>(
+export const TouchableOpacity = WithAccessibilityFocusHistory<TouchableOpacityProps, typeof RNTouchableOpacity>(
   RNTouchableOpacity,
   'TouchableOpacity',
 );
@@ -61,7 +60,7 @@ export const TouchableWithoutFeedback = WithAccessibilityFocusHistory<
   TouchableWithoutFeedbackProps,
   RNTouchableWithoutFeedback
 >(RNTouchableWithoutFeedback, 'TouchableWithoutFeedback');
-export const TouchableHighlight = WithAccessibilityFocusHistory<TouchableHighlightProps, RNTouchableHighlight>(
+export const TouchableHighlight = WithAccessibilityFocusHistory<TouchableHighlightProps, typeof RNTouchableHighlight>(
   RNTouchableHighlight,
   'TouchableHighlight',
 );
@@ -73,7 +72,6 @@ type WrapperRefType<C extends React.ForwardRefExoticComponent<React.RefAttribute
 /**
  * Ref types to be used in forwardRef for the wrappers
  */
-
 export type TouchableOpacityRef = WrapperRefType<typeof TouchableOpacity>;
 export type TouchableWithoutFeedbackRef = WrapperRefType<typeof TouchableWithoutFeedback>;
 export type TouchableHighlightRef = WrapperRefType<typeof TouchableHighlight>;

package/src/ui-components/accessibility/index.ts

@@ -1,5 +1,5 @@
+import type { AccessibilityTextTransformer } from './accessibility';
 import {
-  AccessibilityTextTransformer,
   focusAccessibility,
   setAccessibilityTextTransformer,
   transformAccessibilityText,
@@ -10,9 +10,10 @@ import {
   useIsOutsideTransition,
 } from './accessibility';
 import { AccessibilityFocusHistoryProvider, useAccessibilityFocusHistory } from './accessibilityHistory';
-import { AccessibilityLanguageProvider, AccessibilityLanguageProviderProps } from './accessibilityLanguage';
+import type { AccessibilityLanguageProviderProps } from './accessibilityLanguage';
+import { AccessibilityLanguageProvider } from './accessibilityLanguage';
 // @ts-ignore
-import { AccessibilityLanguageFile, SupportedAccessibilityLanguage } from './locale';
+import type { AccessibilityLanguageFile, SupportedAccessibilityLanguage } from './locale';
 
 export * from './accessibilityHistoryWrappers';
 

package/src/ui-components/action-modal/ActionModal.stories.tsx

@@ -1,4 +1,4 @@
-import type { ComponentMeta, Story } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import React, { useState } from 'react';
 import { View } from 'react-native';
 
@@ -6,7 +6,7 @@ import { Button } from '../buttons';
 import { Typography } from '../text';
 import ActionModal from './ActionModal';
 
-const Basic: Story = () => {
+const Render = () => {
   const [visible, setVisible] = useState(false);
   return (
     <>
@@ -21,6 +21,10 @@ const Basic: Story = () => {
   );
 };
 
+const Basic: StoryObj = {
+  render: Render,
+};
+
 export { Basic as ActionModal };
 
 export default {
@@ -32,4 +36,4 @@ export default {
       url: 'https://www.figma.com/file/Gd0Tj0234hxtl3HMcCJThW/App-Component-Library-(Design)?node-id=391-9097&t=WhKthlRU5MCuUWfw-0',
     },
   },
-} as ComponentMeta<typeof ActionModal>;
+} as Meta<typeof ActionModal>;

package/src/ui-components/activity-indicator/activity-indicator.stories.tsx

@@ -1,11 +1,8 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import ActivityIndicator from './activity-indicator';
 
-const Basic: ComponentStory<typeof ActivityIndicator> = (args) => <ActivityIndicator {...args} />;
-
-Basic.args = {};
+const Basic: StoryObj<typeof ActivityIndicator> = {};
 
 export { Basic as ActivityIndicator };
 
@@ -18,4 +15,4 @@ export default {
       url: 'https://www.figma.com/design/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=444-45709&node-type=symbol&t=OQxawbbArhzkDVkZ-0',
     },
   },
-} as ComponentMeta<typeof ActivityIndicator>;
+} as Meta<typeof ActivityIndicator>;

package/src/ui-components/buttons/back-button.stories.tsx

@@ -1,13 +1,12 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import BackButton, { BackButtonIcon } from './back-button';
 
-const Basic: ComponentStory<typeof BackButton> = (args) => <BackButton {...args} />;
-
-Basic.args = {
-  icon: BackButtonIcon.Back,
-  style: { margin: 24 },
+const Basic: StoryObj<typeof BackButton> = {
+  args: {
+    icon: BackButtonIcon.Back,
+    style: { margin: 24 },
+  },
 };
 
 export { Basic as BackButton };
@@ -28,4 +27,4 @@ export default {
       url: 'https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=425-18650&t=KAAJ0oKY3xb6VNtA-4',
     },
   },
-} as ComponentMeta<typeof BackButton>;
+} as Meta<typeof BackButton>;

package/src/ui-components/buttons/button.stories.tsx

@@ -1,15 +1,14 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from './button';
 
-const Basic: ComponentStory<typeof Button> = (args) => <Button {...args} />;
-
-Basic.args = {
-  title: 'Title',
-  subtitle: '',
-  disabled: false,
-  style: { margin: 24 },
+const Basic: StoryObj<typeof Button> = {
+  args: {
+    title: 'Title',
+    subtitle: '',
+    disabled: false,
+    style: { margin: 24 },
+  },
 };
 
 export { Basic as Button };
@@ -26,4 +25,4 @@ export default {
       url: 'https://www.figma.com/file/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=419-18389',
     },
   },
-} as ComponentMeta<typeof Button>;
+} as Meta<typeof Button>;

package/src/ui-components/buttons/connectivity-button.stories.tsx

@@ -1,16 +1,15 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import ConnectivityButton, { ConnectivityTransport } from './connectivity-button';
 
-const Basic: ComponentStory<typeof ConnectivityButton> = (args) => <ConnectivityButton {...args} />;
-
-Basic.args = {
-  available: true,
-  disabled: false,
-  status: true,
-  title: 'Connectivity message',
-  transport: ConnectivityTransport.Internet,
+const Basic: StoryObj<typeof ConnectivityButton> = {
+  args: {
+    available: true,
+    disabled: false,
+    status: true,
+    title: 'Connectivity message',
+    transport: ConnectivityTransport.Internet,
+  },
 };
 
 export { Basic as ConnectivityButton };
@@ -31,4 +30,4 @@ export default {
       url: 'https://www.figma.com/design/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=4237-32033&node-type=frame&t=TJ4R3WHLQ1CsXNeT-0',
     },
   },
-} as ComponentMeta<typeof ConnectivityButton>;
+} as Meta<typeof ConnectivityButton>;

package/src/ui-components/buttons/connectivity-button.tsx

@@ -59,7 +59,7 @@ const ConnectivityButton: FC<ConnectivityButtonProps> = ({
     </View>
   );
   return (
-    <TouchableHighlight onPress={onPress} style={styles.button}>
+    <TouchableHighlight onPress={onPress} style={styles.button} testID={testID}>
       <View style={[styles.container, { backgroundColor, opacity }]}>
         {icons}
         {title && (