Clean up core timeline components

src/components/Timeline/Conversation.tsx

@@ -8,8 +8,9 @@ import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
 import { getInstanceAccount } from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
+import { isEqual } from 'lodash'
 import React, { useCallback } from 'react'
-import { Pressable, StyleSheet, View } from 'react-native'
+import { Pressable, View } from 'react-native'
 import { useMutation, useQueryClient } from 'react-query'
 import { useSelector } from 'react-redux'
 import TimelineActions from './Shared/Actions'
@@ -54,117 +55,107 @@ export interface Props {
   highlighted?: boolean
 }
 
-const TimelineConversation: React.FC<Props> = ({
+const TimelineConversation = React.memo(
-  conversation,
+  ({ conversation, queryKey, highlighted = false }: Props) => {
-  queryKey,
+    const instanceAccount = useSelector(
-  highlighted = false
+      getInstanceAccount,
-}) => {
+      (prev, next) => prev?.id === next?.id
-  const instanceAccount = useSelector(
+    )
-    getInstanceAccount,
+    const { colors } = useTheme()
-    (prev, next) => prev?.id === next?.id
-  )
-  const { colors } = useTheme()
 
-  const queryClient = useQueryClient()
+    const queryClient = useQueryClient()
-  const fireMutation = useCallback(() => {
+    const fireMutation = useCallback(() => {
-    return apiInstance<Mastodon.Conversation>({
+      return apiInstance<Mastodon.Conversation>({
-      method: 'post',
+        method: 'post',
-      url: `conversations/${conversation.id}/read`
+        url: `conversations/${conversation.id}/read`
-    })
-  }, [])
-  const { mutate } = useMutation(fireMutation, {
-    onSettled: () => {
-      queryClient.invalidateQueries(queryKey)
-    }
-  })
-
-  const navigation =
-    useNavigation<StackNavigationProp<TabLocalStackParamList>>()
-  const onPress = useCallback(() => {
-    analytics('timeline_conversation_press')
-    if (conversation.last_status) {
-      conversation.unread && mutate()
-      navigation.push('Tab-Shared-Toot', {
-        toot: conversation.last_status,
-        rootQueryKey: queryKey
       })
-    }
+    }, [])
-  }, [])
+    const { mutate } = useMutation(fireMutation, {
+      onSettled: () => {
+        queryClient.invalidateQueries(queryKey)
+      }
+    })
 
-  return (
+    const navigation =
-    <Pressable
+      useNavigation<StackNavigationProp<TabLocalStackParamList>>()
-      style={[
+    const onPress = useCallback(() => {
-        styles.base,
+      analytics('timeline_conversation_press')
-        { backgroundColor: colors.backgroundDefault },
+      if (conversation.last_status) {
-        conversation.unread && {
+        conversation.unread && mutate()
-          borderLeftWidth: StyleConstants.Spacing.XS,
+        navigation.push('Tab-Shared-Toot', {
-          borderLeftColor: colors.blue,
+          toot: conversation.last_status,
-          paddingLeft:
+          rootQueryKey: queryKey
-            StyleConstants.Spacing.Global.PagePadding -
+        })
-            StyleConstants.Spacing.XS
+      }
-        }
+    }, [])
-      ]}
-      onPress={onPress}
-    >
-      <View style={styles.header}>
-        <Avatars accounts={conversation.accounts} />
-        <TimelineHeaderConversation
-          queryKey={queryKey}
-          conversation={conversation}
-        />
-      </View>
 
-      {conversation.last_status ? (
+    return (
-        <>
+      <Pressable
-          <View
+        style={[
-            style={{
+          {
-              paddingTop: highlighted ? StyleConstants.Spacing.S : 0,
+            flex: 1,
-              paddingLeft: highlighted
+            flexDirection: 'column',
-                ? 0
+            padding: StyleConstants.Spacing.Global.PagePadding,
-                : StyleConstants.Avatar.M + StyleConstants.Spacing.S
+            paddingBottom: 0,
-            }}
+            backgroundColor: colors.backgroundDefault
-          >
+          },
-            <TimelineContent
+          conversation.unread && {
+            borderLeftWidth: StyleConstants.Spacing.XS,
+            borderLeftColor: colors.blue,
+            paddingLeft:
+              StyleConstants.Spacing.Global.PagePadding -
+              StyleConstants.Spacing.XS
+          }
+        ]}
+        onPress={onPress}
+      >
+        <View style={{ flex: 1, width: '100%', flexDirection: 'row' }}>
+          <Avatars accounts={conversation.accounts} />
+          <TimelineHeaderConversation
+            queryKey={queryKey}
+            conversation={conversation}
+          />
+        </View>
+
+        {conversation.last_status ? (
+          <>
+            <View
+              style={{
+                paddingTop: highlighted ? StyleConstants.Spacing.S : 0,
+                paddingLeft: highlighted
+                  ? 0
+                  : StyleConstants.Avatar.M + StyleConstants.Spacing.S
+              }}
+            >
+              <TimelineContent
+                status={conversation.last_status}
+                highlighted={highlighted}
+              />
+              {conversation.last_status.poll ? (
+                <TimelinePoll
+                  queryKey={queryKey}
+                  statusId={conversation.last_status.id}
+                  poll={conversation.last_status.poll}
+                  reblog={false}
+                  sameAccount={
+                    conversation.last_status.id === instanceAccount?.id
+                  }
+                />
+              ) : null}
+            </View>
+            <TimelineActions
+              queryKey={queryKey}
               status={conversation.last_status}
               highlighted={highlighted}
+              accts={conversation.accounts.map(account => account.acct)}
+              reblog={false}
             />
-            {conversation.last_status.poll ? (
+          </>
-              <TimelinePoll
+        ) : null}
-                queryKey={queryKey}
+      </Pressable>
-                statusId={conversation.last_status.id}
+    )
-                poll={conversation.last_status.poll}
-                reblog={false}
-                sameAccount={
-                  conversation.last_status.id === instanceAccount?.id
-                }
-              />
-            ) : null}
-          </View>
-          <TimelineActions
-            queryKey={queryKey}
-            status={conversation.last_status}
-            highlighted={highlighted}
-            accts={conversation.accounts.map(account => account.acct)}
-            reblog={false}
-          />
-        </>
-      ) : null}
-    </Pressable>
-  )
-}
-
-const styles = StyleSheet.create({
-  base: {
-    flex: 1,
-    flexDirection: 'column',
-    padding: StyleConstants.Spacing.Global.PagePadding,
-    paddingBottom: 0
   },
-  header: {
+  (prev, next) => isEqual(prev.conversation, next.conversation)
-    flex: 1,
+)
-    width: '100%',
-    flexDirection: 'row'
-  }
-})
 
 export default TimelineConversation

src/components/Timeline/Default.tsx

@@ -14,9 +14,9 @@ import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
 import { getInstanceAccount } from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import { uniqBy } from 'lodash'
+import { isEqual, uniqBy } from 'lodash'
 import React, { useCallback } from 'react'
-import { Pressable, StyleSheet, View } from 'react-native'
+import { Pressable, View } from 'react-native'
 import { useSelector } from 'react-redux'
 import TimelineFeedback from './Shared/Feedback'
 import TimelineFiltered, { shouldFilter } from './Shared/Filtered'
@@ -34,148 +34,143 @@ export interface Props {
 }
 
 // When the poll is long
-const TimelineDefault: React.FC<Props> = ({
+const TimelineDefault = React.memo(
-  item,
+  ({
-  queryKey,
+    item,
-  rootQueryKey,
+    queryKey,
-  origin,
+    rootQueryKey,
-  highlighted = false,
+    origin,
-  disableDetails = false,
+    highlighted = false,
-  disableOnPress = false
+    disableDetails = false,
-}) => {
+    disableOnPress = false
-  const { colors } = useTheme()
+  }: Props) => {
-  const instanceAccount = useSelector(getInstanceAccount, () => true)
+    const { colors } = useTheme()
-  const navigation =
+    const instanceAccount = useSelector(getInstanceAccount, () => true)
-    useNavigation<StackNavigationProp<TabLocalStackParamList>>()
+    const navigation =
+      useNavigation<StackNavigationProp<TabLocalStackParamList>>()
 
-  const actualStatus = item.reblog ? item.reblog : item
+    const actualStatus = item.reblog ? item.reblog : item
 
-  const ownAccount = actualStatus.account?.id === instanceAccount?.id
+    const ownAccount = actualStatus.account?.id === instanceAccount?.id
 
-  if (
+    if (
-    !highlighted &&
-    queryKey &&
-    shouldFilter({ status: actualStatus, queryKey })
-  ) {
-    return <TimelineFiltered />
-  }
-
-  const onPress = useCallback(() => {
-    analytics('timeline_default_press', {
-      page: queryKey ? queryKey[1].page : origin
-    })
-    !disableOnPress &&
       !highlighted &&
-      navigation.push('Tab-Shared-Toot', {
+      queryKey &&
-        toot: actualStatus,
+      shouldFilter({ status: actualStatus, queryKey })
-        rootQueryKey: queryKey
+    ) {
-      })
+      return <TimelineFiltered />
-  }, [])
+    }
 
-  return (
+    const onPress = useCallback(() => {
-    <Pressable
+      analytics('timeline_default_press', {
-      accessible={highlighted ? false : true}
+        page: queryKey ? queryKey[1].page : origin
-      style={[
+      })
-        styles.statusView,
+      !disableOnPress &&
-        {
+        !highlighted &&
+        navigation.push('Tab-Shared-Toot', {
+          toot: actualStatus,
+          rootQueryKey: queryKey
+        })
+    }, [])
+
+    return (
+      <Pressable
+        accessible={highlighted ? false : true}
+        style={{
+          padding: StyleConstants.Spacing.Global.PagePadding,
           backgroundColor: colors.backgroundDefault,
           paddingBottom:
             disableDetails && disableOnPress
               ? StyleConstants.Spacing.Global.PagePadding
               : 0
-        }
-      ]}
-      onPress={onPress}
-    >
-      {item.reblog ? (
-        <TimelineActioned action='reblog' account={item.account} />
-      ) : item._pinned ? (
-        <TimelineActioned action='pinned' account={item.account} />
-      ) : null}
-
-      <View style={styles.header}>
-        <TimelineAvatar
-          queryKey={disableOnPress ? undefined : queryKey}
-          account={actualStatus.account}
-          highlighted={highlighted}
-        />
-        <TimelineHeaderDefault
-          queryKey={disableOnPress ? undefined : queryKey}
-          rootQueryKey={disableOnPress ? undefined : rootQueryKey}
-          status={actualStatus}
-        />
-      </View>
-
-      <View
-        style={{
-          paddingTop: highlighted ? StyleConstants.Spacing.S : 0,
-          paddingLeft: highlighted
-            ? 0
-            : StyleConstants.Avatar.M + StyleConstants.Spacing.S
         }}
+        onPress={onPress}
       >
-        {typeof actualStatus.content === 'string' &&
+        {item.reblog ? (
-        actualStatus.content.length > 0 ? (
+          <TimelineActioned action='reblog' account={item.account} />
-          <TimelineContent
+        ) : item._pinned ? (
-            status={actualStatus}
+          <TimelineActioned action='pinned' account={item.account} />
-            highlighted={highlighted}
-            disableDetails={disableDetails}
-          />
         ) : null}
-        {queryKey && actualStatus.poll ? (
+
-          <TimelinePoll
+        <View style={{ flex: 1, width: '100%', flexDirection: 'row' }}>
+          <TimelineAvatar
+            queryKey={disableOnPress ? undefined : queryKey}
+            account={actualStatus.account}
+            highlighted={highlighted}
+          />
+          <TimelineHeaderDefault
+            queryKey={disableOnPress ? undefined : queryKey}
+            rootQueryKey={disableOnPress ? undefined : rootQueryKey}
+            status={actualStatus}
+          />
+        </View>
+
+        <View
+          style={{
+            paddingTop: highlighted ? StyleConstants.Spacing.S : 0,
+            paddingLeft: highlighted
+              ? 0
+              : StyleConstants.Avatar.M + StyleConstants.Spacing.S
+          }}
+        >
+          {typeof actualStatus.content === 'string' &&
+          actualStatus.content.length > 0 ? (
+            <TimelineContent
+              status={actualStatus}
+              highlighted={highlighted}
+              disableDetails={disableDetails}
+            />
+          ) : null}
+          {queryKey && actualStatus.poll ? (
+            <TimelinePoll
+              queryKey={queryKey}
+              rootQueryKey={rootQueryKey}
+              statusId={actualStatus.id}
+              poll={actualStatus.poll}
+              reblog={item.reblog ? true : false}
+              sameAccount={ownAccount}
+            />
+          ) : null}
+          {!disableDetails &&
+          Array.isArray(actualStatus.media_attachments) &&
+          actualStatus.media_attachments.length ? (
+            <TimelineAttachment status={actualStatus} />
+          ) : null}
+          {!disableDetails && actualStatus.card ? (
+            <TimelineCard card={actualStatus.card} />
+          ) : null}
+          {!disableDetails ? (
+            <TimelineFullConversation
+              queryKey={queryKey}
+              status={actualStatus}
+            />
+          ) : null}
+          <TimelineTranslate status={actualStatus} highlighted={highlighted} />
+          <TimelineFeedback status={actualStatus} highlighted={highlighted} />
+        </View>
+
+        {queryKey && !disableDetails ? (
+          <TimelineActions
             queryKey={queryKey}
             rootQueryKey={rootQueryKey}
-            statusId={actualStatus.id}
+            highlighted={highlighted}
-            poll={actualStatus.poll}
+            status={actualStatus}
+            accts={uniqBy(
+              (
+                [actualStatus.account] as Mastodon.Account[] &
+                  Mastodon.Mention[]
+              )
+                .concat(actualStatus.mentions)
+                .filter(d => d?.id !== instanceAccount?.id),
+              d => d?.id
+            ).map(d => d?.acct)}
             reblog={item.reblog ? true : false}
-            sameAccount={ownAccount}
           />
         ) : null}
-        {!disableDetails &&
+      </Pressable>
-        Array.isArray(actualStatus.media_attachments) &&
+    )
-        actualStatus.media_attachments.length ? (
-          <TimelineAttachment status={actualStatus} />
-        ) : null}
-        {!disableDetails && actualStatus.card ? (
-          <TimelineCard card={actualStatus.card} />
-        ) : null}
-        {!disableDetails ? (
-          <TimelineFullConversation queryKey={queryKey} status={actualStatus} />
-        ) : null}
-        <TimelineTranslate status={actualStatus} highlighted={highlighted} />
-        <TimelineFeedback status={actualStatus} highlighted={highlighted} />
-      </View>
-
-      {queryKey && !disableDetails ? (
-        <TimelineActions
-          queryKey={queryKey}
-          rootQueryKey={rootQueryKey}
-          highlighted={highlighted}
-          status={actualStatus}
-          accts={uniqBy(
-            ([actualStatus.account] as Mastodon.Account[] & Mastodon.Mention[])
-              .concat(actualStatus.mentions)
-              .filter(d => d?.id !== instanceAccount?.id),
-            d => d?.id
-          ).map(d => d?.acct)}
-          reblog={item.reblog ? true : false}
-        />
-      ) : null}
-    </Pressable>
-  )
-}
-
-const styles = StyleSheet.create({
-  statusView: {
-    padding: StyleConstants.Spacing.Global.PagePadding,
-    paddingBottom: 0
   },
-  header: {
+  (prev, next) => isEqual(prev.item, next.item)
-    flex: 1,
+)
-    width: '100%',
-    flexDirection: 'row'
-  }
-})
 
 export default TimelineDefault

src/components/Timeline/Empty.tsx

@@ -4,7 +4,7 @@ import Icon from '@components/Icon'
 import { QueryKeyTimeline, useTimelineQuery } from '@utils/queryHooks/timeline'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { useMemo } from 'react'
+import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { StyleSheet, Text, View } from 'react-native'
 import { Circle } from 'react-native-animated-spinkit'
@@ -20,10 +20,10 @@ const TimelineEmpty = React.memo(
       options: { notifyOnChangeProps: ['status'] }
     })
 
-    const { colors, theme } = useTheme()
+    const { colors } = useTheme()
-    const { t, i18n } = useTranslation('componentTimeline')
+    const { t } = useTranslation('componentTimeline')
 
-    const children = useMemo(() => {
+    const children = () => {
       switch (status) {
         case 'loading':
           return (
@@ -67,24 +67,25 @@ const TimelineEmpty = React.memo(
             </>
           )
       }
-    }, [theme, i18n.language, status])
+    }
     return (
       <View
-        style={[styles.base, { backgroundColor: colors.backgroundDefault }]}
+        style={{
-        children={children}
+          flex: 1,
-      />
+          minHeight: '100%',
+          justifyContent: 'center',
+          alignItems: 'center',
+          backgroundColor: colors.backgroundDefault
+        }}
+      >
+        {children()}
+      </View>
     )
   },
   () => true
 )
 
 const styles = StyleSheet.create({
-  base: {
-    flex: 1,
-    minHeight: '100%',
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
   error: {
     ...StyleConstants.FontStyle.M,
     marginTop: StyleConstants.Spacing.S,

src/components/Timeline/Footer.tsx

@@ -4,7 +4,7 @@ import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
 import { Trans } from 'react-i18next'
-import { StyleSheet, Text, View } from 'react-native'
+import { Text, View } from 'react-native'
 import { Circle } from 'react-native-animated-spinkit'
 
 export interface Props {
@@ -27,11 +27,20 @@ const TimelineFooter = React.memo(
     const { colors } = useTheme()
 
     return (
-      <View style={styles.base}>
+      <View
+        style={{
+          flex: 1,
+          flexDirection: 'row',
+          justifyContent: 'center',
+          padding: StyleConstants.Spacing.M
+        }}
+      >
         {!disableInfinity && hasNextPage ? (
           <Circle size={StyleConstants.Font.Size.L} color={colors.secondary} />
         ) : (
-          <Text style={[styles.text, { color: colors.secondary }]}>
+          <Text
+            style={{ ...StyleConstants.FontStyle.S, color: colors.secondary }}
+          >
             <Trans
               i18nKey='componentTimeline:end.message'
               components={[
@@ -50,16 +59,4 @@ const TimelineFooter = React.memo(
   () => true
 )
 
-const styles = StyleSheet.create({
-  base: {
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'center',
-    padding: StyleConstants.Spacing.M
-  },
-  text: {
-    ...StyleConstants.FontStyle.S
-  }
-})
-
 export default TimelineFooter

src/components/Timeline/Lookback.tsx

@@ -2,7 +2,7 @@ import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { StyleSheet, Text, View } from 'react-native'
+import { Text, View } from 'react-native'
 
 const TimelineLookback = React.memo(
   () => {
@@ -11,10 +11,19 @@ const TimelineLookback = React.memo(
 
     return (
       <View
-        style={[styles.base, { backgroundColor: colors.backgroundDefault }]}
+        style={{
+          flex: 1,
+          flexDirection: 'row',
+          justifyContent: 'center',
+          padding: StyleConstants.Spacing.S,
+          backgroundColor: colors.backgroundDefault
+        }}
       >
         <Text
-          style={[StyleConstants.FontStyle.S, { color: colors.primaryDefault }]}
+          style={{
+            ...StyleConstants.FontStyle.S,
+            color: colors.primaryDefault
+          }}
         >
           {t('lookback.message')}
         </Text>
@@ -24,16 +33,4 @@ const TimelineLookback = React.memo(
   () => true
 )
 
-const styles = StyleSheet.create({
-  base: {
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'center',
-    padding: StyleConstants.Spacing.S
-  },
-  text: {
-    ...StyleConstants.FontStyle.S
-  }
-})
-
 export default TimelineLookback

src/components/Timeline/Notifications.tsx

@@ -14,9 +14,9 @@ import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
 import { getInstanceAccount } from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import { uniqBy } from 'lodash'
+import { isEqual, uniqBy } from 'lodash'
 import React, { useCallback } from 'react'
-import { Pressable, StyleSheet, View } from 'react-native'
+import { Pressable, View } from 'react-native'
 import { useSelector } from 'react-redux'
 import TimelineFiltered, { shouldFilter } from './Shared/Filtered'
 import TimelineFullConversation from './Shared/FullConversation'
@@ -27,151 +27,137 @@ export interface Props {
   highlighted?: boolean
 }
 
-const TimelineNotifications: React.FC<Props> = ({
+const TimelineNotifications = React.memo(
-  notification,
+  ({ notification, queryKey, highlighted = false }: Props) => {
-  queryKey,
+    if (
-  highlighted = false
+      notification.status &&
-}) => {
+      shouldFilter({ status: notification.status, queryKey })
-  if (
+    ) {
-    notification.status &&
+      return <TimelineFiltered />
-    shouldFilter({ status: notification.status, queryKey })
+    }
-  ) {
-    return <TimelineFiltered />
-  }
 
-  const { colors } = useTheme()
+    const { colors } = useTheme()
-  const instanceAccount = useSelector(
+    const instanceAccount = useSelector(
-    getInstanceAccount,
+      getInstanceAccount,
-    (prev, next) => prev?.id === next?.id
+      (prev, next) => prev?.id === next?.id
-  )
+    )
-  const navigation =
+    const navigation =
-    useNavigation<StackNavigationProp<TabLocalStackParamList>>()
+      useNavigation<StackNavigationProp<TabLocalStackParamList>>()
 
-  const actualAccount = notification.status
+    const actualAccount = notification.status
-    ? notification.status.account
+      ? notification.status.account
-    : notification.account
+      : notification.account
 
-  const onPress = useCallback(() => {
+    const onPress = useCallback(() => {
-    analytics('timeline_notification_press')
+      analytics('timeline_notification_press')
-    notification.status &&
+      notification.status &&
-      navigation.push('Tab-Shared-Toot', {
+        navigation.push('Tab-Shared-Toot', {
-        toot: notification.status,
+          toot: notification.status,
-        rootQueryKey: queryKey
+          rootQueryKey: queryKey
-      })
+        })
-  }, [])
+    }, [])
 
-  return (
+    return (
-    <Pressable
+      <Pressable
-      style={[
+        style={{
-        styles.notificationView,
+          padding: StyleConstants.Spacing.Global.PagePadding,
-        {
           backgroundColor: colors.backgroundDefault,
           paddingBottom: notification.status
             ? 0
             : StyleConstants.Spacing.Global.PagePadding
-        }
-      ]}
-      onPress={onPress}
-    >
-      {notification.type !== 'mention' ? (
-        <TimelineActioned
-          action={notification.type}
-          account={notification.account}
-          notification
-        />
-      ) : null}
-
-      <View
-        style={{
-          opacity:
-            notification.type === 'follow' ||
-            notification.type === 'follow_request' ||
-            notification.type === 'mention' ||
-            notification.type === 'status'
-              ? 1
-              : 0.5
         }}
+        onPress={onPress}
       >
-        <View style={styles.header}>
+        {notification.type !== 'mention' ? (
-          <TimelineAvatar
+          <TimelineActioned
-            queryKey={queryKey}
+            action={notification.type}
-            account={actualAccount}
+            account={notification.account}
-            highlighted={highlighted}
+            notification
-          />
-          <TimelineHeaderNotification
-            queryKey={queryKey}
-            notification={notification}
           />
+        ) : null}
+
+        <View
+          style={{
+            opacity:
+              notification.type === 'follow' ||
+              notification.type === 'follow_request' ||
+              notification.type === 'mention' ||
+              notification.type === 'status'
+                ? 1
+                : 0.5
+          }}
+        >
+          <View style={{ flex: 1, width: '100%', flexDirection: 'row' }}>
+            <TimelineAvatar
+              queryKey={queryKey}
+              account={actualAccount}
+              highlighted={highlighted}
+            />
+            <TimelineHeaderNotification
+              queryKey={queryKey}
+              notification={notification}
+            />
+          </View>
+
+          {notification.status ? (
+            <View
+              style={{
+                paddingTop: highlighted ? StyleConstants.Spacing.S : 0,
+                paddingLeft: highlighted
+                  ? 0
+                  : StyleConstants.Avatar.M + StyleConstants.Spacing.S
+              }}
+            >
+              {notification.status.content.length > 0 ? (
+                <TimelineContent
+                  status={notification.status}
+                  highlighted={highlighted}
+                />
+              ) : null}
+              {notification.status.poll ? (
+                <TimelinePoll
+                  queryKey={queryKey}
+                  statusId={notification.status.id}
+                  poll={notification.status.poll}
+                  reblog={false}
+                  sameAccount={notification.account.id === instanceAccount?.id}
+                />
+              ) : null}
+              {notification.status.media_attachments.length > 0 ? (
+                <TimelineAttachment status={notification.status} />
+              ) : null}
+              {notification.status.card ? (
+                <TimelineCard card={notification.status.card} />
+              ) : null}
+              <TimelineFullConversation
+                queryKey={queryKey}
+                status={notification.status}
+              />
+            </View>
+          ) : null}
         </View>
 
         {notification.status ? (
-          <View
+          <TimelineActions
-            style={{
+            queryKey={queryKey}
-              paddingTop: highlighted ? StyleConstants.Spacing.S : 0,
+            status={notification.status}
-              paddingLeft: highlighted
+            highlighted={highlighted}
-                ? 0
+            accts={uniqBy(
-                : StyleConstants.Avatar.M + StyleConstants.Spacing.S
+              (
-            }}
+                [notification.status.account] as Mastodon.Account[] &
-          >
+                  Mastodon.Mention[]
-            {notification.status.content.length > 0 ? (
+              )
-              <TimelineContent
+                .concat(notification.status.mentions)
-                status={notification.status}
+                .filter(d => d?.id !== instanceAccount?.id),
-                highlighted={highlighted}
+              d => d?.id
-              />
+            ).map(d => d?.acct)}
-            ) : null}
+            reblog={false}
-            {notification.status.poll ? (
+          />
-              <TimelinePoll
-                queryKey={queryKey}
-                statusId={notification.status.id}
-                poll={notification.status.poll}
-                reblog={false}
-                sameAccount={notification.account.id === instanceAccount?.id}
-              />
-            ) : null}
-            {notification.status.media_attachments.length > 0 ? (
-              <TimelineAttachment status={notification.status} />
-            ) : null}
-            {notification.status.card ? (
-              <TimelineCard card={notification.status.card} />
-            ) : null}
-            <TimelineFullConversation
-              queryKey={queryKey}
-              status={notification.status}
-            />
-          </View>
         ) : null}
-      </View>
+      </Pressable>
-
+    )
-      {notification.status ? (
-        <TimelineActions
-          queryKey={queryKey}
-          status={notification.status}
-          highlighted={highlighted}
-          accts={uniqBy(
-            (
-              [notification.status.account] as Mastodon.Account[] &
-                Mastodon.Mention[]
-            )
-              .concat(notification.status.mentions)
-              .filter(d => d?.id !== instanceAccount?.id),
-            d => d?.id
-          ).map(d => d?.acct)}
-          reblog={false}
-        />
-      ) : null}
-    </Pressable>
-  )
-}
-
-const styles = StyleSheet.create({
-  notificationView: {
-    padding: StyleConstants.Spacing.Global.PagePadding
   },
-  header: {
+  (prev, next) => isEqual(prev.notification, next.notification)
-    flex: 1,
+)
-    width: '100%',
-    flexDirection: 'row'
-  }
-})
 
 export default TimelineNotifications