Updates

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

@@ -9,29 +9,32 @@ export interface Props {
   withoutName?: boolean // For notification follow request etc.
 }
 
-const HeaderSharedAccount: React.FC<Props> = ({
-  account,
-  withoutName = false
-}) => {
-  const { theme } = useTheme()
+const HeaderSharedAccount = React.memo(
+  ({ account, withoutName = false }: Props) => {
+    const { theme } = useTheme()
 
-  return (
-    <View style={styles.base}>
-      {withoutName ? null : (
-        <Text style={styles.name} numberOfLines={1}>
-          <ParseEmojis
-            content={account.display_name || account.username}
-            emojis={account.emojis}
-            fontBold
-          />
+    return (
+      <View style={styles.base}>
+        {withoutName ? null : (
+          <Text style={styles.name} numberOfLines={1}>
+            <ParseEmojis
+              content={account.display_name || account.username}
+              emojis={account.emojis}
+              fontBold
+            />
+          </Text>
+        )}
+        <Text
+          style={[styles.acct, { color: theme.secondary }]}
+          numberOfLines={1}
+        >
+          @{account.acct}
         </Text>
-      )}
-      <Text style={[styles.acct, { color: theme.secondary }]} numberOfLines={1}>
-        @{account.acct}
-      </Text>
-    </View>
-  )
-}
+      </View>
+    )
+  },
+  () => true
+)
 
 const styles = StyleSheet.create({
   base: {

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

@@ -10,24 +10,29 @@ export interface Props {
   application?: Mastodon.Application
 }
 
-const HeaderSharedApplication: React.FC<Props> = ({ application }) => {
-  const { theme } = useTheme()
-  const { t } = useTranslation('componentTimeline')
+const HeaderSharedApplication = React.memo(
+  ({ application }: Props) => {
+    const { theme } = useTheme()
+    const { t } = useTranslation('componentTimeline')
 
-  return application && application.name !== 'Web' ? (
-    <Text
-      onPress={async () => {
-        analytics('timeline_shared_header_application_press', {
-          application
-        })
-        application.website && (await openLink(application.website))
-      }}
-      style={[styles.application, { color: theme.secondary }]}
-    >
-      {t('shared.header.shared.application', { application: application.name })}
-    </Text>
-  ) : null
-}
+    return application && application.name !== 'Web' ? (
+      <Text
+        onPress={async () => {
+          analytics('timeline_shared_header_application_press', {
+            application
+          })
+          application.website && (await openLink(application.website))
+        }}
+        style={[styles.application, { color: theme.secondary }]}
+      >
+        {t('shared.header.shared.application', {
+          application: application.name
+        })}
+      </Text>
+    ) : null
+  },
+  () => true
+)
 
 const styles = StyleSheet.create({
   application: {

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

@@ -8,18 +8,21 @@ export interface Props {
   muted?: Mastodon.Status['muted']
 }
 
-const HeaderSharedMuted: React.FC<Props> = ({ muted }) => {
-  const { theme } = useTheme()
+const HeaderSharedMuted = React.memo(
+  ({ muted }: Props) => {
+    const { theme } = useTheme()
 
-  return muted ? (
-    <Icon
-      name='VolumeX'
-      size={StyleConstants.Font.Size.S}
-      color={theme.secondary}
-      style={styles.visibility}
-    />
-  ) : null
-}
+    return muted ? (
+      <Icon
+        name='VolumeX'
+        size={StyleConstants.Font.Size.S}
+        color={theme.secondary}
+        style={styles.visibility}
+      />
+    ) : null
+  },
+  () => true
+)
 
 const styles = StyleSheet.create({
   visibility: {

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

@@ -8,32 +8,35 @@ export interface Props {
   visibility: Mastodon.Status['visibility']
 }
 
-const HeaderSharedVisibility: React.FC<Props> = ({ visibility }) => {
-  const { theme } = useTheme()
+const HeaderSharedVisibility = React.memo(
+  ({ visibility }: Props) => {
+    const { theme } = useTheme()
 
-  switch (visibility) {
-    case 'private':
-      return (
-        <Icon
-          name='Lock'
-          size={StyleConstants.Font.Size.S}
-          color={theme.secondary}
-          style={styles.visibility}
-        />
-      )
-    case 'direct':
-      return (
-        <Icon
-          name='Mail'
-          size={StyleConstants.Font.Size.S}
-          color={theme.secondary}
-          style={styles.visibility}
-        />
-      )
-    default:
-      return null
-  }
-}
+    switch (visibility) {
+      case 'private':
+        return (
+          <Icon
+            name='Lock'
+            size={StyleConstants.Font.Size.S}
+            color={theme.secondary}
+            style={styles.visibility}
+          />
+        )
+      case 'direct':
+        return (
+          <Icon
+            name='Mail'
+            size={StyleConstants.Font.Size.S}
+            color={theme.secondary}
+            style={styles.visibility}
+          />
+        )
+      default:
+        return null
+    }
+  },
+  () => true
+)
 
 const styles = StyleSheet.create({
   visibility: {