Use svg icons instead of expo ones

Possibility to control `strokeWidth`
2021-01-03 02:00:26 +01:00 · 2021-01-03 02:00:26 +01:00 · dceaf8d25c
parent 5a80359739
commit dceaf8d25c
62 changed files with 495 additions and 427 deletions
--- a/App.tsx
+++ b/App.tsx
@ -57,7 +57,7 @@ enableScreens()
 const App: React.FC = () => {
  startingLog('log', 'rendering App')
  const [appLoaded, setAppLoaded] = useState(false)
-  const [localCorrupt, setLocalCorrupt] = useState(false)
+  const [localCorrupt, setLocalCorrupt] = useState<string>()

  useEffect(() => {
    const onlineState = onlineManager.setEventListener(setOnline => {
@ -118,16 +118,20 @@ const App: React.FC = () => {
              startingLog('log', 'local credential check passed')
              if (res.body.id !== store.getState().instances.local.account.id) {
                store.dispatch(resetLocal())
-                setLocalCorrupt(true)
+                setLocalCorrupt('')
              }
              setAppLoaded(true)
            })
            .catch(error => {
              startingLog('error', 'local credential check failed')
-              if (error.status && typeof error.status === 'number') {
+              if (
+                error.status &&
+                typeof error.status === 'number' &&
+                error.status === 401
+              ) {
                store.dispatch(resetLocal())
-                setLocalCorrupt(true)
              }
+              setLocalCorrupt(error.data.error)
              setAppLoaded(true)
            })
        } else {
--- a/package.json
+++ b/package.json
@ -9,7 +9,6 @@
    "test": "jest"
  },
  "dependencies": {
-    "@expo/vector-icons": "^12.0.0",
    "@react-native-community/masked-view": "0.1.10",
    "@react-native-community/netinfo": "^5.9.9",
    "@react-native-community/segmented-control": "2.2.1",
@ -50,6 +49,7 @@
    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.0.tar.gz",
    "react-native-animated-spinkit": "^1.4.2",
    "react-native-expo-image-cache": "^4.1.0",
+    "react-native-feather": "^1.0.2",
    "react-native-gesture-handler": "~1.8.0",
    "react-native-htmlview": "^0.16.0",
    "react-native-image-zoom-viewer": "^3.0.1",
--- a/src/@types/app.d.ts
+++ b/src/@types/app.d.ts
@ -66,7 +66,7 @@ declare namespace QueryKey {
    {
      hashtag?: Mastodon.Tag['name']
      list?: Mastodon.List['id']
-      toot?: Mastodon.Status
+      toot?: Mastodon.Status['id']
      account?: Mastodon.Account['id']
    }
  ]
--- a/src/@types/untyped.d.ts
+++ b/src/@types/untyped.d.ts
@ -1,3 +1,4 @@
 declare module 'gl-react-blurhash'
-declare module 'react-native-toast-message'
+declare module 'react-native-feather'
 declare module 'react-native-htmlview'
+declare module 'react-native-toast-message'
--- a/src/Index.tsx
+++ b/src/Index.tsx
@ -1,5 +1,5 @@
 import client from '@api/client'
-import { Feather } from '@expo/vector-icons'
+import Icon from '@components/Icon'
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
 import {
  NavigationContainer,
@ -37,7 +37,7 @@ export type RootStackParamList = {
 }

 export interface Props {
-  localCorrupt: boolean
+  localCorrupt?: string
 }

 const Index: React.FC<Props> = ({ localCorrupt }) => {
@ -71,7 +71,7 @@ const Index: React.FC<Props> = ({ localCorrupt }) => {
      ? toast({
          type: 'error',
          message: '登录已过期',
-          description: '请重新登录',
+          description: localCorrupt.length ? localCorrupt : undefined,
          autoHide: false
        })
      : undefined
@ -171,27 +171,27 @@ const Index: React.FC<Props> = ({ localCorrupt }) => {
        let updateColor: string = color
        switch (route.name) {
          case 'Screen-Local':
-            name = 'home'
+            name = 'Home'
            break
          case 'Screen-Public':
-            name = 'globe'
+            name = 'Globe'
            !focused && (updateColor = theme.secondary)
            break
          case 'Screen-Post':
-            name = 'plus'
+            name = 'Plus'
            break
          case 'Screen-Notifications':
-            name = 'bell'
+            name = 'Bell'
            break
          case 'Screen-Me':
-            name = focused ? 'meh' : 'smile'
+            name = focused ? 'Meh' : 'Smile'
            !focused && (updateColor = theme.secondary)
            break
          default:
-            name = 'alert-octagon'
+            name = 'AlertOctagon'
            break
        }
-        return <Feather name={name} size={size} color={updateColor} />
+        return <Icon name={name} size={size} color={updateColor} />
      }
    }),
    []
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@ -1,4 +1,7 @@
-import { Feather } from '@expo/vector-icons'
+import Icon from '@components/Icon'
+import { StyleConstants } from '@utils/styles/constants'
+import layoutAnimation from '@utils/styles/layoutAnimation'
+import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useEffect, useMemo } from 'react'
 import {
  Pressable,
@ -9,9 +12,6 @@ import {
  ViewStyle
 } from 'react-native'
 import { Chase } from 'react-native-animated-spinkit'
-import { StyleConstants } from '@utils/styles/constants'
-import { useTheme } from '@utils/styles/ThemeManager'
-import layoutAnimation from '@root/utils/styles/layoutAnimation'

 export interface Props {
  style?: StyleProp<ViewStyle>
@ -23,6 +23,7 @@ export interface Props {
  destructive?: boolean
  disabled?: boolean

+  strokeWidth?: number
  size?: 'S' | 'M' | 'L'
  spacing?: 'XS' | 'S' | 'M' | 'L'
  round?: boolean
@ -38,6 +39,7 @@ const Button: React.FC<Props> = ({
  loading = false,
  destructive = false,
  disabled = false,
+  strokeWidth,
  size = 'M',
  spacing = 'S',
  round = false,
@ -78,12 +80,12 @@ const Button: React.FC<Props> = ({
      case 'icon':
        return (
          <>
-            <Feather
-              name={content as any}
-              size={StyleConstants.Font.Size[size] * (size === 'L' ? 1.25 : 1)}
+            <Icon
+              name={content}
              color={colorContent}
+              strokeWidth={strokeWidth}
              style={{ opacity: loading ? 0 : 1 }}
-              testID='icon'
+              size={StyleConstants.Font.Size[size] * (size === 'L' ? 1.25 : 1)}
            />
            {loading && loadingSpinkit}
          </>
--- a/src/components/Header/Left.tsx
+++ b/src/components/Header/Left.tsx
@ -1,8 +1,8 @@
-import React, { useMemo } from 'react'
-import { Pressable, StyleSheet, Text } from 'react-native'
-import { Feather } from '@expo/vector-icons'
+import Icon from '@components/Icon'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
+import React, { useMemo } from 'react'
+import { Pressable, StyleSheet, Text } from 'react-native'

 export interface Props {
  type?: 'icon' | 'text'
@ -18,9 +18,9 @@ const HeaderLeft: React.FC<Props> = ({ type = 'icon', content, onPress }) => {
    switch (type) {
      case 'icon':
        return (
-          <Feather
-            name={content || ('chevron-left' as any)}
+          <Icon
            color={theme.primary}
+            name={content || 'ChevronLeft'}
            size={StyleConstants.Spacing.M * 1.25}
          />
        )
--- a/src/components/Header/Right.tsx
+++ b/src/components/Header/Right.tsx
@ -1,13 +1,13 @@
+import Icon from '@components/Icon'
+import { StyleConstants } from '@utils/styles/constants'
+import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useMemo } from 'react'
 import { Pressable, StyleSheet, Text, View } from 'react-native'
 import { Chase } from 'react-native-animated-spinkit'
-import { Feather } from '@expo/vector-icons'
-import { StyleConstants } from '@utils/styles/constants'
-import { useTheme } from '@utils/styles/ThemeManager'

 export interface Props {
  type?: 'icon' | 'text'
-  content?: string
+  content: string

  loading?: boolean
  disabled?: boolean
@ -41,11 +41,11 @@ const HeaderRight: React.FC<Props> = ({
      case 'icon':
        return (
          <>
-            <Feather
-              name={content as any}
-              color={disabled ? theme.secondary : theme.primary}
-              size={StyleConstants.Spacing.M * 1.25}
+            <Icon
+              name={content}
              style={{ opacity: loading ? 0 : 1 }}
+              size={StyleConstants.Spacing.M * 1.25}
+              color={disabled ? theme.secondary : theme.primary}
            />
            {loading && loadingSpinkit}
          </>
--- a/src/components/Icon.tsx
+++ b/src/components/Icon.tsx
@ -0,0 +1,45 @@
+import React, { createElement } from 'react'
+import { StyleProp, View, ViewStyle } from 'react-native'
+import * as FeatherIcon from 'react-native-feather'
+
+export interface Props {
+  name: string
+  size: number
+  color: string
+  strokeWidth?: number
+  inline?: boolean // When used in line of text, need to drag it down
+  style?: StyleProp<ViewStyle>
+}
+
+const Icon: React.FC<Props> = ({
+  name,
+  size,
+  color,
+  strokeWidth = 2,
+  inline = false,
+  style
+}) => {
+  return (
+    <View
+      style={[
+        style,
+        {
+          width: size,
+          height: size,
+          justifyContent: 'center',
+          alignItems: 'center',
+          marginBottom: inline ? -size * 0.125 : undefined
+        }
+      ]}
+    >
+      {createElement(FeatherIcon[name], {
+        width: size,
+        height: size,
+        color,
+        strokeWidth
+      })}
+    </View>
+  )
+}
+
+export default Icon
--- a/src/components/Menu/Row.tsx
+++ b/src/components/Menu/Row.tsx
@ -1,4 +1,4 @@
-import { Feather } from '@expo/vector-icons'
+import Icon from '@components/Icon'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import { ColorDefinitions } from '@utils/styles/themes'
@ -18,7 +18,7 @@ export interface Props {
  switchDisabled?: boolean
  switchOnValueChange?: () => void

-  iconBack?: 'chevron-right' | 'check'
+  iconBack?: 'ChevronRight' | 'Check'
  iconBackColor?: ColorDefinitions

  loading?: boolean
@ -63,7 +63,7 @@ const MenuRow: React.FC<Props> = ({
      <View style={styles.core}>
        <View style={styles.front}>
          {iconFront && (
-            <Feather
+            <Icon
              name={iconFront}
              size={StyleConstants.Font.Size.M + 2}
              color={theme[iconFrontColor]}
@ -116,7 +116,7 @@ const MenuRow: React.FC<Props> = ({
            ) : null}
            {iconBack ? (
              <>
-                <Feather
+                <Icon
                  name={iconBack}
                  size={StyleConstants.Font.Size.M + 2}
                  color={theme[iconBackColor]}
--- a/src/components/Parse/HTML.tsx
+++ b/src/components/Parse/HTML.tsx
@ -1,6 +1,6 @@
+import Icon from '@components/Icon'
 import openLink from '@components/openLink'
 import ParseEmojis from '@components/Parse/Emojis'
-import { Feather } from '@expo/vector-icons'
 import { useNavigation } from '@react-navigation/native'
 import { StyleConstants } from '@utils/styles/constants'
 import layoutAnimation from '@utils/styles/layoutAnimation'
@ -96,10 +96,11 @@ const renderNode = ({
          }
        >
          {!shouldBeTag ? (
-            <Feather
-              name='external-link'
-              size={StyleConstants.Font.Size[size]}
+            <Icon
+              inline
              color={theme.blue}
+              name='ExternalLink'
+              size={StyleConstants.Font.Size[size]}
            />
          ) : null}
          {content || (showFullLink ? href : domain[1])}
@ -166,37 +167,45 @@ const ParseHTML: React.FC<Props> = ({

      const [heightOriginal, setHeightOriginal] = useState<number>()
      const [heightTruncated, setHeightTruncated] = useState<number>()
-      const [allowExpand, setAllowExpand] = useState(
-        numberOfLines === 0 ? true : undefined
-      )
+      const [allowExpand, setAllowExpand] = useState(false)
      const [showAllText, setShowAllText] = useState(false)

      const calNumberOfLines = useMemo(() => {
-        if (heightOriginal) {
-          if (!heightTruncated) {
-            return numberOfLines
-          } else {
-            if (allowExpand && !showAllText) {
+        if (numberOfLines === 0) {
+          // For spoilers without calculation
+          return showAllText ? undefined : 1
+        } else {
+          if (heightOriginal) {
+            if (!heightTruncated) {
              return numberOfLines
            } else {
-              return undefined
+              if (allowExpand && !showAllText) {
+                return numberOfLines
+              } else {
+                return undefined
+              }
            }
+          } else {
+            return undefined
          }
-        } else {
-          return undefined
        }
      }, [heightOriginal, heightTruncated, allowExpand, showAllText])

      const onLayout = useCallback(
        ({ nativeEvent }) => {
-          if (!heightOriginal) {
-            setHeightOriginal(nativeEvent.layout.height)
+          if (numberOfLines === 0) {
+            // For spoilers without calculation
+            setAllowExpand(true)
          } else {
-            if (!heightTruncated) {
-              setHeightTruncated(nativeEvent.layout.height)
+            if (!heightOriginal) {
+              setHeightOriginal(nativeEvent.layout.height)
            } else {
-              if (heightOriginal > heightTruncated) {
-                setAllowExpand(true)
+              if (!heightTruncated) {
+                setHeightTruncated(nativeEvent.layout.height)
+              } else {
+                if (heightOriginal > heightTruncated) {
+                  setAllowExpand(true)
+                }
              }
            }
          }
@ -214,7 +223,7 @@ const ParseHTML: React.FC<Props> = ({
            }}
            children={children}
            numberOfLines={calNumberOfLines}
-            onLayout={allowExpand === undefined ? onLayout : undefined}
+            onLayout={onLayout}
          />
          {allowExpand ? (
            <Pressable
--- a/src/components/Timelines.tsx
+++ b/src/components/Timelines.tsx
@ -86,7 +86,7 @@ const Timelines: React.FC<Props> = ({ name, content }) => {
              </View>
            ),
            headerRight: () => (
-              <HeaderRight content='search' onPress={onPressSearch} />
+              <HeaderRight content='Search' onPress={onPressSearch} />
            )
          })
        }}
--- a/src/components/Timelines/Timeline.tsx
+++ b/src/components/Timelines/Timeline.tsx
@ -24,10 +24,10 @@ export type TimelineData =

 export interface Props {
  page: App.Pages
-  hashtag?: string
-  list?: string
-  toot?: Mastodon.Status
-  account?: string
+  hashtag?: Mastodon.Tag['name']
+  list?: Mastodon.List['id']
+  toot?: Mastodon.Status['id']
+  account?: Mastodon.Account['id']
  disableRefresh?: boolean
  disableInfinity?: boolean
 }
@ -134,7 +134,7 @@ const Timeline: React.FC<Props> = ({
                flattenPinnedLength[0] && {
                  pinnedLength: flattenPinnedLength[0]
                })}
-              {...(toot && toot.id === item.id && { highlighted: true })}
+              {...(toot === item.id && { highlighted: true })}
            />
          )
      }
@ -144,7 +144,7 @@ const Timeline: React.FC<Props> = ({
  const ItemSeparatorComponent = useCallback(
    ({ leadingItem }) => (
      <TimelineSeparator
-        {...(toot && toot.id === leadingItem.id && { highlighted: true })}
+        {...(toot === leadingItem.id && { highlighted: true })}
      />
    ),
    []
--- a/src/components/Timelines/Timeline/Default.tsx
+++ b/src/components/Timelines/Timeline/Default.tsx
@ -44,6 +44,7 @@ const TimelineDefault: React.FC<Props> = ({
      }),
    []
  )
+
  return (
    <Pressable style={styles.statusView} onPress={onPress}>
      {item.reblog ? (
@ -57,11 +58,11 @@ const TimelineDefault: React.FC<Props> = ({
          {...(!isRemotePublic && { queryKey })}
          account={actualStatus.account}
        />
-        <TimelineHeaderDefault
+        {/* <TimelineHeaderDefault
          {...(!isRemotePublic && { queryKey })}
          status={actualStatus}
          sameAccount={actualStatus.account.id === localAccountId}
-        />
+        /> */}
      </View>

      <View
--- a/src/components/Timelines/Timeline/Empty.tsx
+++ b/src/components/Timelines/Timeline/Empty.tsx
@ -1,5 +1,5 @@
 import Button from '@components/Button'
-import { Feather } from '@expo/vector-icons'
+import Icon from '@components/Icon'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useMemo } from 'react'
@ -26,8 +26,8 @@ const TimelineEmpty: React.FC<Props> = ({ status, refetch }) => {
      case 'error':
        return (
          <>
-            <Feather
-              name='frown'
+            <Icon
+              name='Frown'
              size={StyleConstants.Font.Size.L}
              color={theme.primary}
            />
@ -44,8 +44,8 @@ const TimelineEmpty: React.FC<Props> = ({ status, refetch }) => {
      case 'success':
        return (
          <>
-            <Feather
-              name='smartphone'
+            <Icon
+              name='Smartphone'
              size={StyleConstants.Font.Size.L}
              color={theme.primary}
            />
--- a/src/components/Timelines/Timeline/Shared/Actioned.tsx
+++ b/src/components/Timelines/Timeline/Shared/Actioned.tsx
@ -1,5 +1,5 @@
+import Icon from '@components/Icon'
 import { ParseEmojis } from '@components/Parse'
-import { Feather } from '@expo/vector-icons'
 import { useNavigation } from '@react-navigation/native'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
@ -37,8 +37,8 @@ const TimelineActioned: React.FC<Props> = ({
      case 'pinned':
        return (
          <>
-            <Feather
-              name='anchor'
+            <Icon
+              name='Anchor'
              size={StyleConstants.Font.Size.S}
              color={iconColor}
              style={styles.icon}
@ -50,8 +50,8 @@ const TimelineActioned: React.FC<Props> = ({
      case 'favourite':
        return (
          <>
-            <Feather
-              name='heart'
+            <Icon
+              name='Heart'
              size={StyleConstants.Font.Size.S}
              color={iconColor}
              style={styles.icon}
@ -65,8 +65,8 @@ const TimelineActioned: React.FC<Props> = ({
      case 'follow':
        return (
          <>
-            <Feather
-              name='user-plus'
+            <Icon
+              name='UserPlus'
              size={StyleConstants.Font.Size.S}
              color={iconColor}
              style={styles.icon}
@ -80,8 +80,8 @@ const TimelineActioned: React.FC<Props> = ({
      case 'poll':
        return (
          <>
-            <Feather
-              name='bar-chart-2'
+            <Icon
+              name='BarChart2'
              size={StyleConstants.Font.Size.S}
              color={iconColor}
              style={styles.icon}
@ -93,8 +93,8 @@ const TimelineActioned: React.FC<Props> = ({
      case 'reblog':
        return (
          <>
-            <Feather
-              name='repeat'
+            <Icon
+              name='Repeat'
              size={StyleConstants.Font.Size.S}
              color={iconColor}
              style={styles.icon}
@ -118,12 +118,13 @@ const TimelineActioned: React.FC<Props> = ({
 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
  },
  icon: {
-    paddingRight: StyleConstants.Spacing.S
+    marginRight: StyleConstants.Spacing.S
  }
 })

--- a/src/components/Timelines/Timeline/Shared/Actions.tsx
+++ b/src/components/Timelines/Timeline/Shared/Actions.tsx
@ -1,8 +1,8 @@
 import client from '@api/client'
 import haptics from '@components/haptics'
+import Icon from '@components/Icon'
 import { TimelineData } from '@components/Timelines/Timeline'
 import { toast } from '@components/toast'
-import { Feather } from '@expo/vector-icons'
 import { useNavigation } from '@react-navigation/native'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
@ -171,8 +171,8 @@ const TimelineActions: React.FC<Props> = ({ queryKey, status, reblog }) => {
  const childrenReply = useMemo(
    () => (
      <>
-        <Feather
-          name='message-circle'
+        <Icon
+          name='MessageCircle'
          color={iconColor}
          size={StyleConstants.Font.Size.M + 2}
        />
@ -193,8 +193,8 @@ const TimelineActions: React.FC<Props> = ({ queryKey, status, reblog }) => {
  )
  const childrenReblog = useMemo(
    () => (
-      <Feather
-        name='repeat'
+      <Icon
+        name='Repeat'
        color={
          status.visibility === 'private' || status.visibility === 'direct'
            ? theme.disabled
@ -207,8 +207,8 @@ const TimelineActions: React.FC<Props> = ({ queryKey, status, reblog }) => {
  )
  const childrenFavourite = useMemo(
    () => (
-      <Feather
-        name='heart'
+      <Icon
+        name='Heart'
        color={iconColorAction(status.favourited)}
        size={StyleConstants.Font.Size.M + 2}
      />
@ -217,8 +217,8 @@ const TimelineActions: React.FC<Props> = ({ queryKey, status, reblog }) => {
  )
  const childrenBookmark = useMemo(
    () => (
-      <Feather
-        name='bookmark'
+      <Icon
+        name='Bookmark'
        color={iconColorAction(status.bookmarked)}
        size={StyleConstants.Font.Size.M + 2}
      />
@ -227,8 +227,8 @@ const TimelineActions: React.FC<Props> = ({ queryKey, status, reblog }) => {
  )
  const childrenShare = useMemo(
    () => (
-      <Feather
-        name='share-2'
+      <Icon
+        name='Share2'
        color={iconColor}
        size={StyleConstants.Font.Size.M + 2}
      />
--- a/src/components/Timelines/Timeline/Shared/Attachment.tsx
+++ b/src/components/Timelines/Timeline/Shared/Attachment.tsx
@ -117,7 +117,7 @@ const TimelineAttachment: React.FC<Props> = ({ status }) => {
        ) : (
          <Button
            type='icon'
-            content='eye-off'
+            content='EyeOff'
            round
            overlay
            onPress={onPressShow}
--- a/src/components/Timelines/Timeline/Shared/Attachment/Audio.tsx
+++ b/src/components/Timelines/Timeline/Shared/Attachment/Audio.tsx
@ -67,7 +67,7 @@ const AttachmentAudio: React.FC<Props> = ({ sensitiveShown, audio }) => {
            )}
            <Button
              type='icon'
-              content={audioPlaying ? 'pause-circle' : 'play-circle'}
+              content={audioPlaying ? 'PauseCircle' : 'PlayCircle'}
              size='L'
              round
              overlay
--- a/src/components/Timelines/Timeline/Shared/Attachment/Video.tsx
+++ b/src/components/Timelines/Timeline/Shared/Attachment/Video.tsx
@ -64,7 +64,7 @@ const AttachmentVideo: React.FC<Props> = ({ sensitiveShown, video }) => {
        ) : (
          <Button
            type='icon'
-            content='play-circle'
+            content='PlayCircle'
            size='L'
            round
            overlay
--- a/src/components/Timelines/Timeline/Shared/End.tsx
+++ b/src/components/Timelines/Timeline/Shared/End.tsx
@ -1,4 +1,4 @@
-import { Feather } from '@expo/vector-icons'
+import Icon from '@components/Icon'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
@ -22,8 +22,9 @@ const TimelineEnd: React.FC<Props> = ({ hasNextPage }) => {
          <Trans
            i18nKey='timeline:shared.end.message' // optional -> fallbacks to defaults if not provided
            components={[
-              <Feather
-                name='coffee'
+              <Icon
+                inline
+                name='Coffee'
                size={StyleConstants.Font.Size.S}
                color={theme.secondary}
              />
@ -43,8 +44,7 @@ const styles = StyleSheet.create({
    padding: StyleConstants.Spacing.M
  },
  text: {
-    ...StyleConstants.FontStyle.S,
-    marginLeft: StyleConstants.Spacing.S
+    ...StyleConstants.FontStyle.S
  }
 })

--- a/src/components/Timelines/Timeline/Shared/HeaderConversation.tsx
+++ b/src/components/Timelines/Timeline/Shared/HeaderConversation.tsx
@ -1,7 +1,7 @@
 import client from '@api/client'
 import haptics from '@components/haptics'
+import Icon from '@components/Icon'
 import { toast } from '@components/toast'
-import { Feather } from '@expo/vector-icons'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useCallback, useMemo } from 'react'
@ -66,8 +66,8 @@ const HeaderConversation: React.FC<Props> = ({ queryKey, conversation }) => {

  const actionChildren = useMemo(
    () => (
-      <Feather
-        name='trash'
+      <Icon
+        name='Trash'
        color={theme.secondary}
        size={StyleConstants.Font.Size.M + 2}
      />
@ -86,7 +86,7 @@ const HeaderConversation: React.FC<Props> = ({ queryKey, conversation }) => {
            />
          ) : null}
          {conversation.unread && (
-            <Feather name='circle' color={theme.blue} style={styles.unread} />
+            <Icon name='Circle' color={theme.blue} style={styles.unread} />
          )}
        </View>
      </View>
--- a/src/components/Timelines/Timeline/Shared/HeaderDefault.tsx
+++ b/src/components/Timelines/Timeline/Shared/HeaderDefault.tsx
@ -1,5 +1,5 @@
 import BottomSheet from '@components/BottomSheet'
-import { Feather } from '@expo/vector-icons'
+import Icon from '@components/Icon'
 import { getLocalUrl } from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
@ -9,10 +9,10 @@ import HeaderDefaultActionsStatus from '@components/Timelines/Timeline/Shared/He
 import React, { useCallback, useMemo, useState } from 'react'
 import { Pressable, StyleSheet, View } from 'react-native'
 import { useSelector } from 'react-redux'
-import HeaderSharedApplication from './HeaderShared/Application'
-import HeaderSharedVisibility from './HeaderShared/Visibility'
-import HeaderSharedCreated from './HeaderShared/Created'
 import HeaderSharedAccount from './HeaderShared/Account'
+import HeaderSharedApplication from './HeaderShared/Application'
+import HeaderSharedCreated from './HeaderShared/Created'
+import HeaderSharedVisibility from './HeaderShared/Visibility'

 export interface Props {
  queryKey?: QueryKey.Timeline
@ -37,8 +37,8 @@ const TimelineHeaderDefault: React.FC<Props> = ({

  const pressableAction = useMemo(
    () => (
-      <Feather
-        name='more-horizontal'
+      <Icon
+        name='MoreHorizontal'
        color={theme.secondary}
        size={StyleConstants.Font.Size.M + 2}
      />
@ -102,8 +102,7 @@ const TimelineHeaderDefault: React.FC<Props> = ({
 const styles = StyleSheet.create({
  base: {
    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'baseline'
+    flexDirection: 'row'
  },
  accountAndMeta: {
    flex: 4
--- a/src/components/Timelines/Timeline/Shared/HeaderDefault/ActionsAccount.tsx
+++ b/src/components/Timelines/Timeline/Shared/HeaderDefault/ActionsAccount.tsx
@ -84,7 +84,7 @@ const HeaderDefaultActionsAccount: React.FC<Props> = ({
          setBottomSheetVisible(false)
          mutate({ type: 'mute' })
        }}
-        iconFront='eye-off'
+        iconFront='EyeOff'
        title={t('timeline:shared.header.default.actions.account.mute.button', {
          acct: account.acct
        })}
@ -94,7 +94,7 @@ const HeaderDefaultActionsAccount: React.FC<Props> = ({
          setBottomSheetVisible(false)
          mutate({ type: 'block' })
        }}
-        iconFront='x-circle'
+        iconFront='XCircle'
        title={t(
          'timeline:shared.header.default.actions.account.block.button',
          {
@ -107,7 +107,7 @@ const HeaderDefaultActionsAccount: React.FC<Props> = ({
          setBottomSheetVisible(false)
          mutate({ type: 'reports' })
        }}
-        iconFront='flag'
+        iconFront='Flag'
        title={t(
          'timeline:shared.header.default.actions.account.report.button',
          {
--- a/src/components/Timelines/Timeline/Shared/HeaderDefault/ActionsDomain.tsx
+++ b/src/components/Timelines/Timeline/Shared/HeaderDefault/ActionsDomain.tsx
@ -54,7 +54,7 @@ const HeaderDefaultActionsDomain: React.FC<Props> = ({
          setBottomSheetVisible(false)
          mutate()
        }}
-        iconFront='cloud-off'
+        iconFront='CloudOff'
        title={t(`timeline:shared.header.default.actions.domain.block.button`, {
          domain
        })}
--- a/src/components/Timelines/Timeline/Shared/HeaderDefault/ActionsStatus.tsx
+++ b/src/components/Timelines/Timeline/Shared/HeaderDefault/ActionsStatus.tsx
@ -128,7 +128,7 @@ const HeaderDefaultActionsStatus: React.FC<Props> = ({
          setBottomSheetVisible(false)
          mutate({ type: 'delete' })
        }}
-        iconFront='trash'
+        iconFront='Trash'
        title={t('timeline:shared.header.default.actions.status.delete.button')}
      />
      <MenuRow
@ -174,7 +174,7 @@ const HeaderDefaultActionsStatus: React.FC<Props> = ({
            ]
          )
        }}
-        iconFront='trash'
+        iconFront='Trash'
        title={t('timeline:shared.header.default.actions.status.edit.button')}
      />
      <MenuRow
@ -182,7 +182,7 @@ const HeaderDefaultActionsStatus: React.FC<Props> = ({
          setBottomSheetVisible(false)
          mutate({ type: 'mute', state: status.muted })
        }}
-        iconFront='volume-x'
+        iconFront='VolumeX'
        title={
          status.muted
            ? t(
@ -200,7 +200,7 @@ const HeaderDefaultActionsStatus: React.FC<Props> = ({
            setBottomSheetVisible(false)
            mutate({ type: 'pin', state: status.pinned })
          }}
-          iconFront='anchor'
+          iconFront='Anchor'
          title={
            status.pinned
              ? t(
--- a/src/components/Timelines/Timeline/Shared/HeaderNotification.tsx
+++ b/src/components/Timelines/Timeline/Shared/HeaderNotification.tsx
@ -1,6 +1,6 @@
 import client from '@api/client'
-import { Feather } from '@expo/vector-icons'
 import haptics from '@components/haptics'
+import Icon from '@components/Icon'
 import { toast } from '@components/toast'
 import { relationshipFetch } from '@utils/fetches/relationshipFetch'
 import { StyleConstants } from '@utils/styles/constants'
@ -9,10 +9,10 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { Pressable, StyleSheet, View } from 'react-native'
 import { Chase } from 'react-native-animated-spinkit'
 import { useQuery } from 'react-query'
-import HeaderSharedApplication from './HeaderShared/Application'
-import HeaderSharedVisibility from './HeaderShared/Visibility'
-import HeaderSharedCreated from './HeaderShared/Created'
 import HeaderSharedAccount from './HeaderShared/Account'
+import HeaderSharedApplication from './HeaderShared/Application'
+import HeaderSharedCreated from './HeaderShared/Created'
+import HeaderSharedVisibility from './HeaderShared/Visibility'

 export interface Props {
  notification: Mastodon.Notification
@ -73,19 +73,19 @@ const TimelineHeaderNotification: React.FC<Props> = ({ notification }) => {
      case 'success':
        return (
          <Pressable onPress={relationshipOnPress}>
-            <Feather
+            <Icon
              name={
                updateData
                  ? updateData.following
-                    ? 'user-check'
+                    ? 'UserCheck'
                    : updateData.requested
-                    ? 'loader'
-                    : 'user-plus'
+                    ? 'Loader'
+                    : 'UserPlus'
                  : data!.following
-                  ? 'user-check'
+                  ? 'UserCheck'
                  : data!.requested
-                  ? 'loader'
-                  : 'user-plus'
+                  ? 'Loader'
+                  : 'UserPlus'
              }
              color={
                updateData
--- a/src/components/Timelines/Timeline/Shared/HeaderShared/Visibility.tsx
+++ b/src/components/Timelines/Timeline/Shared/HeaderShared/Visibility.tsx
@ -1,4 +1,4 @@
-import { Feather } from '@expo/vector-icons'
+import Icon from '@components/Icon'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
@ -12,8 +12,8 @@ const HeaderSharedVisibility: React.FC<Props> = ({ visibility }) => {
  const { theme } = useTheme()

  return visibility && visibility === 'private' ? (
-    <Feather
-      name='lock'
+    <Icon
+      name='Lock'
      size={StyleConstants.Font.Size.S}
      color={theme.secondary}
      style={styles.visibility}
--- a/src/components/Timelines/Timeline/Shared/Poll.tsx
+++ b/src/components/Timelines/Timeline/Shared/Poll.tsx
@ -1,9 +1,9 @@
 import client from '@api/client'
 import Button from '@components/Button'
 import haptics from '@components/haptics'
+import Icon from '@components/Icon'
 import relativeTime from '@components/relativeTime'
 import { TimelineData } from '@components/Timelines/Timeline'
-import { Feather } from '@expo/vector-icons'
 import { ParseEmojis } from '@root/components/Parse'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
@ -151,8 +151,8 @@ const TimelinePoll: React.FC<Props> = ({
  const isSelected = useCallback(
    (index: number): any =>
      allOptions[index]
-        ? `check-${poll.multiple ? 'square' : 'circle'}`
-        : `${poll.multiple ? 'square' : 'circle'}`,
+        ? `Check${poll.multiple ? 'Square' : 'Circle'}`
+        : `${poll.multiple ? 'Square' : 'Circle'}`,
    [allOptions]
  )

@ -160,11 +160,11 @@ const TimelinePoll: React.FC<Props> = ({
    return poll.options.map((option, index) => (
      <View key={index} style={styles.optionContainer}>
        <View style={styles.optionContent}>
-          <Feather
+          <Icon
            style={styles.optionSelection}
            name={
-              `${poll.own_votes?.includes(index) ? 'check-' : ''}${
-                poll.multiple ? 'square' : 'circle'
+              `${poll.own_votes?.includes(index) ? 'Check' : ''}${
+                poll.multiple ? 'Square' : 'Circle'
              }` as any
            }
            size={StyleConstants.Font.Size.M}
@ -224,7 +224,7 @@ const TimelinePoll: React.FC<Props> = ({
        }}
      >
        <View style={[styles.optionContent]}>
-          <Feather
+          <Icon
            style={styles.optionSelection}
            name={isSelected(index)}
            size={StyleConstants.Font.Size.L}
--- a/src/components/toast.tsx
+++ b/src/components/toast.tsx
@ -1,10 +1,10 @@
+import Icon from '@components/Icon'
+import { StyleConstants } from '@utils/styles/constants'
+import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
 import Toast from 'react-native-toast-message'
-import { useTheme } from '@utils/styles/ThemeManager'
-import { Feather } from '@expo/vector-icons'
-import { StyleConstants } from '@utils/styles/constants'

 export interface Params {
  type: 'success' | 'error' | 'warning'
@ -49,9 +49,9 @@ const toast = ({
 const ToastBase = ({ config }: { config: Config }) => {
  const { theme } = useTheme()
  const iconSet = {
-    success: 'check-circle',
-    error: 'x-circle',
-    warning: 'alert-circle'
+    success: 'CheckCircle',
+    error: 'XCircle',
+    warning: 'AlertCircle'
  }
  enum colorMapping {
    success = 'blue',
@ -67,11 +67,10 @@ const ToastBase = ({ config }: { config: Config }) => {
      ]}
    >
      <View style={styles.container}>
-        <Feather
-          // @ts-ignore
+        <Icon
          name={iconSet[config.type]}
+          size={StyleConstants.Font.Size.M}
          color={theme[colorMapping[config.type]]}
-          size={StyleConstants.Font.Size.M + 2}
        />
        <View style={styles.texts}>
          <Text style={[styles.text1, { color: theme.primary }]}>
@ -104,7 +103,7 @@ const styles = StyleSheet.create({
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
-    padding: StyleConstants.Spacing.L
+    padding: StyleConstants.Spacing.M
  },
  texts: {
    marginLeft: StyleConstants.Spacing.S
@ -114,7 +113,7 @@ const styles = StyleSheet.create({
  },
  text2: {
    ...StyleConstants.FontStyle.S,
-    marginTop: StyleConstants.Spacing.S
+    marginTop: StyleConstants.Spacing.XS
  }
 })

--- a/src/i18n/zh/components/timeline.ts
+++ b/src/i18n/zh/components/timeline.ts
@ -57,16 +57,16 @@ export default {
          account: {
            heading: '关于用户',
            mute: {
-              function: '隐藏 {{acct}} 的嘟文',
-              button: '隐藏 {{acct}} 的嘟文'
+              function: '隐藏 @{{acct}} 的嘟文',
+              button: '隐藏 @{{acct}} 的嘟文'
            },
            block: {
-              function: '屏蔽 {{acct}}',
-              button: '屏蔽 {{acct}}'
+              function: '屏蔽 @{{acct}}',
+              button: '屏蔽 @{{acct}}'
            },
            report: {
-              function: '举报 {{acct}}',
-              button: '举报 {{acct}}'
+              function: '举报 @{{acct}}',
+              button: '举报 @{{acct}}'
            }
          },
          domain: {
--- a/src/screens/Me/Lists.tsx
+++ b/src/screens/Me/Lists.tsx
@ -15,7 +15,7 @@ const ScreenMeLists: React.FC = () => {
      return data?.map((d: Mastodon.List, i: number) => (
        <MenuRow
          key={i}
-          iconFront='list'
+          iconFront='List'
          title={d.title}
          onPress={() =>
            navigation.navigate('Screen-Me-Lists-List', {
--- a/src/screens/Me/Root.tsx
+++ b/src/screens/Me/Root.tsx
@ -1,17 +1,17 @@
-import React, { useRef, useState } from 'react'
-import { Animated, ScrollView } from 'react-native'
-import { useSelector } from 'react-redux'
-
-import { getLocalUrl } from '@utils/slices/instancesSlice'
-
+import { useScrollToTop } from '@react-navigation/native'
+import Collections from '@screens/Me/Root/Collections'
 import Login from '@screens/Me/Root/Login'
 import MyInfo from '@screens/Me/Root/MyInfo'
-import Collections from '@screens/Me/Root/Collections'
 import Settings from '@screens/Me/Root/Settings'
 import Logout from '@screens/Me/Root/Logout'
-import { useScrollToTop } from '@react-navigation/native'
-import { AccountState } from '../Shared/Account'
-import AccountNav from '../Shared/Account/Nav'
+import AccountNav from '@screens/Shared/Account/Nav'
+import accountReducer from '@screens/Shared/Account/utils/reducer'
+import accountInitialState from '@screens/Shared/Account/utils/initialState'
+import AccountContext from '@screens/Shared/Account/utils/createContext'
+import { getLocalUrl } from '@utils/slices/instancesSlice'
+import React, { useReducer, useRef, useState } from 'react'
+import { Animated, ScrollView } from 'react-native'
+import { useSelector } from 'react-redux'

 const ScreenMeRoot: React.FC = () => {
  const localRegistered = useSelector(getLocalUrl)
@ -19,24 +19,25 @@ const ScreenMeRoot: React.FC = () => {
  const scrollRef = useRef<ScrollView>(null)
  useScrollToTop(scrollRef)

-  const scrollY = useRef(new Animated.Value(0)).current
+  const scrollY = useRef(new Animated.Value(0))
  const [data, setData] = useState<Mastodon.Account>()

+  const [accountState, accountDispatch] = useReducer(
+    accountReducer,
+    accountInitialState
+  )
+
  return (
-    <>
+    <AccountContext.Provider value={{ accountState, accountDispatch }}>
      {localRegistered && data ? (
-        <AccountNav
-          accountState={{ headerRatio: 0.4 } as AccountState}
-          scrollY={scrollY}
-          account={data}
-        />
+        <AccountNav scrollY={scrollY} account={data} />
      ) : null}
      <ScrollView
        ref={scrollRef}
        keyboardShouldPersistTaps='handled'
        bounces={false}
        onScroll={Animated.event(
-          [{ nativeEvent: { contentOffset: { y: scrollY } } }],
+          [{ nativeEvent: { contentOffset: { y: scrollY.current } } }],
          { useNativeDriver: false }
        )}
        scrollEventThrottle={8}
@ -46,7 +47,7 @@ const ScreenMeRoot: React.FC = () => {
        <Settings />
        {localRegistered && <Logout />}
      </ScrollView>
-    </>
+    </AccountContext.Provider>
  )
 }

--- a/src/screens/Me/Root/Collections.tsx
+++ b/src/screens/Me/Root/Collections.tsx
@ -27,32 +27,32 @@ const Collections: React.FC = () => {
  return (
    <MenuContainer>
      <MenuRow
-        iconFront='mail'
-        iconBack='chevron-right'
+        iconFront='Mail'
+        iconBack='ChevronRight'
        title={t('content.collections.conversations')}
        onPress={() => navigation.navigate('Screen-Me-Conversations')}
      />
      <MenuRow
-        iconFront='bookmark'
-        iconBack='chevron-right'
+        iconFront='Bookmark'
+        iconBack='ChevronRight'
        title={t('content.collections.bookmarks')}
        onPress={() => navigation.navigate('Screen-Me-Bookmarks')}
      />
      <MenuRow
-        iconFront='star'
-        iconBack='chevron-right'
+        iconFront='Star'
+        iconBack='ChevronRight'
        title={t('content.collections.favourites')}
        onPress={() => navigation.navigate('Screen-Me-Favourites')}
      />
      <MenuRow
-        iconFront='list'
-        iconBack='chevron-right'
+        iconFront='List'
+        iconBack='ChevronRight'
        title={t('content.collections.lists')}
        onPress={() => navigation.navigate('Screen-Me-Lists')}
      />
      <MenuRow
-        iconFront='clipboard'
-        iconBack='chevron-right'
+        iconFront='Clipboard'
+        iconBack='ChevronRight'
        title={t('content.collections.announcements')}
        content={announcementContent}
        loading={isFetching}
--- a/src/screens/Me/Root/Login.tsx
+++ b/src/screens/Me/Root/Login.tsx
@ -1,8 +1,8 @@
 import analytics from '@components/analytics'
 import Button from '@components/Button'
 import haptics from '@components/haptics'
+import Icon from '@components/Icon'
 import { ParseHTML } from '@components/Parse'
-import { Feather } from '@expo/vector-icons'
 import { useNavigation } from '@react-navigation/native'
 import { applicationFetch } from '@utils/fetches/applicationFetch'
 import { instanceFetch } from '@utils/fetches/instanceFetch'
@ -282,8 +282,8 @@ const Login: React.FC = () => {
            </View>
          </View>
          <Text style={[styles.disclaimer, { color: theme.secondary }]}>
-            <Feather
-              name='lock'
+            <Icon
+              name='Lock'
              size={StyleConstants.Font.Size.M}
              color={theme.secondary}
            />{' '}
--- a/src/screens/Me/Root/MyInfo.tsx
+++ b/src/screens/Me/Root/MyInfo.tsx
@ -1,12 +1,10 @@
-import React, { useEffect } from 'react'
-import { useQuery } from 'react-query'
-
-import { accountFetch } from '@utils/fetches/accountFetch'
 import AccountHeader from '@screens/Shared/Account/Header'
 import AccountInformation from '@screens/Shared/Account/Information'
-import { useSelector } from 'react-redux'
+import { accountFetch } from '@utils/fetches/accountFetch'
 import { getLocalAccountId } from '@utils/slices/instancesSlice'
-import { AccountState } from '@root/screens/Shared/Account'
+import React, { useEffect } from 'react'
+import { useQuery } from 'react-query'
+import { useSelector } from 'react-redux'

 export interface Props {
  setData: React.Dispatch<React.SetStateAction<Mastodon.Account | undefined>>
@ -23,11 +21,7 @@ const MyInfo: React.FC<Props> = ({ setData }) => {

  return (
    <>
-      <AccountHeader
-        accountState={{ headerRatio: 0.4 } as AccountState}
-        account={data}
-        limitHeight
-      />
+      <AccountHeader account={data} limitHeight />
      <AccountInformation account={data} disableActions />
    </>
  )
--- a/src/screens/Me/Root/Settings.tsx
+++ b/src/screens/Me/Root/Settings.tsx
@ -11,8 +11,8 @@ const Settings: React.FC = () => {
  return (
    <MenuContainer>
      <MenuRow
-        iconFront='settings'
-        iconBack='chevron-right'
+        iconFront='Settings'
+        iconBack='ChevronRight'
        title={t('content.settings')}
        onPress={() => navigation.navigate('Screen-Me-Settings')}
      />
--- a/src/screens/Me/Settings.tsx
+++ b/src/screens/Me/Settings.tsx
@ -39,7 +39,7 @@ const ScreenMeSettings: React.FC = () => {
        <MenuRow
          title={t('content.language.heading')}
          content={t(`content.language.options.${settingsLanguage}`)}
-          iconBack='chevron-right'
+          iconBack='ChevronRight'
          onPress={() =>
            ActionSheetIOS.showActionSheetWithOptions(
              {
@ -70,7 +70,7 @@ const ScreenMeSettings: React.FC = () => {
        <MenuRow
          title={t('content.theme.heading')}
          content={t(`content.theme.options.${settingsTheme}`)}
-          iconBack='chevron-right'
+          iconBack='ChevronRight'
          onPress={() =>
            ActionSheetIOS.showActionSheetWithOptions(
              {
@ -106,7 +106,7 @@ const ScreenMeSettings: React.FC = () => {
        <MenuRow
          title={t('content.browser.heading')}
          content={t(`content.browser.options.${settingsBrowser}`)}
-          iconBack='chevron-right'
+          iconBack='ChevronRight'
          onPress={() =>
            ActionSheetIOS.showActionSheetWithOptions(
              {
@ -137,7 +137,7 @@ const ScreenMeSettings: React.FC = () => {
        <MenuRow
          title={t('content.cache.heading')}
          content={cacheSize ? prettyBytes(cacheSize) : '暂无缓存'}
-          iconBack='chevron-right'
+          iconBack='ChevronRight'
          onPress={async () => {
            await CacheManager.clearCache()
            haptics('Success')
@ -154,7 +154,7 @@ const ScreenMeSettings: React.FC = () => {
        />
        <MenuRow
          title={t('content.copyrights.heading')}
-          iconBack='chevron-right'
+          iconBack='ChevronRight'
        />
        <Text style={[styles.version, { color: theme.secondary }]}>
          {t('content.version', { version: '1.0.0' })}
--- a/src/screens/Shared/Account.tsx
+++ b/src/screens/Shared/Account.tsx
@ -1,18 +1,20 @@
+import BottomSheet from '@components/BottomSheet'
+import { HeaderRight } from '@components/Header'
+import HeaderDefaultActionsAccount from '@components/Timelines/Timeline/Shared/HeaderDefault/ActionsAccount'
+import { accountFetch } from '@utils/fetches/accountFetch'
+import { getLocalAccountId } from '@utils/slices/instancesSlice'
 import React, { useEffect, useReducer, useRef, useState } from 'react'
 import { Animated, ScrollView } from 'react-native'
-
 import { useQuery } from 'react-query'
-import { accountFetch } from '@utils/fetches/accountFetch'
-import AccountToots from '@screens/Shared/Account/Toots'
-import AccountHeader from '@screens/Shared/Account/Header'
-import AccountInformation from '@screens/Shared/Account/Information'
+import { useSelector } from 'react-redux'
+import AccountHeader from './Account/Header'
+import AccountInformation from './Account/Information'
 import AccountNav from './Account/Nav'
 import AccountSegmentedControl from './Account/SegmentedControl'
-import { HeaderRight } from '@root/components/Header'
-import BottomSheet from '@root/components/BottomSheet'
-import { useSelector } from 'react-redux'
-import { getLocalAccountId } from '@root/utils/slices/instancesSlice'
-import HeaderDefaultActionsAccount from '@root/components/Timelines/Timeline/Shared/HeaderDefault/ActionsAccount'
+import AccountToots from './Account/Toots'
+import AccountContext from './Account/utils/createContext'
+import accountInitialState from './Account/utils/initialState'
+import accountReducer from './Account/utils/reducer'

 // Moved account example: https://m.cmx.im/web/accounts/27812

@ -25,48 +27,6 @@ export interface Props {
  navigation: any
 }

-export type AccountState = {
-  headerRatio: number
-  informationLayout?: {
-    y: number
-    height: number
-  }
-  segmentedIndex: number
-}
-export type AccountAction =
-  | {
-      type: 'headerRatio'
-      payload: AccountState['headerRatio']
-    }
-  | {
-      type: 'informationLayout'
-      payload: AccountState['informationLayout']
-    }
-  | {
-      type: 'segmentedIndex'
-      payload: AccountState['segmentedIndex']
-    }
-const AccountInitialState: AccountState = {
-  headerRatio: 0.4,
-  informationLayout: { height: 0, y: 100 },
-  segmentedIndex: 0
-}
-const accountReducer = (
-  state: AccountState,
-  action: AccountAction
-): AccountState => {
-  switch (action.type) {
-    case 'headerRatio':
-      return { ...state, headerRatio: action.payload }
-    case 'informationLayout':
-      return { ...state, informationLayout: action.payload }
-    case 'segmentedIndex':
-      return { ...state, segmentedIndex: action.payload }
-    default:
-      throw new Error('Unexpected action')
-  }
-}
-
 const ScreenSharedAccount: React.FC<Props> = ({
  route: {
    params: { account }
@ -76,10 +36,10 @@ const ScreenSharedAccount: React.FC<Props> = ({
  const localAccountId = useSelector(getLocalAccountId)
  const { data } = useQuery(['Account', { id: account.id }], accountFetch)

-  const scrollY = useRef(new Animated.Value(0)).current
+  const scrollY = useRef(new Animated.Value(0))
  const [accountState, accountDispatch] = useReducer(
    accountReducer,
-    AccountInitialState
+    accountInitialState
  )

  const [modalVisible, setBottomSheetVisible] = useState(false)
@ -88,7 +48,7 @@ const ScreenSharedAccount: React.FC<Props> = ({
      navigation.setOptions({
        headerRight: () => (
          <HeaderRight
-            content='more-horizontal'
+            content='MoreHorizontal'
            onPress={() => setBottomSheetVisible(true)}
          />
        )
@ -97,39 +57,23 @@ const ScreenSharedAccount: React.FC<Props> = ({
  }, [])

  return (
-    <>
-      <AccountNav
-        accountState={accountState}
-        scrollY={scrollY}
-        account={data}
-      />
+    <AccountContext.Provider value={{ accountState, accountDispatch }}>
+      <AccountNav scrollY={scrollY} account={data} />
      {accountState.informationLayout?.height &&
      accountState.informationLayout.y ? (
-        <AccountSegmentedControl
-          accountState={accountState}
-          accountDispatch={accountDispatch}
-          scrollY={scrollY}
-        />
+        <AccountSegmentedControl scrollY={scrollY} />
      ) : null}
      <ScrollView
        scrollEventThrottle={16}
        showsVerticalScrollIndicator={false}
        onScroll={Animated.event(
-          [{ nativeEvent: { contentOffset: { y: scrollY } } }],
+          [{ nativeEvent: { contentOffset: { y: scrollY.current } } }],
          { useNativeDriver: false }
        )}
      >
-        <AccountHeader
-          accountState={accountState}
-          accountDispatch={accountDispatch}
-          account={data}
-        />
-        <AccountInformation accountDispatch={accountDispatch} account={data} />
-        <AccountToots
-          accountState={accountState}
-          accountDispatch={accountDispatch}
-          id={account.id}
-        />
+        <AccountHeader account={data} />
+        <AccountInformation account={data} />
+        <AccountToots id={account.id} />
      </ScrollView>

      <BottomSheet
@ -144,7 +88,7 @@ const ScreenSharedAccount: React.FC<Props> = ({
          />
        )}
      </BottomSheet>
-    </>
+    </AccountContext.Provider>
  )
 }

--- a/src/screens/Shared/Account/Header.tsx
+++ b/src/screens/Shared/Account/Header.tsx
@ -1,21 +1,15 @@
 import { useTheme } from '@root/utils/styles/ThemeManager'
-import React, { Dispatch, useEffect, useState } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 import { Dimensions, Image, StyleSheet, View } from 'react-native'
-import { AccountAction, AccountState } from '../Account'
+import AccountContext from './utils/createContext'

 export interface Props {
-  accountState: AccountState
-  accountDispatch?: Dispatch<AccountAction>
  account?: Mastodon.Account
  limitHeight?: boolean
 }

-const AccountHeader: React.FC<Props> = ({
-  accountState,
-  accountDispatch,
-  account,
-  limitHeight = false
-}) => {
+const AccountHeader: React.FC<Props> = ({ account, limitHeight = false }) => {
+  const { accountState, accountDispatch } = useContext(AccountContext)
  const { theme } = useTheme()
  const [ratio, setRatio] = useState(accountState.headerRatio)

@ -70,4 +64,7 @@ const styles = StyleSheet.create({
  }
 })

-export default AccountHeader
+export default React.memo(
+  AccountHeader,
+  (_, next) => next.account === undefined
+)
--- a/src/screens/Shared/Account/Information.tsx
+++ b/src/screens/Shared/Account/Information.tsx
@ -1,5 +1,5 @@
 import { StyleConstants } from '@utils/styles/constants'
-import React, { createRef, Dispatch, useCallback, useEffect } from 'react'
+import React, { createRef, useCallback, useContext, useEffect } from 'react'
 import { Animated, StyleSheet, View } from 'react-native'
 import AccountInformationAvatar from './Information/Avatar'
 import AccountInformationName from './Information/Name'
@ -9,19 +9,18 @@ import AccountInformationStats from './Information/Stats'
 import AccountInformationActions from './Information/Actions'
 import AccountInformationFields from './Information/Fields'
 import AccountInformationNotes from './Information/Notes'
-import { AccountAction } from '../Account'
+import AccountContext from './utils/createContext'

 export interface Props {
-  accountDispatch?: Dispatch<AccountAction>
  account: Mastodon.Account | undefined
  disableActions?: boolean
 }

 const AccountInformation: React.FC<Props> = ({
-  accountDispatch,
  account,
  disableActions = false
 }) => {
+  const { accountDispatch } = useContext(AccountContext)
  const shimmerAvatarRef = createRef<any>()
  const shimmerNameRef = createRef<any>()
  const shimmerAccountRef = createRef<any>()
@ -98,4 +97,7 @@ const styles = StyleSheet.create({
  }
 })

-export default AccountInformation
+export default React.memo(
+  AccountInformation,
+  (_, next) => next.account === undefined
+)
--- a/src/screens/Shared/Account/Information/Account.tsx
+++ b/src/screens/Shared/Account/Information/Account.tsx
@ -1,6 +1,6 @@
-import { Feather } from '@expo/vector-icons'
-import { StyleConstants } from '@root/utils/styles/constants'
-import { useTheme } from '@root/utils/styles/ThemeManager'
+import Icon from '@components/Icon'
+import { StyleConstants } from '@utils/styles/constants'
+import { useTheme } from '@utils/styles/ThemeManager'
 import { LinearGradient } from 'expo-linear-gradient'
 import React, { forwardRef } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
@ -38,13 +38,19 @@ const AccountInformationAccount = forwardRef<ShimmerPlaceholder, Props>(
            @{account?.acct}
          </Text>
          {account?.locked ? (
-            <Feather name='lock' style={styles.type} color={theme.secondary} />
-          ) : null}
-          {account?.bot ? (
-            <Feather
-              name='hard-drive'
+            <Icon
+              name='Lock'
              style={styles.type}
              color={theme.secondary}
+              size={StyleConstants.Font.Size.M}
+            />
+          ) : null}
+          {account?.bot ? (
+            <Icon
+              name='HardDrive'
+              style={styles.type}
+              color={theme.secondary}
+              size={StyleConstants.Font.Size.M}
            />
          ) : null}
        </View>
--- a/src/screens/Shared/Account/Information/Actions.tsx
+++ b/src/screens/Shared/Account/Information/Actions.tsx
@ -131,7 +131,7 @@ const AccountInformationActions: React.FC<Props> = ({ account }) => {
      {query.data && !query.data.blocked_by ? (
        <Button
          type='icon'
-          content='mail'
+          content='Mail'
          round
          onPress={() =>
            navigation.navigate('Screen-Shared-Compose', {
--- a/src/screens/Shared/Account/Information/Created.tsx
+++ b/src/screens/Shared/Account/Information/Created.tsx
@ -1,6 +1,6 @@
-import { Feather } from '@expo/vector-icons'
-import { StyleConstants } from '@root/utils/styles/constants'
-import { useTheme } from '@root/utils/styles/ThemeManager'
+import Icon from '@components/Icon'
+import { StyleConstants } from '@utils/styles/constants'
+import { useTheme } from '@utils/styles/ThemeManager'
 import { LinearGradient } from 'expo-linear-gradient'
 import React, { forwardRef } from 'react'
 import { useTranslation } from 'react-i18next'
@ -29,8 +29,8 @@ const AccountInformationCreated = forwardRef<ShimmerPlaceholder, Props>(
        shimmerColors={theme.shimmer}
      >
        <View style={styles.created}>
-          <Feather
-            name='calendar'
+          <Icon
+            name='Calendar'
            size={StyleConstants.Font.Size.S}
            color={theme.secondary}
            style={styles.icon}
--- a/src/screens/Shared/Account/Information/Fields.tsx
+++ b/src/screens/Shared/Account/Information/Fields.tsx
@ -1,5 +1,5 @@
+import Icon from '@components/Icon'
 import { ParseHTML } from '@components/Parse'
-import { Feather } from '@expo/vector-icons'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React from 'react'
@ -27,8 +27,8 @@ const AccountInformationFields: React.FC<Props> = ({ account }) => {
              showFullLink
            />
            {field.verified_at ? (
-              <Feather
-                name='check-circle'
+              <Icon
+                name='CheckCircle'
                size={StyleConstants.Font.Size.M}
                color={theme.primary}
                style={styles.fieldCheck}
--- a/src/screens/Shared/Account/Nav.tsx
+++ b/src/screens/Shared/Account/Nav.tsx
@ -1,18 +1,18 @@
 import { ParseEmojis } from '@components/Parse'
-import { AccountState } from '@screens/Shared/Account'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React from 'react'
+import React, { MutableRefObject, useContext } from 'react'
 import { Animated, Dimensions, StyleSheet, Text, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import AccountContext from './utils/createContext'

 export interface Props {
-  accountState: AccountState
-  scrollY: Animated.Value
+  scrollY: MutableRefObject<Animated.Value>
  account: Mastodon.Account | undefined
 }

-const AccountNav: React.FC<Props> = ({ accountState, scrollY, account }) => {
+const AccountNav: React.FC<Props> = ({ scrollY, account }) => {
+  const { accountState } = useContext(AccountContext)
  const { theme } = useTheme()
  const headerHeight = useSafeAreaInsets().top + 44

@ -29,7 +29,7 @@ const AccountNav: React.FC<Props> = ({ accountState, scrollY, account }) => {
        styles.base,
        {
          backgroundColor: theme.background,
-          opacity: scrollY.interpolate({
+          opacity: scrollY.current.interpolate({
            inputRange: [0, 200],
            outputRange: [0, 1],
            extrapolate: 'clamp'
@ -51,7 +51,7 @@ const AccountNav: React.FC<Props> = ({ accountState, scrollY, account }) => {
          style={[
            styles.display_name,
            {
-              marginTop: scrollY.interpolate({
+              marginTop: scrollY.current.interpolate({
                inputRange: [nameY, nameY + 20],
                outputRange: [50, 0],
                extrapolate: 'clamp'
@ -89,4 +89,4 @@ const styles = StyleSheet.create({
  }
 })

-export default AccountNav
+export default React.memo(AccountNav, (_, next) => next.account === undefined)
--- a/src/screens/Shared/Account/SegmentedControl.tsx
+++ b/src/screens/Shared/Account/SegmentedControl.tsx
@ -1,28 +1,23 @@
 import SegmentedControl from '@react-native-community/segmented-control'
 import { StyleConstants } from '@root/utils/styles/constants'
 import { useTheme } from '@root/utils/styles/ThemeManager'
-import React, { Dispatch } from 'react'
+import React, { MutableRefObject, useContext } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Animated, StyleSheet } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import { AccountAction, AccountState } from '../Account'
+import AccountContext from './utils/createContext'

 export interface Props {
-  accountState: AccountState
-  accountDispatch: Dispatch<AccountAction>
-  scrollY: Animated.Value
+  scrollY: MutableRefObject<Animated.Value>
 }

-const AccountSegmentedControl: React.FC<Props> = ({
-  accountState,
-  accountDispatch,
-  scrollY
-}) => {
+const AccountSegmentedControl: React.FC<Props> = ({ scrollY }) => {
+  const { accountState, accountDispatch } = useContext(AccountContext)
  const { t } = useTranslation('sharedAccount')
  const { mode, theme } = useTheme()

  const headerHeight = useSafeAreaInsets().top + 44
-  const translateY = scrollY.interpolate({
+  const translateY = scrollY.current.interpolate({
    inputRange: [
      0,
      (accountState.informationLayout?.y || 0) +
@ -82,4 +77,4 @@ const styles = StyleSheet.create({
  }
 })

-export default AccountSegmentedControl
+export default React.memo(AccountSegmentedControl, () => true)
--- a/src/screens/Shared/Account/Toots.tsx
+++ b/src/screens/Shared/Account/Toots.tsx
@ -1,24 +1,18 @@
-import React, { Dispatch, useCallback } from 'react'
-import { Dimensions, StyleSheet } from 'react-native'
-import { TabView } from 'react-native-tab-view'
-
 import Timeline from '@components/Timelines/Timeline'
-import { AccountAction, AccountState } from '../Account'
-import { StyleConstants } from '@root/utils/styles/constants'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs'
+import { StyleConstants } from '@utils/styles/constants'
+import React, { useContext } from 'react'
+import { Dimensions, StyleSheet } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { TabView } from 'react-native-tab-view'
+import AccountContext from './utils/createContext'

 export interface Props {
-  accountState: AccountState
-  accountDispatch: Dispatch<AccountAction>
  id: Mastodon.Account['id']
 }

-const AccountToots: React.FC<Props> = ({
-  accountState,
-  accountDispatch,
-  id
-}) => {
+const AccountToots: React.FC<Props> = ({ id }) => {
+  const { accountState, accountDispatch } = useContext(AccountContext)
  const headerHeight = useSafeAreaInsets().top + 44
  const footerHeight = useSafeAreaInsets().bottom + useBottomTabBarHeight()

@ -28,18 +22,15 @@ const AccountToots: React.FC<Props> = ({
    { key: 'Account_Media' }
  ]

-  const renderScene = useCallback(
-    ({
-      route
-    }: {
-      route: {
-        key: App.Pages
-      }
-    }) => {
-      return <Timeline page={route.key} account={id} disableRefresh />
-    },
-    []
-  )
+  const renderScene = ({
+    route
+  }: {
+    route: {
+      key: App.Pages
+    }
+  }) => {
+    return <Timeline page={route.key} account={id} disableRefresh />
+  }

  return (
    <TabView
--- a/src/screens/Shared/Account/utils/createContext.ts
+++ b/src/screens/Shared/Account/utils/createContext.ts
@ -0,0 +1,10 @@
+import { createContext, Dispatch } from 'react'
+import { AccountAction, AccountState } from './types'
+
+type ContextType = {
+  accountState: AccountState
+  accountDispatch: Dispatch<AccountAction>
+}
+const AccountContext = createContext<ContextType>({} as ContextType)
+
+export default AccountContext
--- a/src/screens/Shared/Account/utils/initialState.ts
+++ b/src/screens/Shared/Account/utils/initialState.ts
@ -0,0 +1,9 @@
+import { AccountState } from "./types"
+
+const accountInitialState: AccountState = {
+  headerRatio: 0.4,
+  informationLayout: { height: 0, y: 100 },
+  segmentedIndex: 0
+}
+
+export default accountInitialState
--- a/src/screens/Shared/Account/utils/reducer.ts
+++ b/src/screens/Shared/Account/utils/reducer.ts
@ -0,0 +1,19 @@
+import { AccountAction, AccountState } from "./types"
+
+const accountReducer = (
+  state: AccountState,
+  action: AccountAction
+): AccountState => {
+  switch (action.type) {
+    case 'headerRatio':
+      return { ...state, headerRatio: action.payload }
+    case 'informationLayout':
+      return { ...state, informationLayout: action.payload }
+    case 'segmentedIndex':
+      return { ...state, segmentedIndex: action.payload }
+    default:
+      throw new Error('Unexpected action')
+  }
+}
+
+export default accountReducer
--- a/src/screens/Shared/Account/utils/types.d.ts
+++ b/src/screens/Shared/Account/utils/types.d.ts
@ -0,0 +1,22 @@
+export type AccountState = {
+  headerRatio: number
+  informationLayout?: {
+    y: number
+    height: number
+  }
+  segmentedIndex: number
+}
+
+export type AccountAction =
+  | {
+      type: 'headerRatio'
+      payload: AccountState['headerRatio']
+    }
+  | {
+      type: 'informationLayout'
+      payload: AccountState['informationLayout']
+    }
+  | {
+      type: 'segmentedIndex'
+      payload: AccountState['segmentedIndex']
+    }
--- a/src/screens/Shared/Announcements.tsx
+++ b/src/screens/Shared/Announcements.tsx
@ -157,8 +157,8 @@ const ScreenSharedAnnouncements: React.FC = ({
                style={[styles.reaction, { borderColor: theme.primary }]}
                onPress={() => invisibleTextInputRef.current?.focus()}
              >
-                <Feather
-                  name='plus'
+                <Icon
+                  name='Plus'
                  size={StyleConstants.Font.Size.M}
                  color={theme.primary}
                />
--- a/src/screens/Shared/Compose/Actions.tsx
+++ b/src/screens/Shared/Compose/Actions.tsx
@ -1,9 +1,9 @@
-import { Feather } from '@expo/vector-icons'
+import Icon from '@components/Icon'
 import { StyleConstants } from '@utils/styles/constants'
 import layoutAnimation from '@utils/styles/layoutAnimation'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useCallback, useContext, useMemo } from 'react'
-import { ActionSheetIOS, StyleSheet, View } from 'react-native'
+import { ActionSheetIOS, Pressable, StyleSheet, View } from 'react-native'
 import addAttachment from './/addAttachment'
 import ComposeContext from './utils/createContext'

@ -53,13 +53,13 @@ const ComposeActions: React.FC = () => {
  const visibilityIcon = useMemo(() => {
    switch (composeState.visibility) {
      case 'public':
-        return 'globe'
+        return 'Globe'
      case 'unlisted':
-        return 'unlock'
+        return 'Unlock'
      case 'private':
-        return 'lock'
+        return 'Lock'
      case 'direct':
-        return 'mail'
+        return 'Mail'
    }
  }, [composeState.visibility])
  const visibilityOnPress = useCallback(() => {
@ -134,35 +134,41 @@ const ComposeActions: React.FC = () => {
        { backgroundColor: theme.background, borderTopColor: theme.border }
      ]}
    >
-      <Feather
-        name='aperture'
-        size={24}
-        color={attachmentColor}
+      <Pressable
        onPress={attachmentOnPress}
+        children={<Icon name='Aperture' size={24} color={attachmentColor} />}
      />
-      <Feather
-        name='bar-chart-2'
-        size={24}
-        color={pollColor}
+      <Pressable
        onPress={pollOnPress}
+        children={<Icon name='BarChart2' size={24} color={pollColor} />}
      />
-      <Feather
-        name={visibilityIcon}
-        size={24}
-        color={composeState.visibilityLock ? theme.disabled : theme.secondary}
+      <Pressable
        onPress={visibilityOnPress}
+        children={
+          <Icon
+            name={visibilityIcon}
+            size={24}
+            color={
+              composeState.visibilityLock ? theme.disabled : theme.secondary
+            }
+          />
+        }
      />
-      <Feather
-        name='alert-triangle'
-        size={24}
-        color={composeState.spoiler.active ? theme.primary : theme.secondary}
+      <Pressable
        onPress={spoilerOnPress}
+        children={
+          <Icon
+            name='AlertTriangle'
+            size={24}
+            color={
+              composeState.spoiler.active ? theme.primary : theme.secondary
+            }
+          />
+        }
      />
-      <Feather
-        name='smile'
-        size={24}
-        color={emojiColor}
+      <Pressable
        onPress={emojiOnPress}
+        children={<Icon name='Smile' size={24} color={emojiColor} />}
      />
    </View>
  )
--- a/src/screens/Shared/Compose/Attachments.tsx
+++ b/src/screens/Shared/Compose/Attachments.tsx
@ -1,6 +1,6 @@
-import { Feather } from '@expo/vector-icons'
 import Button from '@components/Button'
 import haptics from '@components/haptics'
+import Icon from '@components/Icon'
 import { useNavigation } from '@react-navigation/native'
 import { StyleConstants } from '@utils/styles/constants'
 import layoutAnimation from '@utils/styles/layoutAnimation'
@ -149,7 +149,7 @@ const ComposeAttachments: React.FC = () => {
            <>
              <Button
                type='icon'
-                content='x'
+                content='X'
                spacing='M'
                round
                overlay
@ -165,7 +165,7 @@ const ComposeAttachments: React.FC = () => {
              />
              <Button
                type='icon'
-                content='edit'
+                content='Edit'
                spacing='M'
                round
                overlay
@ -198,7 +198,7 @@ const ComposeAttachments: React.FC = () => {
      >
        <Button
          type='icon'
-          content='upload-cloud'
+          content='UploadCloud'
          spacing='M'
          round
          overlay
@ -224,8 +224,8 @@ const ComposeAttachments: React.FC = () => {
  return (
    <View style={styles.base}>
      <Pressable style={styles.sensitive} onPress={sensitiveOnPress}>
-        <Feather
-          name={composeState.attachments.sensitive ? 'check-circle' : 'circle'}
+        <Icon
+          name={composeState.attachments.sensitive ? 'CheckCircle' : 'Circle'}
          size={StyleConstants.Font.Size.L}
          color={theme.primary}
        />
--- a/src/screens/Shared/Compose/Poll.tsx
+++ b/src/screens/Shared/Compose/Poll.tsx
@ -1,6 +1,6 @@
 import Button from '@components/Button'
+import Icon from '@components/Icon'
 import { MenuRow } from '@components/Menu'
-import { Feather } from '@expo/vector-icons'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useContext, useEffect, useState } from 'react'
@ -47,8 +47,8 @@ const ComposePoll: React.FC = () => {
          })
          return (
            <View key={i} style={styles.option}>
-              <Feather
-                name={multiple ? 'square' : 'circle'}
+              <Icon
+                name={multiple ? 'Square' : 'Circle'}
                size={StyleConstants.Font.Size.L}
                color={theme.secondary}
              />
@ -88,7 +88,7 @@ const ComposePoll: React.FC = () => {
                })
            }}
            type='icon'
-            content='minus'
+            content='Minus'
            round
            disabled={!(total > 2)}
          />
@ -102,7 +102,7 @@ const ComposePoll: React.FC = () => {
              })
          }}
          type='icon'
-          content='plus'
+          content='Plus'
          round
          disabled={!(total < 4)}
        />
@ -124,7 +124,7 @@ const ComposePoll: React.FC = () => {
              })
          )
        }
-        iconBack='chevron-right'
+        iconBack='ChevronRight'
      />
      <MenuRow
        title='有效期'
@ -143,7 +143,7 @@ const ComposePoll: React.FC = () => {
              })
          )
        }
-        iconBack='chevron-right'
+        iconBack='ChevronRight'
      />
    </View>
  )
--- a/src/screens/Shared/ImagesViewer.tsx
+++ b/src/screens/Shared/ImagesViewer.tsx
@ -94,7 +94,7 @@ const ScreenSharedImagesViewer: React.FC<Props> = ({
          contentStyle: { backgroundColor: 'black' },
          headerStyle: { backgroundColor: 'black' },
          headerLeft: () => (
-            <HeaderLeft content='x' onPress={() => navigation.goBack()} />
+            <HeaderLeft content='X' onPress={() => navigation.goBack()} />
          ),
          headerCenter: () => (
            <Text style={styles.headerCenter}>
@ -103,7 +103,7 @@ const ScreenSharedImagesViewer: React.FC<Props> = ({
          ),
          headerRight: () => (
            <HeaderRight
-              content='share'
+              content='Share'
              onPress={() =>
                ActionSheetIOS.showShareActionSheetWithOptions(
                  {
--- a/src/screens/Shared/Search.tsx
+++ b/src/screens/Shared/Search.tsx
@ -1,6 +1,6 @@
 import { HeaderRight } from '@components/Header'
+import Icon from '@components/Icon'
 import { ParseEmojis, ParseHTML } from '@components/Parse'
-import { Feather } from '@expo/vector-icons'
 import { useNavigation } from '@react-navigation/native'
 import { searchFetch } from '@utils/fetches/searchFetch'
 import { StyleConstants } from '@utils/styles/constants'
@ -262,8 +262,8 @@ const ScreenSharedSearch: React.FC = () => {
          <View
            style={[styles.searchField, { borderBottomColor: theme.secondary }]}
          >
-            <Feather
-              name='search'
+            <Icon
+              name='Search'
              color={theme.primary}
              size={StyleConstants.Font.Size.M}
              style={styles.searchIcon}
--- a/src/screens/Shared/Toot.tsx
+++ b/src/screens/Shared/Toot.tsx
@ -15,7 +15,7 @@ const ScreenSharedToot: React.FC<Props> = ({
    params: { toot }
  }
 }) => {
-  return <Timeline page='Toot' toot={toot} disableRefresh disableInfinity />
+  return <Timeline page='Toot' toot={toot.id} disableRefresh disableInfinity />
 }

 export default ScreenSharedToot
--- a/src/utils/fetches/timelineFetch.ts
+++ b/src/utils/fetches/timelineFetch.ts
@ -194,10 +194,16 @@ export const timelineFetch = async ({
      res = await client({
        method: 'get',
        instance: 'local',
-        url: `statuses/${toot!.id}/context`
+        url: `statuses/${toot}`
+      })
+      const theToot = res.body
+      res = await client({
+        method: 'get',
+        instance: 'local',
+        url: `statuses/${toot}/context`
      })
      return Promise.resolve({
-        toots: [...res.body.ancestors, toot, ...res.body.descendants],
+        toots: [...res.body.ancestors, theToot, ...res.body.descendants],
        pointer: res.body.ancestors.length
      })
    default:
--- a/tsconfig.json
+++ b/tsconfig.json
@ -12,11 +12,11 @@
    "baseUrl": "./",
    "paths": {
      // "@assets/*": ["./assets/*"],
-      "@root/*": ["./src/*"],
      "@api/*": ["./src/api/*"],
      "@components/*": ["./src/components/*"],
      "@screens/*": ["./src/screens/*"],
-      "@utils/*": ["./src/utils/*"]
+      "@utils/*": ["./src/utils/*"],
+      "@root/*": ["./src/*"],
    }
  },
  "exclude": ["node_modules"]
--- a/yarn.lock
+++ b/yarn.lock
@ -8119,6 +8119,11 @@ react-native-expo-image-cache@^4.1.0:
    crypto-js "^3.1.9-1"
    lodash "^4.17.4"

+react-native-feather@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/react-native-feather/-/react-native-feather-1.0.2.tgz#9b02a32f313088084da5ebb0130659fa582edf43"
+  integrity sha512-SxMCMyGQeDtZtl2mhssoFTsfFKh/eH6S11+720BPGYYXz1iaYwQ4G/xqFxWOvQOQK2qtOTvkFOBlabbKwBMuhQ==
+
 react-native-gesture-handler@~1.8.0:
  version "1.8.0"
  resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.8.0.tgz#18f61f51da50320f938957b0ee79bc58f47449dc"