Clean up react memo

src/components/Timeline/Shared/Actioned.tsx

@@ -144,19 +144,23 @@ const TimelineActioned = React.memo(
       }
     }, [])
 
-    return <View style={styles.actioned} children={children} />
+    return (
-  },
+      <View
-  () => true
+        style={{
-)
-
-const styles = StyleSheet.create({
-  actioned: {
           flexDirection: 'row',
           alignItems: 'center',
           marginBottom: StyleConstants.Spacing.S,
           paddingLeft: StyleConstants.Avatar.M - StyleConstants.Font.Size.S,
           paddingRight: StyleConstants.Spacing.Global.PagePadding
+        }}
+        children={children}
+      />
+    )
   },
+  () => true
+)
+
+const styles = StyleSheet.create({
   icon: {
     marginRight: StyleConstants.Spacing.S
   }

src/components/Timeline/Shared/Actions.tsx

@@ -2,6 +2,8 @@ import analytics from '@components/analytics'
 import Icon from '@components/Icon'
 import { displayMessage } from '@components/Message'
 import { useNavigation } from '@react-navigation/native'
+import { StackNavigationProp } from '@react-navigation/stack'
+import { RootStackParamList } from '@utils/navigation/navigators'
 import {
   MutationVarsTimelineUpdateStatusProperty,
   QueryKeyTimeline,
@@ -31,7 +33,7 @@ const TimelineActions: React.FC<Props> = ({
   accts,
   reblog
 }) => {
-  const navigation = useNavigation()
+  const navigation = useNavigation<StackNavigationProp<RootStackParamList>>()
   const { t } = useTranslation('componentTimeline')
   const { colors, theme } = useTheme()
   const iconColor = colors.secondary

src/components/Timeline/Shared/Avatar.tsx

@@ -50,8 +50,7 @@ const TimelineAvatar = React.memo(
         }}
       />
     )
-  },
+  }
-  () => true
 )
 
 export default TimelineAvatar

src/components/Timeline/Shared/Card.tsx

@@ -8,11 +8,13 @@ import React from 'react'
 import { Pressable, StyleSheet, Text, View } from 'react-native'
 
 export interface Props {
-  card: Mastodon.Card
+  card: Pick<
+    Mastodon.Card,
+    'url' | 'image' | 'blurhash' | 'title' | 'description'
+  >
 }
 
-const TimelineCard = React.memo(
+const TimelineCard = React.memo(({ card }: Props) => {
-  ({ card }: Props) => {
   const { colors } = useTheme()
   const navigation = useNavigation()
 
@@ -46,10 +48,7 @@ const TimelineCard = React.memo(
         {card.description ? (
           <Text
             numberOfLines={1}
-              style={[
+            style={[styles.rightDescription, { color: colors.primaryDefault }]}
-                styles.rightDescription,
-                { color: colors.primaryDefault }
-              ]}
             testID='description'
           >
             {card.description}
@@ -64,9 +63,7 @@ const TimelineCard = React.memo(
       </View>
     </Pressable>
   )
-  },
+})
-  () => true
-)
 
 const styles = StyleSheet.create({
   card: {

src/components/Timeline/Shared/Content.tsx

@@ -5,10 +5,10 @@ import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 
 export interface Props {
-  status: Pick<Mastodon.Status, 'content' | 'spoiler_text' | 'emojis'> & {
+  status: Pick<
-    mentions?: Mastodon.Status['mentions']
+    Mastodon.Status,
-    tags?: Mastodon.Status['tags']
+    'content' | 'spoiler_text' | 'emojis' | 'mentions' | 'tags'
-  }
+  >
   numberOfLines?: number
   highlighted?: boolean
   disableDetails?: boolean
@@ -72,7 +72,9 @@ const TimelineContent = React.memo(
       </>
     )
   },
-  (prev, next) => prev.status.content === next.status.content
+  (prev, next) =>
+    prev.status.content === next.status.content &&
+    prev.status.spoiler_text === next.status.spoiler_text
 )
 
 export default TimelineContent

src/components/Timeline/Shared/Feedback.tsx

@@ -10,7 +10,10 @@ import { useTranslation } from 'react-i18next'
 import { StyleSheet, Text, View } from 'react-native'
 
 export interface Props {
-  status: Mastodon.Status
+  status: Pick<
+    Mastodon.Status,
+    'id' | 'edited_at' | 'reblogs_count' | 'favourites_count'
+  >
   highlighted: boolean
 }
 
@@ -125,6 +128,7 @@ const TimelineFeedback = React.memo(
     )
   },
   (prev, next) =>
+    prev.status.edited_at === next.status.edited_at &&
     prev.status.reblogs_count === next.status.reblogs_count &&
     prev.status.favourites_count === next.status.favourites_count
 )

src/components/Timeline/Shared/HeaderShared/Created.tsx

@@ -37,7 +37,7 @@ const HeaderSharedCreated = React.memo(
       </>
     )
   },
-  () => true
+  (prev, next) => prev.edited_at === next.edited_at
 )
 
 export default HeaderSharedCreated

src/components/Timeline/Shared/Translate.tsx

@@ -7,13 +7,16 @@ import { useTheme } from '@utils/styles/ThemeManager'
 import * as Localization from 'expo-localization'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Pressable, StyleSheet, Text } from 'react-native'
+import { Pressable, Text } from 'react-native'
 import { Circle } from 'react-native-animated-spinkit'
 import { useSelector } from 'react-redux'
 
 export interface Props {
   highlighted: boolean
-  status: Mastodon.Status
+  status: Pick<
+    Mastodon.Status,
+    'language' | 'spoiler_text' | 'content' | 'emojis'
+  >
 }
 
 const TimelineTranslate = React.memo(
@@ -60,7 +63,12 @@ const TimelineTranslate = React.memo(
     return (
       <>
         <Pressable
-          style={[styles.button, { paddingBottom: isSuccess ? 0 : undefined }]}
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            paddingVertical: StyleConstants.Spacing.S,
+            paddingBottom: isSuccess ? 0 : undefined
+          }}
           onPress={() => {
             if (enabled) {
               if (!isSuccess) {
@@ -128,15 +136,10 @@ const TimelineTranslate = React.memo(
       </>
     )
   },
-  () => true
+  (prev, next) =>
+    prev.status.language === next.status.language &&
+    prev.status.content === next.status.content &&
+    prev.status.spoiler_text === next.status.spoiler_text
 )
 
-const styles = StyleSheet.create({
-  button: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingVertical: StyleConstants.Spacing.S
-  }
-})
-
 export default TimelineTranslate