Editing can update media

src/components/Timeline/Shared/Attachment.tsx

@@ -10,10 +10,9 @@ import { StackNavigationProp } from '@react-navigation/stack'
 import { RootStackParamList } from '@utils/navigation/navigators'
 import { StyleConstants } from '@utils/styles/constants'
 import layoutAnimation from '@utils/styles/layoutAnimation'
-import React, { useCallback, useMemo, useRef, useState } from 'react'
-import { useEffect } from 'react'
+import React, { useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Pressable, StyleSheet, View } from 'react-native'
+import { Pressable, View } from 'react-native'
 
 export interface Props {
   status: Pick<Mastodon.Status, 'media_attachments' | 'sensitive'>
@@ -24,24 +23,13 @@ const TimelineAttachment = React.memo(
     const { t } = useTranslation('componentTimeline')
 
     const [sensitiveShown, setSensitiveShown] = useState(status.sensitive)
-    const onPressBlurView = useCallback(() => {
-      analytics('timeline_shared_attachment_blurview_press_show')
-      layoutAnimation()
-      setSensitiveShown(false)
-      haptics('Light')
-    }, [])
-    const onPressShow = useCallback(() => {
-      analytics('timeline_shared_attachment_blurview_press_hide')
-      setSensitiveShown(true)
-      haptics('Light')
-    }, [])
 
     const imageUrls = useRef<
       RootStackParamList['Screen-ImagesViewer']['imageUrls']
     >([])
     const navigation = useNavigation<StackNavigationProp<RootStackParamList>>()
-    useEffect(() => {
-      status.media_attachments.forEach((attachment, index) => {
+    const navigateToImagesViewer = (id: string) => {
+      status.media_attachments.forEach(attachment => {
         switch (attachment.type) {
           case 'image':
             imageUrls.current.push({
@@ -55,117 +43,136 @@ const TimelineAttachment = React.memo(
             })
         }
       })
-    }, [])
-    const navigateToImagesViewer = (id: string) =>
       navigation.navigate('Screen-ImagesViewer', {
         imageUrls: imageUrls.current,
         id
       })
-    const attachments = useMemo(
-      () =>
-        status.media_attachments.map((attachment, index) => {
-          switch (attachment.type) {
-            case 'image':
-              return (
-                <AttachmentImage
-                  key={index}
-                  total={status.media_attachments.length}
-                  index={index}
-                  sensitiveShown={sensitiveShown}
-                  image={attachment}
-                  navigateToImagesViewer={navigateToImagesViewer}
-                />
-              )
-            case 'video':
-              return (
-                <AttachmentVideo
-                  key={index}
-                  total={status.media_attachments.length}
-                  index={index}
-                  sensitiveShown={sensitiveShown}
-                  video={attachment}
-                />
-              )
-            case 'gifv':
-              return (
-                <AttachmentVideo
-                  key={index}
-                  total={status.media_attachments.length}
-                  index={index}
-                  sensitiveShown={sensitiveShown}
-                  video={attachment}
-                  gifv
-                />
-              )
-            case 'audio':
-              return (
-                <AttachmentAudio
-                  key={index}
-                  total={status.media_attachments.length}
-                  index={index}
-                  sensitiveShown={sensitiveShown}
-                  audio={attachment}
-                />
-              )
-            default:
-              if (
-                attachment.preview_url?.endsWith('.jpg') ||
-                attachment.preview_url?.endsWith('.jpeg') ||
-                attachment.preview_url?.endsWith('.png') ||
-                attachment.preview_url?.endsWith('.gif') ||
-                attachment.remote_url?.endsWith('.jpg') ||
-                attachment.remote_url?.endsWith('.jpeg') ||
-                attachment.remote_url?.endsWith('.png') ||
-                attachment.remote_url?.endsWith('.gif')
-              ) {
-                imageUrls.current.push({
-                  id: attachment.id,
-                  preview_url: attachment.preview_url,
-                  url: attachment.url,
-                  remote_url: attachment.remote_url,
-                  blurhash: attachment.blurhash,
-                  width: attachment.meta?.original?.width,
-                  height: attachment.meta?.original?.height
-                })
+    }
+
+    return (
+      <View>
+        <View
+          style={{
+            marginTop: StyleConstants.Spacing.S,
+            flex: 1,
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            justifyContent: 'center',
+            alignContent: 'stretch'
+          }}
+        >
+          {status.media_attachments.map((attachment, index) => {
+            switch (attachment.type) {
+              case 'image':
                 return (
                   <AttachmentImage
                     key={index}
                     total={status.media_attachments.length}
                     index={index}
                     sensitiveShown={sensitiveShown}
-                    // @ts-ignore
                     image={attachment}
                     navigateToImagesViewer={navigateToImagesViewer}
                   />
                 )
-              } else {
+              case 'video':
                 return (
-                  <AttachmentUnsupported
+                  <AttachmentVideo
                     key={index}
                     total={status.media_attachments.length}
                     index={index}
                     sensitiveShown={sensitiveShown}
-                    attachment={attachment}
+                    video={attachment}
                   />
                 )
-              }
-          }
-        }),
-      [sensitiveShown]
-    )
-
-    return (
-      <View>
-        <View style={styles.container} children={attachments} />
+              case 'gifv':
+                return (
+                  <AttachmentVideo
+                    key={index}
+                    total={status.media_attachments.length}
+                    index={index}
+                    sensitiveShown={sensitiveShown}
+                    video={attachment}
+                    gifv
+                  />
+                )
+              case 'audio':
+                return (
+                  <AttachmentAudio
+                    key={index}
+                    total={status.media_attachments.length}
+                    index={index}
+                    sensitiveShown={sensitiveShown}
+                    audio={attachment}
+                  />
+                )
+              default:
+                if (
+                  attachment.preview_url?.endsWith('.jpg') ||
+                  attachment.preview_url?.endsWith('.jpeg') ||
+                  attachment.preview_url?.endsWith('.png') ||
+                  attachment.preview_url?.endsWith('.gif') ||
+                  attachment.remote_url?.endsWith('.jpg') ||
+                  attachment.remote_url?.endsWith('.jpeg') ||
+                  attachment.remote_url?.endsWith('.png') ||
+                  attachment.remote_url?.endsWith('.gif')
+                ) {
+                  imageUrls.current.push({
+                    id: attachment.id,
+                    preview_url: attachment.preview_url,
+                    url: attachment.url,
+                    remote_url: attachment.remote_url,
+                    blurhash: attachment.blurhash,
+                    width: attachment.meta?.original?.width,
+                    height: attachment.meta?.original?.height
+                  })
+                  return (
+                    <AttachmentImage
+                      key={index}
+                      total={status.media_attachments.length}
+                      index={index}
+                      sensitiveShown={sensitiveShown}
+                      // @ts-ignore
+                      image={attachment}
+                      navigateToImagesViewer={navigateToImagesViewer}
+                    />
+                  )
+                } else {
+                  return (
+                    <AttachmentUnsupported
+                      key={index}
+                      total={status.media_attachments.length}
+                      index={index}
+                      sensitiveShown={sensitiveShown}
+                      attachment={attachment}
+                    />
+                  )
+                }
+            }
+          })}
+        </View>
 
         {status.sensitive &&
           (sensitiveShown ? (
-            <Pressable style={styles.sensitiveBlur}>
+            <Pressable
+              style={{
+                position: 'absolute',
+                width: '100%',
+                height: '100%',
+                flex: 1,
+                justifyContent: 'center',
+                alignItems: 'center'
+              }}
+            >
               <Button
                 type='text'
                 content={t('shared.attachment.sensitive.button')}
                 overlay
-                onPress={onPressBlurView}
+                onPress={() => {
+                  analytics('timeline_shared_attachment_blurview_press_show')
+                  layoutAnimation()
+                  setSensitiveShown(false)
+                  haptics('Light')
+                }}
               />
             </Pressable>
           ) : (
@@ -174,7 +181,11 @@ const TimelineAttachment = React.memo(
               content='EyeOff'
               round
               overlay
-              onPress={onPressShow}
+              onPress={() => {
+                analytics('timeline_shared_attachment_blurview_press_hide')
+                setSensitiveShown(true)
+                haptics('Light')
+              }}
               style={{
                 position: 'absolute',
                 top: StyleConstants.Spacing.S * 2,
@@ -185,33 +196,28 @@ const TimelineAttachment = React.memo(
       </View>
     )
   },
-  () => true
+  (prev, next) => {
+    let isEqual = true
+
+    if (
+      prev.status.media_attachments.length !==
+      next.status.media_attachments.length
+    ) {
+      isEqual = false
+      return isEqual
+    }
+
+    prev.status.media_attachments.forEach((attachment, index) => {
+      if (
+        attachment.preview_url !==
+        next.status.media_attachments[index].preview_url
+      ) {
+        isEqual = false
+      }
+    })
+
+    return isEqual
+  }
 )
 
-const styles = StyleSheet.create({
-  container: {
-    marginTop: StyleConstants.Spacing.S,
-    flex: 1,
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    justifyContent: 'center',
-    alignContent: 'stretch'
-  },
-  sensitiveBlur: {
-    position: 'absolute',
-    width: '100%',
-    height: '100%',
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  sensitiveBlurButton: {
-    padding: StyleConstants.Spacing.S,
-    borderRadius: 6
-  },
-  sensitiveText: {
-    ...StyleConstants.FontStyle.M
-  }
-})
-
 export default TimelineAttachment

src/components/Timeline/Shared/Attachment/Image.tsx

@@ -1,8 +1,8 @@
 import analytics from '@components/analytics'
 import GracefullyImage from '@components/GracefullyImage'
 import { StyleConstants } from '@utils/styles/constants'
-import React, { useCallback } from 'react'
-import { StyleSheet, View } from 'react-native'
+import React from 'react'
+import { View } from 'react-native'
 import attachmentAspectRatio from './aspectRatio'
 
 export interface Props {
@@ -13,44 +13,43 @@ export interface Props {
   navigateToImagesViewer: (imageIndex: string) => void
 }
 
-const AttachmentImage = React.memo(
-  ({ total, index, sensitiveShown, image, navigateToImagesViewer }: Props) => {
-    const onPress = useCallback(() => {
-      analytics('timeline_shared_attachment_image_press', { id: image.id })
-      navigateToImagesViewer(image.id)
-    }, [])
-
-    return (
-      <View style={styles.base}>
-        <GracefullyImage
-          accessibilityLabel={image.description}
-          hidden={sensitiveShown}
-          uri={{ original: image.preview_url, remote: image.remote_url }}
-          blurhash={image.blurhash}
-          onPress={onPress}
-          style={{
-            aspectRatio:
-              total > 1 ||
-              !image.meta?.original?.width ||
-              !image.meta?.original?.height
-                ? attachmentAspectRatio({ total, index })
-                : image.meta.original.height / image.meta.original.width > 1
-                ? 1
-                : image.meta.original.width / image.meta.original.height
-          }}
-        />
-      </View>
-    )
-  },
-  (prev, next) => prev.sensitiveShown === next.sensitiveShown
-)
-
-const styles = StyleSheet.create({
-  base: {
-    flex: 1,
-    flexBasis: '50%',
-    padding: StyleConstants.Spacing.XS / 2
-  }
-})
+const AttachmentImage = ({
+  total,
+  index,
+  sensitiveShown,
+  image,
+  navigateToImagesViewer
+}: Props) => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        flexBasis: '50%',
+        padding: StyleConstants.Spacing.XS / 2
+      }}
+    >
+      <GracefullyImage
+        accessibilityLabel={image.description}
+        hidden={sensitiveShown}
+        uri={{ original: image.preview_url, remote: image.remote_url }}
+        blurhash={image.blurhash}
+        onPress={() => {
+          analytics('timeline_shared_attachment_image_press', { id: image.id })
+          navigateToImagesViewer(image.id)
+        }}
+        style={{
+          aspectRatio:
+            total > 1 ||
+            !image.meta?.original?.width ||
+            !image.meta?.original?.height
+              ? attachmentAspectRatio({ total, index })
+              : image.meta.original.height / image.meta.original.width > 1
+              ? 1
+              : image.meta.original.width / image.meta.original.height
+        }}
+      />
+    </View>
+  )
+}
 
 export default AttachmentImage

src/components/Timeline/Shared/HeaderConversation.tsx

@@ -10,142 +10,116 @@ import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Pressable, StyleSheet, Text, View } from 'react-native'
+import { Pressable, Text, View } from 'react-native'
 import { useQueryClient } from 'react-query'
 import HeaderSharedCreated from './HeaderShared/Created'
 import HeaderSharedMuted from './HeaderShared/Muted'
 
-const Names = React.memo(
-  ({ accounts }: { accounts: Mastodon.Account[] }) => {
-    const { t } = useTranslation('componentTimeline')
-    const { colors } = useTheme()
+const Names = ({ accounts }: { accounts: Mastodon.Account[] }) => {
+  const { t } = useTranslation('componentTimeline')
+  const { colors } = useTheme()
 
-    return (
-      <Text
-        numberOfLines={1}
-        style={[styles.namesLeading, { color: colors.secondary }]}
-      >
-        <Text>{t('shared.header.conversation.withAccounts')}</Text>
-        {accounts.map((account, index) => (
-          <Text key={account.id} numberOfLines={1}>
-            {index !== 0 ? t('common:separator') : undefined}
-            <ParseEmojis
-              content={account.display_name || account.username}
-              emojis={account.emojis}
-              fontBold
-            />
-          </Text>
-        ))}
-      </Text>
-    )
-  },
-  () => true
-)
+  return (
+    <Text
+      numberOfLines={1}
+      style={{ ...StyleConstants.FontStyle.M, color: colors.secondary }}
+    >
+      <Text>{t('shared.header.conversation.withAccounts')}</Text>
+      {accounts.map((account, index) => (
+        <Text key={account.id} numberOfLines={1}>
+          {index !== 0 ? t('common:separator') : undefined}
+          <ParseEmojis
+            content={account.display_name || account.username}
+            emojis={account.emojis}
+            fontBold
+          />
+        </Text>
+      ))}
+    </Text>
+  )
+}
 
 export interface Props {
   queryKey: QueryKeyTimeline
   conversation: Mastodon.Conversation
 }
 
-const HeaderConversation = React.memo(
-  ({ queryKey, conversation }: Props) => {
-    const { colors, theme } = useTheme()
-    const { t } = useTranslation('componentTimeline')
+const HeaderConversation = ({ queryKey, conversation }: Props) => {
+  const { colors, theme } = useTheme()
+  const { t } = useTranslation('componentTimeline')
 
-    const queryClient = useQueryClient()
-    const mutation = useTimelineMutation({
-      onMutate: true,
-      onError: (err: any, _, oldData) => {
-        displayMessage({
-          theme,
-          type: 'error',
-          message: t('common:message.error.message', {
-            function: t(`shared.header.conversation.delete.function`)
-          }),
-          ...(err.status &&
-            typeof err.status === 'number' &&
-            err.data &&
-            err.data.error &&
-            typeof err.data.error === 'string' && {
-              description: err.data.error
-            })
-        })
-        queryClient.setQueryData(queryKey, oldData)
-      }
-    })
-
-    const actionOnPress = useCallback(() => {
-      analytics('timeline_conversation_delete_press')
-      mutation.mutate({
-        type: 'deleteItem',
-        source: 'conversations',
-        queryKey,
-        id: conversation.id
+  const queryClient = useQueryClient()
+  const mutation = useTimelineMutation({
+    onMutate: true,
+    onError: (err: any, _, oldData) => {
+      displayMessage({
+        theme,
+        type: 'error',
+        message: t('common:message.error.message', {
+          function: t(`shared.header.conversation.delete.function`)
+        }),
+        ...(err.status &&
+          typeof err.status === 'number' &&
+          err.data &&
+          err.data.error &&
+          typeof err.data.error === 'string' && {
+            description: err.data.error
+          })
       })
-    }, [])
+      queryClient.setQueryData(queryKey, oldData)
+    }
+  })
 
-    const actionChildren = useMemo(
-      () => (
-        <Icon
-          name='Trash'
-          color={colors.secondary}
-          size={StyleConstants.Font.Size.L}
-        />
-      ),
-      []
-    )
+  const actionOnPress = useCallback(() => {
+    analytics('timeline_conversation_delete_press')
+    mutation.mutate({
+      type: 'deleteItem',
+      source: 'conversations',
+      queryKey,
+      id: conversation.id
+    })
+  }, [])
 
-    return (
-      <View style={styles.base}>
-        <View style={styles.nameAndMeta}>
-          <Names accounts={conversation.accounts} />
-          <View style={styles.meta}>
-            {conversation.last_status?.created_at ? (
-              <HeaderSharedCreated
-                created_at={conversation.last_status?.created_at}
-                edited_at={conversation.last_status?.edited_at}
-              />
-            ) : null}
-            <HeaderSharedMuted muted={conversation.last_status?.muted} />
-          </View>
+  const actionChildren = useMemo(
+    () => (
+      <Icon
+        name='Trash'
+        color={colors.secondary}
+        size={StyleConstants.Font.Size.L}
+      />
+    ),
+    []
+  )
+
+  return (
+    <View style={{ flex: 1, flexDirection: 'row' }}>
+      <View style={{ flex: 3 }}>
+        <Names accounts={conversation.accounts} />
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            marginTop: StyleConstants.Spacing.XS,
+            marginBottom: StyleConstants.Spacing.S
+          }}
+        >
+          {conversation.last_status?.created_at ? (
+            <HeaderSharedCreated
+              created_at={conversation.last_status?.created_at}
+              edited_at={conversation.last_status?.edited_at}
+            />
+          ) : null}
+          <HeaderSharedMuted muted={conversation.last_status?.muted} />
         </View>
-
-        <Pressable
-          style={styles.action}
-          onPress={actionOnPress}
-          children={actionChildren}
-        />
       </View>
-    )
-  },
-  () => true
-)
 
-const styles = StyleSheet.create({
-  base: {
-    flex: 1,
-    flexDirection: 'row'
-  },
-  nameAndMeta: {
-    flex: 3
-  },
-  meta: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginTop: StyleConstants.Spacing.XS,
-    marginBottom: StyleConstants.Spacing.S
-  },
-  created_at: {
-    ...StyleConstants.FontStyle.S
-  },
-  action: {
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'center'
-  },
-  namesLeading: {
-    ...StyleConstants.FontStyle.M
-  }
-})
+      <Pressable
+        style={{ flex: 1, flexDirection: 'row', justifyContent: 'center' }}
+        onPress={actionOnPress}
+        children={actionChildren}
+      />
+    </View>
+  )
+}
 
 export default HeaderConversation

src/components/Timeline/Shared/HeaderDefault.tsx

@@ -7,7 +7,7 @@ import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Pressable, StyleSheet, View } from 'react-native'
+import { Pressable, View } from 'react-native'
 import HeaderSharedAccount from './HeaderShared/Account'
 import HeaderSharedApplication from './HeaderShared/Application'
 import HeaderSharedCreated from './HeaderShared/Created'
@@ -20,77 +20,61 @@ export interface Props {
   status: Mastodon.Status
 }
 
-const TimelineHeaderDefault = React.memo(
-  ({ queryKey, rootQueryKey, status }: Props) => {
-    const { t } = useTranslation('componentTimeline')
-    const navigation = useNavigation<StackNavigationProp<RootStackParamList>>()
-    const { colors } = useTheme()
+const TimelineHeaderDefault = ({ queryKey, rootQueryKey, status }: Props) => {
+  const { t } = useTranslation('componentTimeline')
+  const navigation = useNavigation<StackNavigationProp<RootStackParamList>>()
+  const { colors } = useTheme()
 
-    return (
-      <View style={styles.base}>
-        <View style={styles.accountAndMeta}>
-          <HeaderSharedAccount account={status.account} />
-          <View style={styles.meta}>
-            <HeaderSharedCreated
-              created_at={status.created_at}
-              edited_at={status.edited_at}
-            />
-            <HeaderSharedVisibility visibility={status.visibility} />
-            <HeaderSharedMuted muted={status.muted} />
-            <HeaderSharedApplication application={status.application} />
-          </View>
-        </View>
-
-        {queryKey ? (
-          <Pressable
-            accessibilityHint={t('shared.header.actions.accessibilityHint')}
-            style={styles.action}
-            onPress={() =>
-              navigation.navigate('Screen-Actions', {
-                queryKey,
-                rootQueryKey,
-                status,
-                type: 'status'
-              })
-            }
-            children={
-              <Icon
-                name='MoreHorizontal'
-                color={colors.secondary}
-                size={StyleConstants.Font.Size.L}
-              />
-            }
+  return (
+    <View style={{ flex: 1, flexDirection: 'row' }}>
+      <View style={{ flex: 5 }}>
+        <HeaderSharedAccount account={status.account} />
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            marginTop: StyleConstants.Spacing.XS,
+            marginBottom: StyleConstants.Spacing.S
+          }}
+        >
+          <HeaderSharedCreated
+            created_at={status.created_at}
+            edited_at={status.edited_at}
           />
-        ) : null}
+          <HeaderSharedVisibility visibility={status.visibility} />
+          <HeaderSharedMuted muted={status.muted} />
+          <HeaderSharedApplication application={status.application} />
+        </View>
       </View>
-    )
-  },
-  () => true
-)
 
-const styles = StyleSheet.create({
-  base: {
-    flex: 1,
-    flexDirection: 'row'
-  },
-  accountAndMeta: {
-    flex: 5
-  },
-  meta: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginTop: StyleConstants.Spacing.XS,
-    marginBottom: StyleConstants.Spacing.S
-  },
-  created_at: {
-    ...StyleConstants.FontStyle.S
-  },
-  action: {
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'center',
-    paddingBottom: StyleConstants.Spacing.S
-  }
-})
+      {queryKey ? (
+        <Pressable
+          accessibilityHint={t('shared.header.actions.accessibilityHint')}
+          style={{
+            flex: 1,
+            flexDirection: 'row',
+            justifyContent: 'center',
+            paddingBottom: StyleConstants.Spacing.S
+          }}
+          onPress={() =>
+            navigation.navigate('Screen-Actions', {
+              queryKey,
+              rootQueryKey,
+              status,
+              type: 'status'
+            })
+          }
+          children={
+            <Icon
+              name='MoreHorizontal'
+              color={colors.secondary}
+              size={StyleConstants.Font.Size.L}
+            />
+          }
+        />
+      ) : null}
+    </View>
+  )
+}
 
 export default TimelineHeaderDefault

src/components/Timeline/Shared/HeaderNotification.tsx

@@ -10,7 +10,7 @@ import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useMemo } from 'react'
-import { Pressable, StyleSheet, View } from 'react-native'
+import { Pressable, View } from 'react-native'
 import HeaderSharedAccount from './HeaderShared/Account'
 import HeaderSharedApplication from './HeaderShared/Application'
 import HeaderSharedCreated from './HeaderShared/Created'
@@ -22,115 +22,103 @@ export interface Props {
   notification: Mastodon.Notification
 }
 
-const TimelineHeaderNotification = React.memo(
-  ({ queryKey, notification }: Props) => {
-    const navigation = useNavigation<StackNavigationProp<RootStackParamList>>()
-    const { colors } = useTheme()
+const TimelineHeaderNotification = ({ queryKey, notification }: Props) => {
+  const navigation = useNavigation<StackNavigationProp<RootStackParamList>>()
+  const { colors } = useTheme()
 
-    const actions = useMemo(() => {
-      switch (notification.type) {
-        case 'follow':
-          return <RelationshipOutgoing id={notification.account.id} />
-        case 'follow_request':
-          return <RelationshipIncoming id={notification.account.id} />
-        default:
-          if (notification.status) {
-            return (
-              <Pressable
-                style={{
-                  flex: 1,
-                  flexDirection: 'row',
-                  justifyContent: 'center',
-                  paddingBottom: StyleConstants.Spacing.S
-                }}
-                onPress={() =>
-                  navigation.navigate('Screen-Actions', {
-                    queryKey,
-                    status: notification.status!,
-                    type: 'status'
-                  })
-                }
-                children={
-                  <Icon
-                    name='MoreHorizontal'
-                    color={colors.secondary}
-                    size={StyleConstants.Font.Size.L}
-                  />
-                }
-              />
-            )
-          }
-      }
-    }, [notification.type])
-
-    return (
-      <View style={styles.base}>
-        <View
-          style={{
-            flex:
-              notification.type === 'follow' ||
-              notification.type === 'follow_request'
-                ? 1
-                : 4
-          }}
-        >
-          <HeaderSharedAccount
-            account={
-              notification.status
-                ? notification.status.account
-                : notification.account
-            }
-            {...((notification.type === 'follow' ||
-              notification.type === 'follow_request') && { withoutName: true })}
-          />
-          <View style={styles.meta}>
-            <HeaderSharedCreated
-              created_at={notification.created_at}
-              edited_at={notification.status?.edited_at}
+  const actions = useMemo(() => {
+    switch (notification.type) {
+      case 'follow':
+        return <RelationshipOutgoing id={notification.account.id} />
+      case 'follow_request':
+        return <RelationshipIncoming id={notification.account.id} />
+      default:
+        if (notification.status) {
+          return (
+            <Pressable
+              style={{
+                flex: 1,
+                flexDirection: 'row',
+                justifyContent: 'center',
+                paddingBottom: StyleConstants.Spacing.S
+              }}
+              onPress={() =>
+                navigation.navigate('Screen-Actions', {
+                  queryKey,
+                  status: notification.status!,
+                  type: 'status'
+                })
+              }
+              children={
+                <Icon
+                  name='MoreHorizontal'
+                  color={colors.secondary}
+                  size={StyleConstants.Font.Size.L}
+                />
+              }
             />
-            {notification.status?.visibility ? (
-              <HeaderSharedVisibility
-                visibility={notification.status.visibility}
-              />
-            ) : null}
-            <HeaderSharedMuted muted={notification.status?.muted} />
-            <HeaderSharedApplication
-              application={notification.status?.application}
-            />
-          </View>
-        </View>
+          )
+        }
+    }
+  }, [notification.type])
 
-        <View
-          style={[
-            styles.relationship,
+  return (
+    <View style={{ flex: 1, flexDirection: 'row' }}>
+      <View
+        style={{
+          flex:
             notification.type === 'follow' ||
             notification.type === 'follow_request'
-              ? { flexShrink: 1 }
-              : { flex: 1 }
-          ]}
+              ? 1
+              : 4
+        }}
+      >
+        <HeaderSharedAccount
+          account={
+            notification.status
+              ? notification.status.account
+              : notification.account
+          }
+          {...((notification.type === 'follow' ||
+            notification.type === 'follow_request') && { withoutName: true })}
+        />
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            marginTop: StyleConstants.Spacing.XS,
+            marginBottom: StyleConstants.Spacing.S
+          }}
         >
-          {actions}
+          <HeaderSharedCreated
+            created_at={notification.created_at}
+            edited_at={notification.status?.edited_at}
+          />
+          {notification.status?.visibility ? (
+            <HeaderSharedVisibility
+              visibility={notification.status.visibility}
+            />
+          ) : null}
+          <HeaderSharedMuted muted={notification.status?.muted} />
+          <HeaderSharedApplication
+            application={notification.status?.application}
+          />
         </View>
       </View>
-    )
-  },
-  () => true
-)
 
-const styles = StyleSheet.create({
-  base: {
-    flex: 1,
-    flexDirection: 'row'
-  },
-  meta: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginTop: StyleConstants.Spacing.XS,
-    marginBottom: StyleConstants.Spacing.S
-  },
-  relationship: {
-    marginLeft: StyleConstants.Spacing.M
-  }
-})
+      <View
+        style={[
+          { marginLeft: StyleConstants.Spacing.M },
+          notification.type === 'follow' ||
+          notification.type === 'follow_request'
+            ? { flexShrink: 1 }
+            : { flex: 1 }
+        ]}
+      >
+        {actions}
+      </View>
+    </View>
+  )
+}
 
 export default TimelineHeaderNotification