@bifold/core 1.0.0

package/src/components/listItems/ContactListItem.tsx

@@ -0,0 +1,123 @@
+import type { ConnectionRecord } from '@credo-ts/core'
+
+import { StackNavigationProp } from '@react-navigation/stack'
+import React, { useCallback, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { View, StyleSheet, TouchableOpacity, Image } from 'react-native'
+
+import { useStore } from '../../contexts/store'
+import { useTheme } from '../../contexts/theme'
+import { useChatMessagesByConnection } from '../../hooks/chat-messages'
+import { ContactStackParams, Screens, Stacks } from '../../types/navigators'
+import { formatTime, getConnectionName } from '../../utils/helpers'
+import { testIdWithKey } from '../../utils/testable'
+import { TOKENS, useServices } from '../../container-api'
+import { ThemedText } from '../texts/ThemedText'
+
+export interface ContactListItemProps {
+  contact: ConnectionRecord
+  navigation: StackNavigationProp<ContactStackParams, Screens.Contacts>
+}
+
+const ContactListItem: React.FC<ContactListItemProps> = ({ contact, navigation }) => {
+  const { t } = useTranslation()
+  const { ColorPallet, ListItems } = useTheme()
+  const messages = useChatMessagesByConnection(contact)
+  const message = messages[0]
+  const hasOnlyInitialMessage = messages.length < 2
+  const [store] = useStore()
+  const [{ enableChat }] = useServices([TOKENS.CONFIG])
+
+  const styles = StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      padding: 16,
+      backgroundColor: ColorPallet.brand.secondaryBackground,
+    },
+    avatarContainer: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: 50,
+      height: 50,
+      borderRadius: 25,
+      borderColor: ListItems.avatarCircle.borderColor,
+      borderWidth: 1,
+      marginRight: 16,
+    },
+    avatarPlaceholder: {
+      textAlign: 'center',
+    },
+    avatarImage: {
+      width: 30,
+      height: 30,
+    },
+    contactNameContainer: {
+      flex: 1,
+      paddingVertical: 4,
+    },
+    nameAndTimeContainer: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      flex: 1,
+    },
+    timeContainer: {
+      paddingVertical: 4,
+      alignSelf: 'center',
+    },
+  })
+
+  const navigateToContact = useCallback(() => {
+    navigation.getParent()?.navigate(Stacks.ContactStack, {
+      screen: enableChat ? Screens.Chat : Screens.ContactDetails,
+      params: { connectionId: contact.id },
+    })
+  }, [navigation, contact, enableChat])
+
+  const contactLabel = useMemo(
+    () => getConnectionName(contact, store.preferences.alternateContactNames),
+    [contact, store.preferences.alternateContactNames]
+  )
+  const contactLabelAbbr = useMemo(() => contactLabel?.charAt(0).toUpperCase(), [contactLabel])
+
+  return (
+    <TouchableOpacity
+      onPress={navigateToContact}
+      testID={testIdWithKey('Contact')}
+      accessibilityLabel={t('ContactDetails.AContact')}
+      accessibilityRole="button"
+    >
+      <View style={styles.container}>
+        <View style={styles.avatarContainer}>
+          {contact.imageUrl ? (
+            <View>
+              <Image style={styles.avatarImage} source={{ uri: contact.imageUrl }} />
+            </View>
+          ) : (
+            <ThemedText allowFontScaling={false} variant="headingFour" style={styles.avatarPlaceholder}>
+              {contactLabelAbbr}
+            </ThemedText>
+          )}
+        </View>
+        <View style={{ flex: 1 }}>
+          <View style={styles.nameAndTimeContainer}>
+            <View style={styles.contactNameContainer}>
+              <ThemedText variant="labelTitle">{contactLabel}</ThemedText>
+            </View>
+            <View style={styles.timeContainer}>
+              {message && <ThemedText>{formatTime(message.createdAt, { shortMonth: true, trim: true })}</ThemedText>}
+            </View>
+          </View>
+          <View>
+            {message && !hasOnlyInitialMessage && (
+              <ThemedText numberOfLines={1} ellipsizeMode={'tail'}>
+                {message.text}
+              </ThemedText>
+            )}
+          </View>
+        </View>
+      </View>
+    </TouchableOpacity>
+  )
+}
+
+export default ContactListItem

package/src/components/listItems/NotificationListItem.tsx

@@ -0,0 +1,514 @@
+import { AnonCredsProofRequest, V1RequestPresentationMessage } from '@credo-ts/anoncreds'
+import {
+  Agent,
+  BasicMessageRecord,
+  BasicMessageRepository,
+  CredentialExchangeRecord,
+  CredoError,
+  ProofExchangeRecord,
+  ProofState,
+  V2RequestPresentationMessage,
+} from '@credo-ts/core'
+import { useAgent, useConnectionById } from '@credo-ts/react-hooks'
+import { markProofAsViewed } from '@bifold/verifier'
+import { useNavigation } from '@react-navigation/native'
+import { StackNavigationProp } from '@react-navigation/stack'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { DeviceEventEmitter, StyleSheet, TextStyle, TouchableOpacity, View, ViewStyle } from 'react-native'
+import Icon from 'react-native-vector-icons/MaterialIcons'
+
+import { EventTypes, hitSlop } from '../../constants'
+import { TOKENS, useServices } from '../../container-api'
+import { useStore } from '../../contexts/store'
+import { useTheme } from '../../contexts/theme'
+import { BifoldError } from '../../types/error'
+import { GenericFn } from '../../types/fn'
+import { BasicMessageMetadata, basicMessageCustomMetadata } from '../../types/metadata'
+import { HomeStackParams, Screens, Stacks } from '../../types/navigators'
+import { CustomNotification, CustomNotificationRecord } from '../../types/notification'
+import { ModalUsage } from '../../types/remove'
+import { getConnectionName, parsedSchema } from '../../utils/helpers'
+import { testIdWithKey } from '../../utils/testable'
+import Button, { ButtonType } from '../buttons/Button'
+import { InfoBoxType } from '../misc/InfoBox'
+import CommonRemoveModal from '../modals/CommonRemoveModal'
+import { ThemedText } from '../texts/ThemedText'
+
+const iconSize = 30
+
+export enum NotificationType {
+  BasicMessage = 'BasicMessage',
+  CredentialOffer = 'Offer',
+  ProofRequest = 'ProofRecord',
+  Revocation = 'Revocation',
+  Custom = 'Custom',
+  Proof = 'Proof',
+}
+
+export interface NotificationListItemProps {
+  notificationType: NotificationType
+  notification: BasicMessageRecord | CredentialExchangeRecord | ProofExchangeRecord | CustomNotificationRecord
+  customNotification?: CustomNotification
+}
+
+type DisplayDetails = {
+  type: InfoBoxType
+  body: string | undefined
+  title: string | undefined
+  buttonTitle: string | undefined
+}
+
+type StyleConfig = {
+  containerStyle: ViewStyle
+  textStyle: TextStyle
+  iconColor: string
+  iconName: string
+}
+
+const markMessageAsSeen = async (agent: Agent, record: BasicMessageRecord) => {
+  const meta = record.metadata.get(BasicMessageMetadata.customMetadata) as basicMessageCustomMetadata
+  record.metadata.set(BasicMessageMetadata.customMetadata, { ...meta, seen: true })
+  const basicMessageRepository = agent.context.dependencyManager.resolve(BasicMessageRepository)
+  await basicMessageRepository.update(agent.context, record)
+}
+
+const defaultDetails: DisplayDetails = {
+  type: InfoBoxType.Info,
+  title: undefined,
+  body: undefined,
+  buttonTitle: undefined,
+}
+
+const NotificationListItem: React.FC<NotificationListItemProps> = ({
+  notificationType,
+  notification,
+  customNotification,
+}) => {
+  const navigation = useNavigation<StackNavigationProp<HomeStackParams>>()
+  const [store, dispatch] = useStore()
+  const { t } = useTranslation()
+  const { ColorPallet } = useTheme()
+  const { agent } = useAgent()
+  const [declineModalVisible, setDeclineModalVisible] = useState(false)
+  const [action, setAction] = useState<any>()
+  const [closeAction, setCloseAction] = useState<any>()
+  const [logger] = useServices([TOKENS.UTIL_LOGGER])
+  const connectionId =
+    notification instanceof BasicMessageRecord ||
+    notification instanceof CredentialExchangeRecord ||
+    notification instanceof ProofExchangeRecord
+      ? notification.connectionId ?? ''
+      : ''
+  const connection = useConnectionById(connectionId)
+  const [details, setDetails] = useState<DisplayDetails>(defaultDetails)
+  const [styleConfig, setStyleConfig] = useState<StyleConfig>({
+    containerStyle: {
+      backgroundColor: ColorPallet.notification.info,
+      borderColor: ColorPallet.notification.infoBorder,
+    },
+    textStyle: {
+      color: ColorPallet.notification.infoText,
+    },
+    iconColor: ColorPallet.notification.infoIcon,
+    iconName: 'info',
+  })
+
+  const styles = StyleSheet.create({
+    container: {
+      borderRadius: 5,
+      borderWidth: 1,
+      padding: 10,
+    },
+    headerContainer: {
+      flexDirection: 'row',
+      paddingHorizontal: 5,
+      paddingTop: 5,
+    },
+    bodyContainer: {
+      flexGrow: 1,
+      flexDirection: 'column',
+      marginLeft: 10 + iconSize,
+      paddingHorizontal: 5,
+      paddingBottom: 5,
+    },
+    headerText: {
+      flexGrow: 1,
+      alignSelf: 'center',
+      flex: 1,
+    },
+    bodyText: {
+      flexShrink: 1,
+      marginVertical: 15,
+      paddingBottom: 10,
+    },
+    icon: {
+      marginRight: 10,
+      alignSelf: 'center',
+    },
+  })
+
+  const isReceivedProof = useMemo(() => {
+    return (
+      notificationType === NotificationType.ProofRequest &&
+      ((notification as ProofExchangeRecord).state === ProofState.Done ||
+        (notification as ProofExchangeRecord).state === ProofState.PresentationSent)
+    )
+  }, [notificationType, notification])
+
+  const toggleDeclineModalVisible = useCallback(() => setDeclineModalVisible((prev) => !prev), [])
+
+  const declineProofRequest = useCallback(async () => {
+    try {
+      const proofRecord = notification as ProofExchangeRecord
+
+      if (agent && proofRecord) {
+        const connectionId = proofRecord.connectionId ?? ''
+        const connection = await agent.connections.findById(connectionId)
+
+        if (connection) {
+          await agent.proofs.sendProblemReport({
+            proofRecordId: proofRecord.id,
+            description: t('ProofRequest.Declined'),
+          })
+        }
+
+        await agent.proofs.declineRequest({ proofRecordId: proofRecord.id })
+      }
+    } catch (err: unknown) {
+      const error = new BifoldError(t('Error.Title1028'), t('Error.Message1028'), (err as Error)?.message ?? err, 1028)
+      DeviceEventEmitter.emit(EventTypes.ERROR_ADDED, error)
+    }
+
+    toggleDeclineModalVisible()
+  }, [notification, agent, t, toggleDeclineModalVisible])
+
+  const dismissProofRequest = useCallback(async () => {
+    if (agent && notificationType === NotificationType.ProofRequest) {
+      markProofAsViewed(agent, notification as ProofExchangeRecord)
+    }
+  }, [agent, notification, notificationType])
+
+  const dismissBasicMessage = useCallback(async () => {
+    if (agent && notificationType === NotificationType.BasicMessage) {
+      markMessageAsSeen(agent, notification as BasicMessageRecord)
+    }
+  }, [agent, notification, notificationType])
+
+  const declineCredentialOffer = useCallback(async () => {
+    try {
+      const credentialId = (notification as CredentialExchangeRecord).id
+      if (agent) {
+        await agent.credentials.declineOffer(credentialId)
+      }
+    } catch (err: unknown) {
+      const error = new BifoldError(t('Error.Title1028'), t('Error.Message1028'), (err as Error)?.message ?? err, 1028)
+      DeviceEventEmitter.emit(EventTypes.ERROR_ADDED, error)
+    }
+
+    toggleDeclineModalVisible()
+  }, [notification, agent, t, toggleDeclineModalVisible])
+
+  const declineCustomNotification = useCallback(async () => {
+    customNotification?.onCloseAction(dispatch as any)
+    toggleDeclineModalVisible()
+  }, [customNotification, dispatch, toggleDeclineModalVisible])
+
+  const commonRemoveModal = () => {
+    let usage: ModalUsage | undefined
+    let onSubmit: GenericFn | undefined
+
+    if (notificationType === NotificationType.ProofRequest) {
+      usage = ModalUsage.ProofRequestDecline
+      if ((notification as ProofExchangeRecord).state === ProofState.Done) {
+        onSubmit = dismissProofRequest
+      } else {
+        onSubmit = declineProofRequest
+      }
+    } else if (notificationType === NotificationType.CredentialOffer) {
+      usage = ModalUsage.CredentialOfferDecline
+      onSubmit = declineCredentialOffer
+    } else if (notificationType === NotificationType.Custom) {
+      usage = ModalUsage.CustomNotificationDecline
+      onSubmit = declineCustomNotification
+    } else {
+      usage = undefined
+    }
+
+    return usage !== undefined && onSubmit !== undefined ? (
+      <CommonRemoveModal
+        usage={usage}
+        visible={declineModalVisible}
+        onSubmit={onSubmit}
+        onCancel={toggleDeclineModalVisible}
+      />
+    ) : null
+  }
+
+  useEffect(() => {
+    const getDetails = async () => {
+      const { name, version } = parsedSchema(notification as CredentialExchangeRecord)
+      const theirLabel = getConnectionName(connection, store.preferences.alternateContactNames)
+      let details
+      switch (notificationType) {
+        case NotificationType.BasicMessage:
+          details = {
+            type: InfoBoxType.Info,
+            title: t('Home.NewMessage'),
+            body: theirLabel ? `${theirLabel} ${t('Home.SentMessage')}` : t('Home.ReceivedMessage'),
+            buttonTitle: t('Home.ViewMessage'),
+          }
+          break
+        case NotificationType.CredentialOffer:
+          details = {
+            type: InfoBoxType.Info,
+            title: t('CredentialOffer.NewCredentialOffer'),
+            body: `${name + (version ? ` v${version}` : '')}`,
+            buttonTitle: undefined,
+          }
+          break
+        case NotificationType.ProofRequest: {
+          const proofId = (notification as ProofExchangeRecord).id
+          let message: V2RequestPresentationMessage | V1RequestPresentationMessage | null | undefined
+          try {
+            message = await agent?.proofs.findRequestMessage(proofId)
+          } catch (error) {
+            logger.error('Error finding request message:', error as CredoError)
+          }
+
+          // message.comment is the common fallback title for both v1 and v2 proof requests
+          let body: string = message?.comment ?? ''
+
+          if (message instanceof V1RequestPresentationMessage) {
+            body = message.indyProofRequest?.name ?? body
+          }
+
+          if (message instanceof V2RequestPresentationMessage) {
+            // workaround for getting proof request name in v2 proof request
+            // https://github.com/openwallet-foundation/credo-ts/blob/5f08bc67e3d1cc0ab98e7cce7747fedd2bf71ec1/packages/core/src/modules/proofs/protocol/v2/messages/V2RequestPresentationMessage.ts#L78
+            const attachment = message.requestAttachments.find((attachment) => attachment.id === 'indy')
+            const name = attachment?.getDataAsJson<AnonCredsProofRequest>()?.name ?? null
+            body = name ?? body
+          }
+
+          details = {
+            type: InfoBoxType.Info,
+            title: t('ProofRequest.NewProofRequest'),
+            body,
+            buttonTitle: undefined,
+          }
+          break
+        }
+        case NotificationType.Revocation:
+          details = {
+            type: InfoBoxType.Error,
+            title: t('CredentialDetails.NewRevoked'),
+            body: `${name + (version ? ` v${version}` : '')}`,
+            buttonTitle: undefined,
+          }
+          break
+        case NotificationType.Custom:
+          details = {
+            type: InfoBoxType.Info,
+            title: t(customNotification?.title as any),
+            body: t(customNotification?.description as any),
+            buttonTitle: t(customNotification?.buttonTitle as any),
+          }
+          break
+        default:
+          throw new Error('NotificationType was not set correctly.')
+      }
+
+      setDetails(details ?? defaultDetails)
+    }
+
+    getDetails()
+  }, [
+    notification,
+    notificationType,
+    logger,
+    connection,
+    store.preferences.alternateContactNames,
+    t,
+    agent,
+    customNotification,
+  ])
+
+  useEffect(() => {
+    let onPress: () => void
+    let onClose: () => void
+    switch (notificationType) {
+      case NotificationType.BasicMessage:
+        onPress = () => {
+          navigation.getParent()?.navigate(Stacks.ContactStack, {
+            screen: Screens.Chat,
+            params: { connectionId: (notification as BasicMessageRecord).connectionId },
+          })
+        }
+        onClose = dismissBasicMessage
+        break
+      case NotificationType.CredentialOffer:
+        onPress = () => {
+          navigation.getParent()?.navigate(Stacks.ConnectionStack, {
+            screen: Screens.Connection,
+            params: { credentialId: notification.id },
+          })
+        }
+        onClose = toggleDeclineModalVisible
+        break
+      case NotificationType.ProofRequest:
+        if (
+          (notification as ProofExchangeRecord).state === ProofState.Done ||
+          (notification as ProofExchangeRecord).state === ProofState.PresentationReceived
+        ) {
+          onPress = () => {
+            navigation.getParent()?.navigate(Stacks.ContactStack, {
+              screen: Screens.ProofDetails,
+              params: { recordId: notification.id, isHistory: true },
+            })
+          }
+        } else {
+          onPress = () => {
+            navigation.getParent()?.navigate(Stacks.ConnectionStack, {
+              screen: Screens.Connection,
+              params: { proofId: (notification as ProofExchangeRecord).id },
+            })
+          }
+        }
+        onClose = toggleDeclineModalVisible
+        break
+      case NotificationType.Proof:
+        onPress = () =>
+          navigation.getParent()?.navigate(Stacks.NotificationStack, {
+            screen: Screens.ProofDetails,
+            params: { recordId: notification.id, isHistory: true },
+          })
+        break
+      case NotificationType.Revocation:
+        onPress = () =>
+          navigation.getParent()?.navigate(Stacks.NotificationStack, {
+            screen: Screens.CredentialDetails,
+            params: { credentialId: notification.id },
+          })
+        break
+      case NotificationType.Custom:
+        onPress = () =>
+          navigation.getParent()?.navigate(Stacks.NotificationStack, {
+            screen: Screens.CustomNotification,
+          })
+        onClose = toggleDeclineModalVisible
+        break
+      default:
+        throw new Error('NotificationType was not set correctly.')
+    }
+    setAction(() => onPress)
+    setCloseAction(() => onClose)
+  }, [navigation, notification, notificationType, toggleDeclineModalVisible, dismissBasicMessage])
+
+  useEffect(() => {
+    switch (details.type) {
+      case InfoBoxType.Success:
+        setStyleConfig({
+          containerStyle: {
+            backgroundColor: ColorPallet.notification.success,
+            borderColor: ColorPallet.notification.successBorder,
+          },
+          textStyle: {
+            color: ColorPallet.notification.successText,
+          },
+          iconColor: ColorPallet.notification.successIcon,
+          iconName: 'check-circle',
+        })
+        break
+      case InfoBoxType.Warn:
+        setStyleConfig({
+          containerStyle: {
+            backgroundColor: ColorPallet.notification.warn,
+            borderColor: ColorPallet.notification.warnBorder,
+          },
+          textStyle: {
+            color: ColorPallet.notification.warnText,
+          },
+          iconColor: ColorPallet.notification.warnIcon,
+          iconName: 'warning',
+        })
+        break
+      case InfoBoxType.Error:
+        setStyleConfig({
+          containerStyle: {
+            backgroundColor: ColorPallet.notification.error,
+            borderColor: ColorPallet.notification.errorBorder,
+          },
+          textStyle: {
+            color: ColorPallet.notification.errorText,
+          },
+          iconColor: ColorPallet.notification.errorIcon,
+          iconName: 'error',
+        })
+        break
+      case InfoBoxType.Info:
+      default:
+        setStyleConfig({
+          containerStyle: {
+            backgroundColor: ColorPallet.notification.info,
+            borderColor: ColorPallet.notification.infoBorder,
+          },
+          textStyle: {
+            color: ColorPallet.notification.infoText,
+          },
+          iconColor: ColorPallet.notification.infoIcon,
+          iconName: 'info',
+        })
+    }
+  }, [details, ColorPallet])
+
+  return (
+    <View style={[styles.container, styleConfig.containerStyle]} testID={testIdWithKey('NotificationListItem')}>
+      <View style={styles.headerContainer}>
+        <View style={styles.icon}>
+          <Icon accessible={false} name={styleConfig.iconName} size={iconSize} color={styleConfig.iconColor} />
+        </View>
+        <ThemedText
+          variant="bold"
+          style={[styles.headerText, styleConfig.textStyle]}
+          testID={testIdWithKey('HeaderText')}
+        >
+          {details.title}
+        </ThemedText>
+        {[
+          NotificationType.BasicMessage,
+          NotificationType.Custom,
+          NotificationType.ProofRequest,
+          NotificationType.CredentialOffer,
+        ].includes(notificationType) && (
+          <View>
+            <TouchableOpacity
+              accessibilityLabel={t('Global.Dismiss')}
+              accessibilityRole={'button'}
+              testID={testIdWithKey(`Dismiss${notificationType}`)}
+              onPress={closeAction}
+              hitSlop={hitSlop}
+            >
+              <Icon name={'close'} size={iconSize} color={styleConfig.iconColor} />
+            </TouchableOpacity>
+          </View>
+        )}
+      </View>
+      <View style={styles.bodyContainer}>
+        <ThemedText style={[styles.bodyText, styleConfig.textStyle]} testID={testIdWithKey('BodyText')}>
+          {details.body}
+        </ThemedText>
+        <Button
+          title={details.buttonTitle ?? t('Global.View')}
+          accessibilityLabel={details.buttonTitle ?? t('Global.View')}
+          testID={testIdWithKey(`View${notificationType}${isReceivedProof ? 'Received' : ''}`)}
+          buttonType={ButtonType.Primary}
+          onPress={action}
+        />
+      </View>
+      {commonRemoveModal()}
+    </View>
+  )
+}
+
+export default NotificationListItem

package/src/components/misc/ActivityLogLink.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { View, Text, StyleSheet } from 'react-native'
+
+import { useTheme } from '../../contexts/theme'
+import { testIdWithKey } from '../../utils/testable'
+
+const ActivityLogLink: React.FC = () => {
+  const { ColorPallet } = useTheme()
+  const { t } = useTranslation()
+  const styles = StyleSheet.create({
+    textContainer: {
+      flexDirection: 'row',
+    },
+    text: {
+      color: ColorPallet.notification.infoText,
+    },
+    link: {
+      color: ColorPallet.notification.infoText,
+      textDecorationLine: 'underline',
+    },
+  })
+  return (
+    <View style={styles.textContainer} testID={testIdWithKey('ActivityLogLink')}>
+      <Text style={styles.text}>{t('ActivityLog.Your')}</Text>
+      <Text> </Text>
+      <Text style={styles.link}>{t('ActivityLog.Activity')}</Text>
+      <Text> </Text>
+      <Text style={styles.text}>{t('ActivityLog.Updated')}</Text>
+    </View>
+  )
+}
+
+export default ActivityLogLink

package/src/components/misc/AvatarView.tsx

@@ -0,0 +1,33 @@
+import { hashCode, hashToRGBA } from '@bifold/oca'
+import React from 'react'
+import { StyleSheet, Text, View, ViewStyle } from 'react-native'
+
+import { useTheme } from '../../contexts/theme'
+import { testIdWithKey } from '../../utils/testable'
+
+interface AvatarViewProps {
+  name: string
+  style?: ViewStyle
+}
+
+const AvatarView: React.FC<AvatarViewProps> = ({ name, style }) => {
+  const { ListItems } = useTheme()
+  const styles = StyleSheet.create({
+    avatar: {
+      ...ListItems.avatarCircle,
+      margin: 12,
+      borderWidth: 3,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+  })
+  return (
+    <View style={[styles.avatar, { borderColor: hashToRGBA(hashCode(name)) }, style]}>
+      <Text style={ListItems.avatarText} testID={testIdWithKey('AvatarName')}>
+        {name.charAt(0)}
+      </Text>
+    </View>
+  )
+}
+
+export default AvatarView