stream-chat-react-native-core 5.29.1-beta.4 → 5.30.0-beta.2

package/src/components/Message/MessageSimple/MessageDeleted.tsx

@@ -3,11 +3,9 @@ import { LayoutChangeEvent, StyleSheet, View } from 'react-native';
 
 import merge from 'lodash/merge';
 
-import type { MessageFooterProps } from './MessageFooter';
 import { MessageTextContainer } from './MessageTextContainer';
 
 import {
-  Alignment,
   MessageContextValue,
   useMessageContext,
 } from '../../../contexts/messageContext/MessageContext';
@@ -16,13 +14,9 @@ import {
   useMessagesContext,
 } from '../../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
-import {
-  TranslationContextValue,
-  useTranslationContext,
-} from '../../../contexts/translationContext/TranslationContext';
+import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 
 import type { DefaultStreamChatGenerics } from '../../../types/types';
-import type { MessageType } from '../../MessageList/hooks/useMessageList';
 
 const styles = StyleSheet.create({
   containerInner: {
@@ -40,17 +34,16 @@ const styles = StyleSheet.create({
 });
 
 type MessageDeletedComponentProps = {
-  formattedDate: string | Date;
   groupStyle: string;
   noBorder: boolean;
   onLayout: (event: LayoutChangeEvent) => void;
+  date?: string | Date;
 };
 
 type MessageDeletedPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<MessageContextValue<StreamChatGenerics>, 'alignment' | 'message'> &
   Pick<MessagesContextValue<StreamChatGenerics>, 'MessageFooter'> &
-  Pick<TranslationContextValue, 't'> &
   MessageDeletedComponentProps;
 
 const MessageDeletedWithContext = <
@@ -58,8 +51,7 @@ const MessageDeletedWithContext = <
 >(
   props: MessageDeletedPropsWithContext<StreamChatGenerics>,
 ) => {
-  const { alignment, formattedDate, groupStyle, message, MessageFooter, noBorder, onLayout, t } =
-    props;
+  const { alignment, date, groupStyle, message, MessageFooter, noBorder, onLayout } = props;
 
   const {
     theme: {
@@ -74,6 +66,7 @@ const MessageDeletedWithContext = <
       },
     },
   } = useTheme();
+  const { t } = useTranslationContext();
 
   return (
     <View
@@ -108,7 +101,7 @@ const MessageDeletedWithContext = <
           message={{ ...message, text: `_${t('Message deleted')}_` }}
         />
       </View>
-      <MessageFooter formattedDate={formattedDate} isDeleted />
+      <MessageFooter date={date} isDeleted />
     </View>
   );
 };
@@ -117,16 +110,8 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   prevProps: MessageDeletedPropsWithContext<StreamChatGenerics>,
   nextProps: MessageDeletedPropsWithContext<StreamChatGenerics>,
 ) => {
-  const {
-    alignment: prevAlignment,
-    formattedDate: prevFormattedDate,
-    message: prevMessage,
-  } = prevProps;
-  const {
-    alignment: nextAlignment,
-    formattedDate: nextFormattedDate,
-    message: nextMessage,
-  } = nextProps;
+  const { alignment: prevAlignment, date: prevDate, message: prevMessage } = prevProps;
+  const { alignment: nextAlignment, date: nextDate, message: nextMessage } = nextProps;
 
   const alignmentEqual = prevAlignment === nextAlignment;
   if (!alignmentEqual) return false;
@@ -142,8 +127,8 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     prevMessage.pinned === nextMessage.pinned;
   if (!messageEqual) return false;
 
-  const formattedDateEqual = prevFormattedDate === nextFormattedDate;
-  if (!formattedDateEqual) return false;
+  const dateEqual = prevDate === nextDate;
+  if (!dateEqual) return false;
 
   return true;
 };
@@ -155,10 +140,10 @@ const MemoizedMessageDeleted = React.memo(
 
 export type MessageDeletedProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = MessageDeletedComponentProps & {
-  alignment?: Alignment;
-  message?: MessageType<StreamChatGenerics>;
-  MessageFooter?: React.ComponentType<MessageFooterProps<StreamChatGenerics>>;
+> = Partial<MessageDeletedPropsWithContext<StreamChatGenerics>> & {
+  groupStyle: string;
+  noBorder: boolean;
+  onLayout: (event: LayoutChangeEvent) => void;
 };
 
 export const MessageDeleted = <
@@ -170,15 +155,12 @@ export const MessageDeleted = <
 
   const { MessageFooter } = useMessagesContext<StreamChatGenerics>();
 
-  const { t } = useTranslationContext();
-
   return (
     <MemoizedMessageDeleted
       {...{
         alignment,
         message,
         MessageFooter,
-        t,
       }}
       {...props}
     />

package/src/components/Message/MessageSimple/MessageEditedTimestamp.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { MessageTimestamp, MessageTimestampProps } from './MessageTimestamp';
+
+import {
+  MessageContextValue,
+  useMessageContext,
+} from '../../../contexts/messageContext/MessageContext';
+import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
+import { DefaultStreamChatGenerics } from '../../../types/types';
+import { isEditedMessage } from '../../../utils/utils';
+
+export type MessageEditedTimestampProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Partial<Pick<MessageContextValue<StreamChatGenerics>, 'message'>> & MessageTimestampProps;
+
+export const MessageEditedTimestamp = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: MessageEditedTimestampProps<StreamChatGenerics>,
+) => {
+  const { message: propMessage, timestamp } = props;
+  const {
+    theme: {
+      colors: { grey },
+      messageSimple: {
+        content: { editedLabel, editedTimestampContainer },
+      },
+    },
+  } = useTheme();
+  const { t } = useTranslationContext();
+  const { message: contextMessage } = useMessageContext<StreamChatGenerics>();
+  const message = propMessage || contextMessage;
+
+  if (!isEditedMessage(message)) {
+    return null;
+  }
+
+  return (
+    <View style={[styles.container, editedTimestampContainer]}>
+      <Text style={[styles.text, { color: grey }, editedLabel]}>{t<string>('Edited') + ' '}</Text>
+      <MessageTimestamp calendar={true} timestamp={timestamp} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+  },
+  text: {
+    fontSize: 12,
+  },
+});

package/src/components/Message/MessageSimple/MessageFooter.tsx

@@ -5,6 +5,8 @@ import type { Attachment } from 'stream-chat';
 
 import type { MessageStatusProps } from './MessageStatus';
 
+import { MessageTimestamp } from './MessageTimestamp';
+
 import type { ChannelContextValue } from '../../../contexts/channelContext/ChannelContext';
 import {
   Alignment,
@@ -21,11 +23,11 @@ import { useTranslationContext } from '../../../contexts/translationContext/Tran
 import { Eye } from '../../../icons';
 
 import type { DefaultStreamChatGenerics } from '../../../types/types';
-import { MessageStatusTypes } from '../../../utils/utils';
+import { isEditedMessage, MessageStatusTypes } from '../../../utils/utils';
 import type { MessageType } from '../../MessageList/hooks/useMessageList';
 
 type MessageFooterComponentProps = {
-  formattedDate: string | Date;
+  date?: string | Date;
   isDeleted?: boolean;
 };
 
@@ -34,6 +36,7 @@ type MessageFooterPropsWithContext<
 > = Pick<
   MessageContextValue<StreamChatGenerics>,
   | 'alignment'
+  | 'isEditedMessageOpen'
   | 'members'
   | 'message'
   | 'otherAttachments'
@@ -42,10 +45,41 @@ type MessageFooterPropsWithContext<
 > &
   Pick<
     MessagesContextValue<StreamChatGenerics>,
-    'deletedMessagesVisibilityType' | 'MessageStatus'
+    'deletedMessagesVisibilityType' | 'MessageEditedTimestamp' | 'MessageStatus'
   > &
   MessageFooterComponentProps;
 
+const OnlyVisibleToYouComponent = ({ alignment }: { alignment: Alignment }) => {
+  const {
+    theme: {
+      colors: { grey_dark },
+      messageSimple: {
+        content: { deletedMetaText, eyeIcon, metaText },
+      },
+    },
+  } = useTheme();
+  const { t } = useTranslationContext();
+
+  return (
+    <>
+      <Eye pathFill={grey_dark} {...eyeIcon} />
+      <Text
+        style={[
+          {
+            color: grey_dark,
+            textAlign: alignment,
+          },
+          metaText,
+          deletedMetaText,
+        ]}
+        testID='only-visible-to-you'
+      >
+        {t<string>('Only visible to you')}
+      </Text>
+    </>
+  );
+};
+
 const MessageFooterWithContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
@@ -53,12 +87,14 @@ const MessageFooterWithContext = <
 ) => {
   const {
     alignment,
+    date,
     deletedMessagesVisibilityType,
-    formattedDate,
     isDeleted,
+    isEditedMessageOpen,
     lastGroupMessage,
     members,
     message,
+    MessageEditedTimestamp,
     MessageStatus,
     otherAttachments,
     showMessageStatus,
@@ -66,9 +102,9 @@ const MessageFooterWithContext = <
 
   const {
     theme: {
-      colors: { grey, grey_dark },
+      colors: { grey },
       messageSimple: {
-        content: { deletedMetaText, eyeIcon, messageUser, metaContainer, metaText },
+        content: { editedLabel, messageUser, metaContainer, metaText },
       },
     },
   } = useTheme();
@@ -78,69 +114,51 @@ const MessageFooterWithContext = <
     return (
       <View style={[styles.container, metaContainer]} testID='message-deleted'>
         {deletedMessagesVisibilityType === 'sender' && (
+          <OnlyVisibleToYouComponent alignment={alignment} />
+        )}
+        <MessageTimestamp format='LT' timestamp={date} />
+      </View>
+    );
+  }
+
+  if (lastGroupMessage === false && message.status === MessageStatusTypes.RECEIVED) {
+    return null;
+  }
+
+  return (
+    <>
+      <View style={[styles.container, metaContainer]} testID='message-status-time'>
+        {otherAttachments.length && otherAttachments[0].actions ? (
+          <OnlyVisibleToYouComponent alignment={alignment} />
+        ) : null}
+        {Object.keys(members).length > 2 && alignment === 'left' && message.user?.name ? (
+          <Text style={[styles.text, { color: grey }, messageUser]}>{message.user.name}</Text>
+        ) : null}
+        {showMessageStatus && <MessageStatus />}
+        <MessageTimestamp format='LT' timestamp={date} />
+
+        {isEditedMessage(message) && !isEditedMessageOpen && (
           <>
-            <Eye pathFill={grey_dark} {...eyeIcon} />
             <Text
               style={[
+                styles.dotText,
                 {
-                  color: grey_dark,
+                  color: grey,
                   textAlign: alignment,
                 },
                 metaText,
-                deletedMetaText,
               ]}
-              testID='only-visible-to-you'
             >
-              {t<string>('Only visible to you')}
+              ⦁
+            </Text>
+            <Text style={[styles.text, { color: grey, textAlign: alignment }, editedLabel]}>
+              {t<string>('Edited')}
             </Text>
           </>
         )}
-        <Text
-          style={[
-            {
-              color: grey,
-              textAlign: alignment,
-            },
-            metaText,
-          ]}
-        >
-          {formattedDate.toString()}
-        </Text>
       </View>
-    );
-  }
-
-  if (lastGroupMessage === false && message.status === MessageStatusTypes.RECEIVED) {
-    return null;
-  }
-
-  return (
-    <View style={[styles.container, metaContainer]} testID='message-status-time'>
-      {otherAttachments.length && otherAttachments[0].actions ? (
-        <>
-          <Eye pathFill={grey_dark} {...eyeIcon} />
-          <Text
-            style={[
-              {
-                color: grey_dark,
-                textAlign: alignment,
-              },
-              metaText,
-              deletedMetaText,
-            ]}
-          >
-            {t<string>('Only visible to you')}
-          </Text>
-        </>
-      ) : null}
-      {Object.keys(members).length > 2 && alignment === 'left' && message.user?.name ? (
-        <Text style={[{ color: grey }, messageUser]}>{message.user.name}</Text>
-      ) : null}
-      {showMessageStatus && <MessageStatus />}
-      <Text style={[{ color: grey, textAlign: alignment }, metaText]}>
-        {formattedDate.toString()}
-      </Text>
-    </View>
+      {isEditedMessageOpen && <MessageEditedTimestamp format='LT' timestamp={date} />}
+    </>
   );
 };
 
@@ -150,7 +168,8 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
 ) => {
   const {
     alignment: prevAlignment,
-    formattedDate: prevFormattedDate,
+    date: prevDate,
+    isEditedMessageOpen: prevIsEditedMessageOpen,
     lastGroupMessage: prevLastGroupMessage,
     members: prevMembers,
     message: prevMessage,
@@ -159,7 +178,8 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   } = prevProps;
   const {
     alignment: nextAlignment,
-    formattedDate: nextFormattedDate,
+    date: nextDate,
+    isEditedMessageOpen: nextIsEditedMessageOpen,
     lastGroupMessage: nextLastGroupMessage,
     members: nextMembers,
     message: nextMessage,
@@ -170,6 +190,9 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   const alignmentEqual = prevAlignment === nextAlignment;
   if (!alignmentEqual) return false;
 
+  const isEditedMessageOpenEqual = prevIsEditedMessageOpen === nextIsEditedMessageOpen;
+  if (!isEditedMessageOpenEqual) return false;
+
   const membersEqual = Object.keys(prevMembers).length === Object.keys(nextMembers).length;
   if (!membersEqual) return false;
 
@@ -200,8 +223,8 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   const showMessageStatusEqual = prevShowMessageStatus === nextShowMessageStatus;
   if (!showMessageStatusEqual) return false;
 
-  const formattedDateEqual = prevFormattedDate === nextFormattedDate;
-  if (!formattedDateEqual) return false;
+  const dateEqual = prevDate === nextDate;
+  if (!dateEqual) return false;
 
   return true;
 };
@@ -228,19 +251,29 @@ export const MessageFooter = <
 >(
   props: MessageFooterProps<StreamChatGenerics>,
 ) => {
-  const { alignment, lastGroupMessage, members, message, otherAttachments, showMessageStatus } =
-    useMessageContext<StreamChatGenerics>();
+  const {
+    alignment,
+    isEditedMessageOpen,
+    lastGroupMessage,
+    members,
+    message,
+    otherAttachments,
+    showMessageStatus,
+  } = useMessageContext<StreamChatGenerics>();
 
-  const { deletedMessagesVisibilityType, MessageStatus } = useMessagesContext<StreamChatGenerics>();
+  const { deletedMessagesVisibilityType, MessageEditedTimestamp, MessageStatus } =
+    useMessagesContext<StreamChatGenerics>();
 
   return (
     <MemoizedMessageFooter
       {...{
         alignment,
         deletedMessagesVisibilityType,
+        isEditedMessageOpen,
         lastGroupMessage,
         members,
         message,
+        MessageEditedTimestamp,
         MessageStatus,
         otherAttachments,
         showMessageStatus,
@@ -252,7 +285,15 @@ export const MessageFooter = <
 
 const styles = StyleSheet.create({
   container: {
+    alignItems: 'center',
     flexDirection: 'row',
+    justifyContent: 'center',
     marginTop: 4,
   },
+  dotText: {
+    paddingHorizontal: 4,
+  },
+  text: {
+    fontSize: 12,
+  },
 });

package/src/components/Message/MessageSimple/MessageSimple.tsx

@@ -31,7 +31,13 @@ export type MessageSimplePropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<
   MessageContextValue<StreamChatGenerics>,
-  'alignment' | 'channel' | 'disabled' | 'groupStyles' | 'hasReactions' | 'message'
+  | 'alignment'
+  | 'channel'
+  | 'disabled'
+  | 'isEditedMessageOpen'
+  | 'groupStyles'
+  | 'hasReactions'
+  | 'message'
 > &
   Pick<
     MessagesContextValue<StreamChatGenerics>,
@@ -122,6 +128,7 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     disabled: prevDisabled,
     groupStyles: prevGroupStyles,
     hasReactions: prevHasReactions,
+    isEditedMessageOpen: prevIsEditedMessageOpen,
     message: prevMessage,
     myMessageTheme: prevMyMessageTheme,
   } = prevProps;
@@ -130,6 +137,7 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
     disabled: nextDisabled,
     groupStyles: nextGroupStyles,
     hasReactions: nextHasReactions,
+    isEditedMessageOpen: nextIsEditedMessageOpen,
     message: nextMessage,
     myMessageTheme: nextMyMessageTheme,
   } = nextProps;
@@ -146,6 +154,9 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   const groupStylesEqual = JSON.stringify(prevGroupStyles) === JSON.stringify(nextGroupStyles);
   if (!groupStylesEqual) return false;
 
+  const isEditedMessageOpenEqual = prevIsEditedMessageOpen === nextIsEditedMessageOpen;
+  if (!isEditedMessageOpenEqual) return false;
+
   const isPrevMessageTypeDeleted = prevMessage.type === 'deleted';
   const isNextMessageTypeDeleted = nextMessage.type === 'deleted';
 
@@ -219,7 +230,7 @@ export const MessageSimple = <
 >(
   props: MessageSimpleProps<StreamChatGenerics>,
 ) => {
-  const { alignment, channel, disabled, groupStyles, hasReactions, message } =
+  const { alignment, channel, disabled, groupStyles, hasReactions, isEditedMessageOpen, message } =
     useMessageContext<StreamChatGenerics>();
   const {
     enableMessageGroupingByUser,
@@ -238,6 +249,7 @@ export const MessageSimple = <
         enableMessageGroupingByUser,
         groupStyles,
         hasReactions,
+        isEditedMessageOpen,
         message,
         MessageAvatar,
         MessageContent,

package/src/components/Message/MessageSimple/MessageTimestamp.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { StyleSheet, Text } from 'react-native';
+
+import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+import {
+  TDateTimeParserInput,
+  TranslationContextValue,
+  useTranslationContext,
+} from '../../../contexts/translationContext/TranslationContext';
+import { getDateString } from '../../../utils/getDateString';
+
+export type MessageTimestampProps = Partial<Pick<TranslationContextValue, 'tDateTimeParser'>> & {
+  /**
+   * Whether to show the time in Calendar time format. Calendar time displays time relative to a today's date.
+   */
+  calendar?: boolean;
+  /**
+   * The format in which the date should be displayed.
+   */
+  format?: string;
+  /**
+   * A function to format the date.
+   */
+  formatDate?: (date: TDateTimeParserInput) => string;
+  /**
+   * The timestamp of the message.
+   */
+  timestamp?: string | Date;
+};
+
+export const MessageTimestamp = (props: MessageTimestampProps) => {
+  const { calendar, format, formatDate, tDateTimeParser: propsTDateTimeParser, timestamp } = props;
+  const {
+    theme: {
+      colors: { grey },
+      messageSimple: {
+        content: { timestampText },
+      },
+    },
+  } = useTheme();
+  const { tDateTimeParser: contextTDateTimeParser } = useTranslationContext();
+
+  if (!timestamp) return null;
+
+  const formattedDate = getDateString({
+    calendar,
+    date: timestamp,
+    format,
+    formatDate,
+    tDateTimeParser: propsTDateTimeParser || contextTDateTimeParser,
+  });
+
+  if (!formattedDate) return null;
+
+  return (
+    <Text style={[styles.text, { color: grey }, timestampText]}>{formattedDate.toString()}</Text>
+  );
+};
+
+const styles = StyleSheet.create({
+  text: {
+    fontSize: 12,
+  },
+});

package/src/components/Message/hooks/useCreateMessageContext.ts

@@ -24,6 +24,7 @@ export const useCreateMessageContext = <
   handleToggleReaction,
   hasReactions,
   images,
+  isEditedMessageOpen,
   isMyMessage,
   lastGroupMessage,
   lastReceivedId,
@@ -39,6 +40,7 @@ export const useCreateMessageContext = <
   otherAttachments,
   preventPress,
   reactions,
+  setIsEditedMessageOpen,
   showAvatar,
   showMessageOverlay,
   showMessageStatus,
@@ -78,6 +80,7 @@ export const useCreateMessageContext = <
       handleToggleReaction,
       hasReactions,
       images,
+      isEditedMessageOpen,
       isMyMessage,
       lastGroupMessage,
       lastReceivedId,
@@ -93,6 +96,7 @@ export const useCreateMessageContext = <
       otherAttachments,
       preventPress,
       reactions,
+      setIsEditedMessageOpen,
       showAvatar,
       showMessageOverlay,
       showMessageStatus,
@@ -107,6 +111,7 @@ export const useCreateMessageContext = <
       goToMessage,
       groupStylesLength,
       hasReactions,
+      isEditedMessageOpen,
       lastGroupMessage,
       lastReceivedId,
       membersValue,

package/src/components/MessageInput/hooks/useAudioController.tsx

@@ -138,11 +138,9 @@ export const useAudioController = () => {
       await Audio.stopPlayer();
     }
     // For Expo CLI
-    if (recording && typeof recording !== 'string') {
-      if (soundRef.current?.stopAsync && soundRef.current?.unloadAsync) {
-        await soundRef.current.stopAsync();
-        await soundRef.current?.unloadAsync();
-      }
+    if (soundRef.current?.stopAsync && soundRef.current?.unloadAsync) {
+      await soundRef.current.stopAsync();
+      await soundRef.current?.unloadAsync();
     }
   };
 

package/src/components/MessageList/DateHeader.tsx

@@ -21,7 +21,7 @@ const styles = StyleSheet.create({
 });
 
 export type DateHeaderProps = {
-  dateString: string;
+  dateString: string | number;
 };
 
 export const DateHeader = ({ dateString }: DateHeaderProps) => {

package/src/components/MessageList/InlineDateSeparator.tsx

@@ -2,10 +2,8 @@ import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import {
-  isDayOrMoment,
-  useTranslationContext,
-} from '../../contexts/translationContext/TranslationContext';
+import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
+import { getDateString } from '../../utils/getDateString';
 
 const styles = StyleSheet.create({
   container: {
@@ -42,10 +40,12 @@ export const InlineDateSeparator = ({ date }: InlineDateSeparatorProps) => {
   }
 
   const dateFormat = date.getFullYear() === new Date().getFullYear() ? 'MMM D' : 'MMM D, YYYY';
-  const tDate = tDateTimeParser(date);
-  const dateString = isDayOrMoment(tDate)
-    ? tDate.format(dateFormat)
-    : new Date(tDate).toDateString();
+
+  const dateString = getDateString({
+    date,
+    format: dateFormat,
+    tDateTimeParser,
+  });
 
   return (
     <View