Updates

src/components/Instance.tsx

@@ -9,9 +9,18 @@ import * as WebBrowser from 'expo-web-browser'
 import { debounce } from 'lodash'
 import React, { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Alert, Image, StyleSheet, Text, TextInput, View } from 'react-native'
+import {
+  Alert,
+  Image,
+  KeyboardAvoidingView,
+  Platform,
+  StyleSheet,
+  Text,
+  TextInput,
+  View
+} from 'react-native'
 import { useSelector } from 'react-redux'
-import { Placeholder, Fade } from 'rn-placeholder'
+import { Placeholder } from 'rn-placeholder'
 import analytics from './analytics'
 import InstanceAuth from './Instance/Auth'
 import InstanceInfo from './Instance/Info'
@@ -115,7 +124,10 @@ const ComponentInstance: React.FC<Props> = ({
   }, [domain, instanceQuery.data, appsQuery.data])
 
   return (
-    <>
+    <KeyboardAvoidingView
+      style={{ flex: 1 }}
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+    >
       {!disableHeaderImage ? (
         <View style={styles.imageContainer}>
           <Image
@@ -157,18 +169,8 @@ const ComponentInstance: React.FC<Props> = ({
         </View>
 
         <View>
-          <Placeholder
-            {...(instanceQuery.isFetching && {
-              Animation: props => (
-                <Fade
-                  {...props}
-                  style={{ backgroundColor: theme.shimmerHighlight }}
-                />
-              )
-            })}
-          >
+          <Placeholder>
             <InstanceInfo
-              visible={instanceQuery.data?.title !== undefined}
               header={t('server.information.name')}
               content={instanceQuery.data?.title || undefined}
               potentialWidth={2}
@@ -176,7 +178,6 @@ const ComponentInstance: React.FC<Props> = ({
             <View style={styles.instanceStats}>
               <InstanceInfo
                 style={styles.stat1}
-                visible={instanceQuery.data?.stats?.user_count !== undefined}
                 header={t('server.information.accounts')}
                 content={
                   instanceQuery.data?.stats?.user_count?.toString() || undefined
@@ -185,7 +186,6 @@ const ComponentInstance: React.FC<Props> = ({
               />
               <InstanceInfo
                 style={styles.stat2}
-                visible={instanceQuery.data?.stats?.status_count !== undefined}
                 header={t('server.information.statuses')}
                 content={
                   instanceQuery.data?.stats?.status_count?.toString() ||
@@ -195,7 +195,6 @@ const ComponentInstance: React.FC<Props> = ({
               />
               <InstanceInfo
                 style={styles.stat3}
-                visible={instanceQuery.data?.stats?.domain_count !== undefined}
                 header={t('server.information.domains')}
                 content={
                   instanceQuery.data?.stats?.domain_count?.toString() ||
@@ -231,7 +230,7 @@ const ComponentInstance: React.FC<Props> = ({
       </View>
 
       {requestAuth}
-    </>
+    </KeyboardAvoidingView>
   )
 }
 

src/components/Instance/EULA.tsx

@@ -1,62 +0,0 @@
-import analytics from '@components/analytics'
-import Icon from '@components/Icon'
-import { StyleConstants } from '@utils/styles/constants'
-import { useTheme } from '@utils/styles/ThemeManager'
-import * as WebBrowser from 'expo-web-browser'
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import { Pressable, StyleSheet, Text } from 'react-native'
-
-export interface Props {
-  agreed: boolean
-  setAgreed: React.Dispatch<React.SetStateAction<boolean>>
-}
-
-const EULA = React.memo(
-  ({ agreed, setAgreed }: Props) => {
-    const { t } = useTranslation('componentInstance')
-    const { theme } = useTheme()
-
-    return (
-      <Pressable style={styles.base} onPress={() => setAgreed(!agreed)}>
-        <Icon
-          style={styles.icon}
-          name={agreed ? 'CheckCircle' : 'Circle'}
-          size={StyleConstants.Font.Size.M}
-          color={theme.primary}
-        />
-        <Text style={[styles.text, { color: theme.primary }]}>
-          {t('server.EULA.base')}
-          <Text
-            style={{ color: theme.blue }}
-            children={t('server.EULA.EULA')}
-            onPress={() => {
-              analytics('view_EULA')
-              WebBrowser.openBrowserAsync(
-                'https://tooot.app/end-user-license-agreement'
-              )
-            }}
-          />
-        </Text>
-      </Pressable>
-    )
-  },
-  (prev, next) => prev.agreed === next.agreed
-)
-
-const styles = StyleSheet.create({
-  base: {
-    flexDirection: 'row',
-    marginTop: StyleConstants.Spacing.M,
-    paddingHorizontal: StyleConstants.Spacing.Global.PagePadding,
-    alignItems: 'center'
-  },
-  icon: {
-    marginRight: StyleConstants.Spacing.XS
-  },
-  text: {
-    ...StyleConstants.FontStyle.S
-  }
-})
-
-export default EULA

src/components/Instance/Info.tsx

@@ -8,15 +8,13 @@ import { PlaceholderLine } from 'rn-placeholder'
 
 export interface Props {
   style?: ViewStyle
-  visible: boolean
   header: string
   content?: string
   potentialWidth?: number
-  potentialLines?: number
 }
 
 const InstanceInfo = React.memo(
-  ({ style, header, content, potentialWidth, potentialLines = 1 }: Props) => {
+  ({ style, header, content, potentialWidth }: Props) => {
     const { t } = useTranslation('componentInstance')
     const { theme } = useTheme()
 
@@ -31,24 +29,22 @@ const InstanceInfo = React.memo(
             expandHint={t('server.information.description.expandHint')}
           />
         ) : (
-          Array.from(Array(potentialLines)).map((_, i) => (
-            <PlaceholderLine
-              key={i}
-              width={
-                potentialWidth
-                  ? potentialWidth * StyleConstants.Font.Size.M
-                  : undefined
-              }
-              height={StyleConstants.Font.LineHeight.M}
-              color={theme.shimmerDefault}
-              noMargin
-              style={{ borderRadius: 0 }}
-            />
-          ))
+          <PlaceholderLine
+            width={
+              potentialWidth
+                ? potentialWidth * StyleConstants.Font.Size.M
+                : undefined
+            }
+            height={StyleConstants.Font.LineHeight.M}
+            color={theme.shimmerDefault}
+            noMargin
+            style={{ borderRadius: 0 }}
+          />
         )}
       </View>
     )
-  }
+  },
+  (prev, next) => prev.content === next.content
 )
 
 const styles = StyleSheet.create({

src/components/Timeline/Default.tsx

@@ -41,7 +41,7 @@ const TimelineDefault: React.FC<Props> = ({
   pinned
 }) => {
   const { theme } = useTheme()
-  const instanceAccount = useSelector(getInstanceAccount, (prev, next) => true)
+  const instanceAccount = useSelector(getInstanceAccount, () => true)
   const navigation = useNavigation<
     StackNavigationProp<Nav.TabLocalStackParamList>
   >()

src/components/Timeline/Refresh.tsx

@@ -103,7 +103,7 @@ const TimelineRefresh: React.FC<Props> = ({
     queryClient.setQueryData<InfiniteData<TimelineData> | undefined>(
       queryKey,
       data => {
-        if (data?.pages[0].body.length === 0) {
+        if (data?.pages[0] && data.pages[0].body.length === 0) {
           return {
             pages: data.pages.slice(1),
             pageParams: data.pageParams.slice(1)

src/components/Timeline/Shared/Actions.tsx

@@ -22,277 +22,274 @@ export interface Props {
   reblog: boolean
 }
 
-const TimelineActions: React.FC<Props> = ({
-  queryKey,
-  rootQueryKey,
-  status,
-  accts,
-  reblog
-}) => {
-  const navigation = useNavigation()
-  const { t } = useTranslation('componentTimeline')
-  const { mode, theme } = useTheme()
-  const iconColor = theme.secondary
-  const iconColorAction = (state: boolean) =>
-    state ? theme.primary : theme.secondary
+const TimelineActions = React.memo(
+  ({ queryKey, rootQueryKey, status, accts, reblog }: Props) => {
+    const navigation = useNavigation()
+    const { t } = useTranslation('componentTimeline')
+    const { mode, theme } = useTheme()
+    const iconColor = theme.secondary
+    const iconColorAction = (state: boolean) =>
+      state ? theme.primary : theme.secondary
 
-  const queryClient = useQueryClient()
-  const mutation = useTimelineMutation({
-    queryClient,
-    onMutate: true,
-    onSuccess: (_, params) => {
-      const theParams = params as MutationVarsTimelineUpdateStatusProperty
-      if (
-        // Un-bookmark from bookmarks page
-        (queryKey[1].page === 'Bookmarks' &&
-          theParams.payload.property === 'bookmarked') ||
-        // Un-favourite from favourites page
-        (queryKey[1].page === 'Favourites' &&
-          theParams.payload.property === 'favourited') ||
-        // Un-reblog from following page
-        (queryKey[1].page === 'Following' &&
+    const queryClient = useQueryClient()
+    const mutation = useTimelineMutation({
+      queryClient,
+      onMutate: true,
+      onSuccess: (_, params) => {
+        const theParams = params as MutationVarsTimelineUpdateStatusProperty
+        if (
+          // Un-bookmark from bookmarks page
+          (queryKey[1].page === 'Bookmarks' &&
+            theParams.payload.property === 'bookmarked') ||
+          // Un-favourite from favourites page
+          (queryKey[1].page === 'Favourites' &&
+            theParams.payload.property === 'favourited') ||
+          // Un-reblog from following page
+          (queryKey[1].page === 'Following' &&
+            theParams.payload.property === 'reblogged' &&
+            theParams.payload.currentValue === true)
+        ) {
+          queryClient.invalidateQueries(queryKey)
+        } else if (
           theParams.payload.property === 'reblogged' &&
-          theParams.payload.currentValue === true)
-      ) {
+          queryKey[1].page !== 'Following'
+        ) {
+          // When reblogged, update cache of following page
+          const tempQueryKey: QueryKeyTimeline = [
+            'Timeline',
+            { page: 'Following' }
+          ]
+          queryClient.invalidateQueries(tempQueryKey)
+        } else if (theParams.payload.property === 'favourited') {
+          // When favourited, update favourited page
+          const tempQueryKey: QueryKeyTimeline = [
+            'Timeline',
+            { page: 'Favourites' }
+          ]
+          queryClient.invalidateQueries(tempQueryKey)
+        } else if (theParams.payload.property === 'bookmarked') {
+          // When bookmarked, update bookmark page
+          const tempQueryKey: QueryKeyTimeline = [
+            'Timeline',
+            { page: 'Bookmarks' }
+          ]
+          queryClient.invalidateQueries(tempQueryKey)
+        }
+      },
+      onError: (err: any, params, oldData) => {
+        const correctParam = params as MutationVarsTimelineUpdateStatusProperty
+        displayMessage({
+          mode,
+          type: 'error',
+          message: t('common:toastMessage.error.message', {
+            function: t(
+              `shared.actions.${correctParam.payload.property}.function`
+            )
+          }),
+          ...(err.status &&
+            typeof err.status === 'number' &&
+            err.data &&
+            err.data.error &&
+            typeof err.data.error === 'string' && {
+              description: err.data.error
+            })
+        })
         queryClient.invalidateQueries(queryKey)
-      } else if (
-        theParams.payload.property === 'reblogged' &&
-        queryKey[1].page !== 'Following'
-      ) {
-        // When reblogged, update cache of following page
-        const tempQueryKey: QueryKeyTimeline = [
-          'Timeline',
-          { page: 'Following' }
-        ]
-        queryClient.invalidateQueries(tempQueryKey)
-      } else if (theParams.payload.property === 'favourited') {
-        // When favourited, update favourited page
-        const tempQueryKey: QueryKeyTimeline = [
-          'Timeline',
-          { page: 'Favourites' }
-        ]
-        queryClient.invalidateQueries(tempQueryKey)
-      } else if (theParams.payload.property === 'bookmarked') {
-        // When bookmarked, update bookmark page
-        const tempQueryKey: QueryKeyTimeline = [
-          'Timeline',
-          { page: 'Bookmarks' }
-        ]
-        queryClient.invalidateQueries(tempQueryKey)
       }
-    },
-    onError: (err: any, params, oldData) => {
-      const correctParam = params as MutationVarsTimelineUpdateStatusProperty
-      displayMessage({
-        mode,
-        type: 'error',
-        message: t('common:toastMessage.error.message', {
-          function: t(
-            `shared.actions.${correctParam.payload.property}.function`
-          )
-        }),
-        ...(err.status &&
-          typeof err.status === 'number' &&
-          err.data &&
-          err.data.error &&
-          typeof err.data.error === 'string' && {
-            description: err.data.error
-          })
+    })
+
+    const onPressReply = useCallback(() => {
+      analytics('timeline_shared_actions_reply_press', {
+        page: queryKey[1].page,
+        count: status.replies_count
       })
-      queryClient.invalidateQueries(queryKey)
-    }
-  })
+      navigation.navigate('Screen-Compose', {
+        type: 'reply',
+        incomingStatus: status,
+        accts,
+        queryKey
+      })
+    }, [status.replies_count])
+    const onPressReblog = useCallback(() => {
+      analytics('timeline_shared_actions_reblog_press', {
+        page: queryKey[1].page,
+        count: status.reblogs_count,
+        current: status.reblogged
+      })
+      mutation.mutate({
+        type: 'updateStatusProperty',
+        queryKey,
+        rootQueryKey,
+        id: status.id,
+        reblog,
+        payload: {
+          property: 'reblogged',
+          currentValue: status.reblogged,
+          propertyCount: 'reblogs_count',
+          countValue: status.reblogs_count
+        }
+      })
+    }, [status.reblogged, status.reblogs_count])
+    const onPressFavourite = useCallback(() => {
+      analytics('timeline_shared_actions_favourite_press', {
+        page: queryKey[1].page,
+        count: status.favourites_count,
+        current: status.favourited
+      })
+      mutation.mutate({
+        type: 'updateStatusProperty',
+        queryKey,
+        rootQueryKey,
+        id: status.id,
+        reblog,
+        payload: {
+          property: 'favourited',
+          currentValue: status.favourited,
+          propertyCount: 'favourites_count',
+          countValue: status.favourites_count
+        }
+      })
+    }, [status.favourited, status.favourites_count])
+    const onPressBookmark = useCallback(() => {
+      analytics('timeline_shared_actions_bookmark_press', {
+        page: queryKey[1].page,
+        current: status.bookmarked
+      })
+      mutation.mutate({
+        type: 'updateStatusProperty',
+        queryKey,
+        rootQueryKey,
+        id: status.id,
+        reblog,
+        payload: {
+          property: 'bookmarked',
+          currentValue: status.bookmarked,
+          propertyCount: undefined,
+          countValue: undefined
+        }
+      })
+    }, [status.bookmarked])
 
-  const onPressReply = useCallback(() => {
-    analytics('timeline_shared_actions_reply_press', {
-      page: queryKey[1].page,
-      count: status.replies_count
-    })
-    navigation.navigate('Screen-Compose', {
-      type: 'reply',
-      incomingStatus: status,
-      accts,
-      queryKey
-    })
-  }, [status.replies_count])
-  const onPressReblog = useCallback(() => {
-    analytics('timeline_shared_actions_reblog_press', {
-      page: queryKey[1].page,
-      count: status.reblogs_count,
-      current: status.reblogged
-    })
-    mutation.mutate({
-      type: 'updateStatusProperty',
-      queryKey,
-      rootQueryKey,
-      id: status.id,
-      reblog,
-      payload: {
-        property: 'reblogged',
-        currentValue: status.reblogged,
-        propertyCount: 'reblogs_count',
-        countValue: status.reblogs_count
-      }
-    })
-  }, [status.reblogged, status.reblogs_count])
-  const onPressFavourite = useCallback(() => {
-    analytics('timeline_shared_actions_favourite_press', {
-      page: queryKey[1].page,
-      count: status.favourites_count,
-      current: status.favourited
-    })
-    mutation.mutate({
-      type: 'updateStatusProperty',
-      queryKey,
-      rootQueryKey,
-      id: status.id,
-      reblog,
-      payload: {
-        property: 'favourited',
-        currentValue: status.favourited,
-        propertyCount: 'favourites_count',
-        countValue: status.favourites_count
-      }
-    })
-  }, [status.favourited, status.favourites_count])
-  const onPressBookmark = useCallback(() => {
-    analytics('timeline_shared_actions_bookmark_press', {
-      page: queryKey[1].page,
-      current: status.bookmarked
-    })
-    mutation.mutate({
-      type: 'updateStatusProperty',
-      queryKey,
-      rootQueryKey,
-      id: status.id,
-      reblog,
-      payload: {
-        property: 'bookmarked',
-        currentValue: status.bookmarked,
-        propertyCount: undefined,
-        countValue: undefined
-      }
-    })
-  }, [status.bookmarked])
-
-  const childrenReply = useMemo(
-    () => (
-      <>
+    const childrenReply = useMemo(
+      () => (
+        <>
+          <Icon
+            name='MessageCircle'
+            color={iconColor}
+            size={StyleConstants.Font.Size.L}
+          />
+          {status.replies_count > 0 && (
+            <Text
+              style={{
+                color: theme.secondary,
+                fontSize: StyleConstants.Font.Size.M,
+                marginLeft: StyleConstants.Spacing.XS
+              }}
+            >
+              {status.replies_count}
+            </Text>
+          )}
+        </>
+      ),
+      [status.replies_count]
+    )
+    const childrenReblog = useMemo(
+      () => (
+        <>
+          <Icon
+            name='Repeat'
+            color={
+              status.visibility === 'private' || status.visibility === 'direct'
+                ? theme.disabled
+                : iconColorAction(status.reblogged)
+            }
+            size={StyleConstants.Font.Size.L}
+          />
+          {status.reblogs_count > 0 && (
+            <Text
+              style={{
+                color: iconColorAction(status.reblogged),
+                fontSize: StyleConstants.Font.Size.M,
+                marginLeft: StyleConstants.Spacing.XS
+              }}
+            >
+              {status.reblogs_count}
+            </Text>
+          )}
+        </>
+      ),
+      [status.reblogged, status.reblogs_count]
+    )
+    const childrenFavourite = useMemo(
+      () => (
+        <>
+          <Icon
+            name='Heart'
+            color={iconColorAction(status.favourited)}
+            size={StyleConstants.Font.Size.L}
+          />
+          {status.favourites_count > 0 && (
+            <Text
+              style={{
+                color: iconColorAction(status.favourited),
+                fontSize: StyleConstants.Font.Size.M,
+                marginLeft: StyleConstants.Spacing.XS,
+                marginTop: 0
+              }}
+            >
+              {status.favourites_count}
+            </Text>
+          )}
+        </>
+      ),
+      [status.favourited, status.favourites_count]
+    )
+    const childrenBookmark = useMemo(
+      () => (
         <Icon
-          name='MessageCircle'
-          color={iconColor}
+          name='Bookmark'
+          color={iconColorAction(status.bookmarked)}
           size={StyleConstants.Font.Size.L}
         />
-        {status.replies_count > 0 && (
-          <Text
-            style={{
-              color: theme.secondary,
-              fontSize: StyleConstants.Font.Size.M,
-              marginLeft: StyleConstants.Spacing.XS
-            }}
-          >
-            {status.replies_count}
-          </Text>
-        )}
-      </>
-    ),
-    [status.replies_count]
-  )
-  const childrenReblog = useMemo(
-    () => (
+      ),
+      [status.bookmarked]
+    )
+
+    return (
       <>
-        <Icon
-          name='Repeat'
-          color={
-            status.visibility === 'private' || status.visibility === 'direct'
-              ? theme.disabled
-              : iconColorAction(status.reblogged)
-          }
-          size={StyleConstants.Font.Size.L}
-        />
-        {status.reblogs_count > 0 && (
-          <Text
-            style={{
-              color: iconColorAction(status.reblogged),
-              fontSize: StyleConstants.Font.Size.M,
-              marginLeft: StyleConstants.Spacing.XS
-            }}
-          >
-            {status.reblogs_count}
-          </Text>
-        )}
+        <View style={styles.actions}>
+          <Pressable
+            style={styles.action}
+            onPress={onPressReply}
+            children={childrenReply}
+          />
+
+          <Pressable
+            style={styles.action}
+            onPress={onPressReblog}
+            children={childrenReblog}
+            disabled={
+              status.visibility === 'private' || status.visibility === 'direct'
+            }
+          />
+
+          <Pressable
+            style={styles.action}
+            onPress={onPressFavourite}
+            children={childrenFavourite}
+          />
+
+          <Pressable
+            style={styles.action}
+            onPress={onPressBookmark}
+            children={childrenBookmark}
+          />
+        </View>
       </>
-    ),
-    [status.reblogged, status.reblogs_count]
-  )
-  const childrenFavourite = useMemo(
-    () => (
-      <>
-        <Icon
-          name='Heart'
-          color={iconColorAction(status.favourited)}
-          size={StyleConstants.Font.Size.L}
-        />
-        {status.favourites_count > 0 && (
-          <Text
-            style={{
-              color: iconColorAction(status.favourited),
-              fontSize: StyleConstants.Font.Size.M,
-              marginLeft: StyleConstants.Spacing.XS,
-              marginTop: 0
-            }}
-          >
-            {status.favourites_count}
-          </Text>
-        )}
-      </>
-    ),
-    [status.favourited, status.favourites_count]
-  )
-  const childrenBookmark = useMemo(
-    () => (
-      <Icon
-        name='Bookmark'
-        color={iconColorAction(status.bookmarked)}
-        size={StyleConstants.Font.Size.L}
-      />
-    ),
-    [status.bookmarked]
-  )
-
-  return (
-    <>
-      <View style={styles.actions}>
-        <Pressable
-          style={styles.action}
-          onPress={onPressReply}
-          children={childrenReply}
-        />
-
-        <Pressable
-          style={styles.action}
-          onPress={onPressReblog}
-          children={childrenReblog}
-          disabled={
-            status.visibility === 'private' || status.visibility === 'direct'
-          }
-        />
-
-        <Pressable
-          style={styles.action}
-          onPress={onPressFavourite}
-          children={childrenFavourite}
-        />
-
-        <Pressable
-          style={styles.action}
-          onPress={onPressBookmark}
-          children={childrenBookmark}
-        />
-      </View>
-    </>
-  )
-}
+    )
+  },
+  () => true
+)
 
 const styles = StyleSheet.create({
   actions: {

src/components/Timeline/Shared/HeaderConversation.tsx

@@ -15,28 +15,32 @@ import { useQueryClient } from 'react-query'
 import HeaderSharedCreated from './HeaderShared/Created'
 import HeaderSharedMuted from './HeaderShared/Muted'
 
-const Names: React.FC<{ accounts: Mastodon.Account[] }> = ({ accounts }) => {
-  const { t } = useTranslation('componentTimeline')
-  const { theme } = useTheme()
+const Names = React.memo(
+  ({ accounts }: { accounts: Mastodon.Account[] }) => {
+    const { t } = useTranslation('componentTimeline')
+    const { theme } = useTheme()
 
-  return (
-    <Text numberOfLines={1}>
-      <Text style={[styles.namesLeading, { color: theme.secondary }]}>
-        {t('shared.header.conversation.withAccounts')}
+    return (
+      <Text
+        numberOfLines={1}
+        style={[styles.namesLeading, { color: theme.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>
-      {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
+)
 
 export interface Props {
   queryKey: QueryKeyTimeline

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: {

src/screens/Compose.tsx

@@ -353,7 +353,7 @@ const ScreenCompose: React.FC<ScreenComposeProp> = ({
             <Stack.Screen
               name='Screen-Compose-DraftsList'
               component={ComposeDraftsList}
-              options={{ stackPresentation: 'modal' }}
+              options={{ stackPresentation: 'modal', headerShown: false }}
             />
             <Stack.Screen
               name='Screen-Compose-EditAttachment'

src/screens/Tabs/Me/Root/Lists/List.tsx

@@ -1,7 +1,8 @@
 import Timeline from '@components/Timeline'
+import TimelineDefault from '@components/Timeline/Default'
 import { StackScreenProps } from '@react-navigation/stack'
 import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
-import React from 'react'
+import React, { useCallback } from 'react'
 
 const ScreenMeListsList: React.FC<StackScreenProps<
   Nav.TabMeStackParamList,
@@ -12,8 +13,12 @@ const ScreenMeListsList: React.FC<StackScreenProps<
   }
 }) => {
   const queryKey: QueryKeyTimeline = ['Timeline', { page: 'List', list }]
+  const renderItem = useCallback(
+    ({ item }) => <TimelineDefault item={item} queryKey={queryKey} />,
+    []
+  )
 
-  return <Timeline queryKey={queryKey} />
+  return <Timeline queryKey={queryKey} customProps={{ renderItem }} />
 }
 
 export default ScreenMeListsList

src/screens/Tabs/Me/Switch.tsx

@@ -2,7 +2,7 @@ import { HeaderCenter, HeaderLeft } from '@components/Header'
 import { StackScreenProps } from '@react-navigation/stack'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Platform } from 'react-native'
+import { KeyboardAvoidingView, Platform } from 'react-native'
 import { createNativeStackNavigator } from 'react-native-screens/native-stack'
 import ScreenMeSwitchRoot from './Switch/Root'
 
@@ -14,26 +14,33 @@ const ScreenMeSwitch: React.FC<StackScreenProps<
 >> = ({ navigation }) => {
   const { t } = useTranslation()
   return (
-    <Stack.Navigator
-      screenOptions={{ headerHideShadow: true, headerTopInsetEnabled: false }}
+    <KeyboardAvoidingView
+      style={{ flex: 1 }}
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
     >
-      <Stack.Screen
-        name='Screen-Me-Switch-Root'
-        component={ScreenMeSwitchRoot}
-        options={{
-          headerTitle: t('meSwitch:heading'),
-          ...(Platform.OS === 'android' && {
-            headerCenter: () => <HeaderCenter content={t('meSwitch:heading')} />
-          }),
-          headerLeft: () => (
-            <HeaderLeft
-              content='ChevronDown'
-              onPress={() => navigation.goBack()}
-            />
-          )
-        }}
-      />
-    </Stack.Navigator>
+      <Stack.Navigator
+        screenOptions={{ headerHideShadow: true, headerTopInsetEnabled: false }}
+      >
+        <Stack.Screen
+          name='Screen-Me-Switch-Root'
+          component={ScreenMeSwitchRoot}
+          options={{
+            headerTitle: t('meSwitch:heading'),
+            ...(Platform.OS === 'android' && {
+              headerCenter: () => (
+                <HeaderCenter content={t('meSwitch:heading')} />
+              )
+            }),
+            headerLeft: () => (
+              <HeaderLeft
+                content='ChevronDown'
+                onPress={() => navigation.goBack()}
+              />
+            )
+          }}
+        />
+      </Stack.Navigator>
+    </KeyboardAvoidingView>
   )
 }
 

src/screens/Tabs/Me/Switch/Root.tsx

@@ -60,56 +60,52 @@ const ScreenMeSwitchRoot: React.FC = () => {
   const instanceActive = useSelector(getInstanceActive)
 
   return (
-    <KeyboardAvoidingView
-      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-      style={{ flex: 1 }}
-    >
-      <ScrollView keyboardShouldPersistTaps='handled'>
-        <View
-          style={[styles.firstSection, { borderBottomColor: theme.border }]}
-        >
-          <Text style={[styles.header, { color: theme.primary }]}>
-            {t('content.existing')}
-          </Text>
-          <View style={styles.accountButtons}>
-            {instances.length
-              ? instances
-                  .slice()
-                  .sort((a, b) =>
-                    `${a.uri}${a.account.acct}`.localeCompare(
-                      `${b.uri}${b.account.acct}`
-                    )
+    <ScrollView style={styles.base} keyboardShouldPersistTaps='handled'>
+      <View style={[styles.firstSection, { borderBottomColor: theme.border }]}>
+        <Text style={[styles.header, { color: theme.primary }]}>
+          {t('content.existing')}
+        </Text>
+        <View style={styles.accountButtons}>
+          {instances.length
+            ? instances
+                .slice()
+                .sort((a, b) =>
+                  `${a.uri}${a.account.acct}`.localeCompare(
+                    `${b.uri}${b.account.acct}`
                   )
-                  .map((instance, index) => {
-                    const localAccount = instances[instanceActive!]
-                    return (
-                      <AccountButton
-                        key={index}
-                        instance={instance}
-                        disabled={
-                          instance.url === localAccount.url &&
-                          instance.token === localAccount.token &&
-                          instance.account.id === localAccount.account.id
-                        }
-                      />
-                    )
-                  })
-              : null}
-          </View>
+                )
+                .map((instance, index) => {
+                  const localAccount = instances[instanceActive!]
+                  return (
+                    <AccountButton
+                      key={index}
+                      instance={instance}
+                      disabled={
+                        instance.url === localAccount.url &&
+                        instance.token === localAccount.token &&
+                        instance.account.id === localAccount.account.id
+                      }
+                    />
+                  )
+                })
+            : null}
         </View>
+      </View>
 
-        <View style={styles.secondSection}>
-          <Text style={[styles.header, { color: theme.primary }]}>
-            {t('content.new')}
-          </Text>
-          <ComponentInstance disableHeaderImage goBack />
-        </View>
-      </ScrollView>
-    </KeyboardAvoidingView>
+      <View style={styles.secondSection}>
+        <Text style={[styles.header, { color: theme.primary }]}>
+          {t('content.new')}
+        </Text>
+        <ComponentInstance disableHeaderImage goBack />
+      </View>
+    </ScrollView>
   )
 }
 
 const styles = StyleSheet.create({
+  base: {
+    marginBottom: StyleConstants.Spacing.L
+  },
   header: {
     ...StyleConstants.FontStyle.M,
     textAlign: 'center',