Use svg icons instead of expo ones

Possibility to control `strokeWidth`

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 {

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",

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']
     }
   ]

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'

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} />
       }
     }),
     []

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
+            <Icon
-              name={content as any}
+              name={content}
-              size={StyleConstants.Font.Size[size] * (size === 'L' ? 1.25 : 1)}
               color={colorContent}
+              strokeWidth={strokeWidth}
               style={{ opacity: loading ? 0 : 1 }}
-              testID='icon'
+              size={StyleConstants.Font.Size[size] * (size === 'L' ? 1.25 : 1)}
             />
             {loading && loadingSpinkit}
           </>

src/components/Header/Left.tsx

@@ -1,8 +1,8 @@
-import React, { useMemo } from 'react'
+import Icon from '@components/Icon'
-import { Pressable, StyleSheet, Text } from 'react-native'
-import { Feather } from '@expo/vector-icons'
 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
+          <Icon
-            name={content || ('chevron-left' as any)}
             color={theme.primary}
+            name={content || 'ChevronLeft'}
             size={StyleConstants.Spacing.M * 1.25}
           />
         )

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
+            <Icon
-              name={content as any}
+              name={content}
-              color={disabled ? theme.secondary : theme.primary}
-              size={StyleConstants.Spacing.M * 1.25}
               style={{ opacity: loading ? 0 : 1 }}
+              size={StyleConstants.Spacing.M * 1.25}
+              color={disabled ? theme.secondary : theme.primary}
             />
             {loading && loadingSpinkit}
           </>

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

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]}

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
+            <Icon
-              name='external-link'
+              inline
-              size={StyleConstants.Font.Size[size]}
               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(
+      const [allowExpand, setAllowExpand] = useState(false)
-        numberOfLines === 0 ? true : undefined
-      )
       const [showAllText, setShowAllText] = useState(false)
 
       const calNumberOfLines = useMemo(() => {
-        if (heightOriginal) {
+        if (numberOfLines === 0) {
-          if (!heightTruncated) {
+          // For spoilers without calculation
-            return numberOfLines
+          return showAllText ? undefined : 1
-          } else {
+        } else {
-            if (allowExpand && !showAllText) {
+          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) {
+          if (numberOfLines === 0) {
-            setHeightOriginal(nativeEvent.layout.height)
+            // For spoilers without calculation
+            setAllowExpand(true)
           } else {
-            if (!heightTruncated) {
+            if (!heightOriginal) {
-              setHeightTruncated(nativeEvent.layout.height)
+              setHeightOriginal(nativeEvent.layout.height)
             } else {
-              if (heightOriginal > heightTruncated) {
+              if (!heightTruncated) {
-                setAllowExpand(true)
+                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

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} />
             )
           })
         }}

src/components/Timelines/Timeline.tsx

@@ -24,10 +24,10 @@ export type TimelineData =
 
 export interface Props {
   page: App.Pages
-  hashtag?: string
+  hashtag?: Mastodon.Tag['name']
-  list?: string
+  list?: Mastodon.List['id']
-  toot?: Mastodon.Status
+  toot?: Mastodon.Status['id']
-  account?: string
+  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 })}
       />
     ),
     []

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

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
+            <Icon
-              name='frown'
+              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
+            <Icon
-              name='smartphone'
+              name='Smartphone'
               size={StyleConstants.Font.Size.L}
               color={theme.primary}
             />

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
+            <Icon
-              name='anchor'
+              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
+            <Icon
-              name='heart'
+              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
+            <Icon
-              name='user-plus'
+              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
+            <Icon
-              name='bar-chart-2'
+              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
+            <Icon
-              name='repeat'
+              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
   }
 })
 

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
+        <Icon
-          name='message-circle'
+          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
+      <Icon
-        name='repeat'
+        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
+      <Icon
-        name='heart'
+        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
+      <Icon
-        name='bookmark'
+        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
+      <Icon
-        name='share-2'
+        name='Share2'
         color={iconColor}
         size={StyleConstants.Font.Size.M + 2}
       />

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}

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

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

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
+              <Icon
-                name='coffee'
+                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,
+    ...StyleConstants.FontStyle.S
-    marginLeft: StyleConstants.Spacing.S
   }
 })
 

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
+      <Icon
-        name='trash'
+        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>

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
+      <Icon
-        name='more-horizontal'
+        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',
+    flexDirection: 'row'
-    alignItems: 'baseline'
   },
   accountAndMeta: {
     flex: 4

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',
           {

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
         })}

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(

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'
+                    ? 'Loader'
-                    : 'user-plus'
+                    : 'UserPlus'
                   : data!.following
-                  ? 'user-check'
+                  ? 'UserCheck'
                   : data!.requested
-                  ? 'loader'
+                  ? 'Loader'
-                  : 'user-plus'
+                  : 'UserPlus'
               }
               color={
                 updateData

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
+    <Icon
-      name='lock'
+      name='Lock'
       size={StyleConstants.Font.Size.S}
       color={theme.secondary}
       style={styles.visibility}

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'}`
+        ? `Check${poll.multiple ? 'Square' : 'Circle'}`
-        : `${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.own_votes?.includes(index) ? 'Check' : ''}${
-                poll.multiple ? 'square' : 'circle'
+                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}

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',
+    success: 'CheckCircle',
-    error: 'x-circle',
+    error: 'XCircle',
-    warning: 'alert-circle'
+    warning: 'AlertCircle'
   }
   enum colorMapping {
     success = 'blue',
@@ -67,11 +67,10 @@ const ToastBase = ({ config }: { config: Config }) => {
       ]}
     >
       <View style={styles.container}>
-        <Feather
+        <Icon
-          // @ts-ignore
           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
   }
 })
 

src/i18n/zh/components/timeline.ts

@@ -57,16 +57,16 @@ export default {
           account: {
             heading: '关于用户',
             mute: {
-              function: '隐藏 {{acct}} 的嘟文',
+              function: '隐藏 @{{acct}} 的嘟文',
-              button: '隐藏 {{acct}} 的嘟文'
+              button: '隐藏 @{{acct}} 的嘟文'
             },
             block: {
-              function: '屏蔽 {{acct}}',
+              function: '屏蔽 @{{acct}}',
-              button: '屏蔽 {{acct}}'
+              button: '屏蔽 @{{acct}}'
             },
             report: {
-              function: '举报 {{acct}}',
+              function: '举报 @{{acct}}',
-              button: '举报 {{acct}}'
+              button: '举报 @{{acct}}'
             }
           },
           domain: {

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', {

src/screens/Me/Root.tsx

@@ -1,17 +1,17 @@
-import React, { useRef, useState } from 'react'
+import { useScrollToTop } from '@react-navigation/native'
-import { Animated, ScrollView } from 'react-native'
+import Collections from '@screens/Me/Root/Collections'
-import { useSelector } from 'react-redux'
-
-import { getLocalUrl } from '@utils/slices/instancesSlice'
-
 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 AccountNav from '@screens/Shared/Account/Nav'
-import { AccountState } from '../Shared/Account'
+import accountReducer from '@screens/Shared/Account/utils/reducer'
-import AccountNav from '../Shared/Account/Nav'
+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
+        <AccountNav scrollY={scrollY} account={data} />
-          accountState={{ headerRatio: 0.4 } as AccountState}
-          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>
   )
 }
 

src/screens/Me/Root/Collections.tsx

@@ -27,32 +27,32 @@ const Collections: React.FC = () => {
   return (
     <MenuContainer>
       <MenuRow
-        iconFront='mail'
+        iconFront='Mail'
-        iconBack='chevron-right'
+        iconBack='ChevronRight'
         title={t('content.collections.conversations')}
         onPress={() => navigation.navigate('Screen-Me-Conversations')}
       />
       <MenuRow
-        iconFront='bookmark'
+        iconFront='Bookmark'
-        iconBack='chevron-right'
+        iconBack='ChevronRight'
         title={t('content.collections.bookmarks')}
         onPress={() => navigation.navigate('Screen-Me-Bookmarks')}
       />
       <MenuRow
-        iconFront='star'
+        iconFront='Star'
-        iconBack='chevron-right'
+        iconBack='ChevronRight'
         title={t('content.collections.favourites')}
         onPress={() => navigation.navigate('Screen-Me-Favourites')}
       />
       <MenuRow
-        iconFront='list'
+        iconFront='List'
-        iconBack='chevron-right'
+        iconBack='ChevronRight'
         title={t('content.collections.lists')}
         onPress={() => navigation.navigate('Screen-Me-Lists')}
       />
       <MenuRow
-        iconFront='clipboard'
+        iconFront='Clipboard'
-        iconBack='chevron-right'
+        iconBack='ChevronRight'
         title={t('content.collections.announcements')}
         content={announcementContent}
         loading={isFetching}

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
+            <Icon
-              name='lock'
+              name='Lock'
               size={StyleConstants.Font.Size.M}
               color={theme.secondary}
             />{' '}

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
+      <AccountHeader account={data} limitHeight />
-        accountState={{ headerRatio: 0.4 } as AccountState}
-        account={data}
-        limitHeight
-      />
       <AccountInformation account={data} disableActions />
     </>
   )

src/screens/Me/Root/Settings.tsx

@@ -11,8 +11,8 @@ const Settings: React.FC = () => {
   return (
     <MenuContainer>
       <MenuRow
-        iconFront='settings'
+        iconFront='Settings'
-        iconBack='chevron-right'
+        iconBack='ChevronRight'
         title={t('content.settings')}
         onPress={() => navigation.navigate('Screen-Me-Settings')}
       />

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' })}

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 { useSelector } from 'react-redux'
-import AccountToots from '@screens/Shared/Account/Toots'
+import AccountHeader from './Account/Header'
-import AccountHeader from '@screens/Shared/Account/Header'
+import AccountInformation from './Account/Information'
-import AccountInformation from '@screens/Shared/Account/Information'
 import AccountNav from './Account/Nav'
 import AccountSegmentedControl from './Account/SegmentedControl'
-import { HeaderRight } from '@root/components/Header'
+import AccountToots from './Account/Toots'
-import BottomSheet from '@root/components/BottomSheet'
+import AccountContext from './Account/utils/createContext'
-import { useSelector } from 'react-redux'
+import accountInitialState from './Account/utils/initialState'
-import { getLocalAccountId } from '@root/utils/slices/instancesSlice'
+import accountReducer from './Account/utils/reducer'
-import HeaderDefaultActionsAccount from '@root/components/Timelines/Timeline/Shared/HeaderDefault/ActionsAccount'
 
 // 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 (
-    <>
+    <AccountContext.Provider value={{ accountState, accountDispatch }}>
-      <AccountNav
+      <AccountNav scrollY={scrollY} account={data} />
-        accountState={accountState}
-        scrollY={scrollY}
-        account={data}
-      />
       {accountState.informationLayout?.height &&
       accountState.informationLayout.y ? (
-        <AccountSegmentedControl
+        <AccountSegmentedControl scrollY={scrollY} />
-          accountState={accountState}
-          accountDispatch={accountDispatch}
-          scrollY={scrollY}
-        />
       ) : null}
       <ScrollView
         scrollEventThrottle={16}
         showsVerticalScrollIndicator={false}
         onScroll={Animated.event(
-          [{ nativeEvent: { contentOffset: { y: scrollY } } }],
+          [{ nativeEvent: { contentOffset: { y: scrollY.current } } }],
           { useNativeDriver: false }
         )}
       >
-        <AccountHeader
+        <AccountHeader account={data} />
-          accountState={accountState}
+        <AccountInformation account={data} />
-          accountDispatch={accountDispatch}
+        <AccountToots id={account.id} />
-          account={data}
-        />
-        <AccountInformation accountDispatch={accountDispatch} account={data} />
-        <AccountToots
-          accountState={accountState}
-          accountDispatch={accountDispatch}
-          id={account.id}
-        />
       </ScrollView>
 
       <BottomSheet
@@ -144,7 +88,7 @@ const ScreenSharedAccount: React.FC<Props> = ({
           />
         )}
       </BottomSheet>
-    </>
+    </AccountContext.Provider>
   )
 }
 

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> = ({
+const AccountHeader: React.FC<Props> = ({ account, limitHeight = false }) => {
-  accountState,
+  const { accountState, accountDispatch } = useContext(AccountContext)
-  accountDispatch,
-  account,
-  limitHeight = false
-}) => {
   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
+)

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
+)

src/screens/Shared/Account/Information/Account.tsx

@@ -1,6 +1,6 @@
-import { Feather } from '@expo/vector-icons'
+import Icon from '@components/Icon'
-import { StyleConstants } from '@root/utils/styles/constants'
+import { StyleConstants } from '@utils/styles/constants'
-import { useTheme } from '@root/utils/styles/ThemeManager'
+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} />
+            <Icon
-          ) : null}
+              name='Lock'
-          {account?.bot ? (
-            <Feather
-              name='hard-drive'
               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>

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', {

src/screens/Shared/Account/Information/Created.tsx

@@ -1,6 +1,6 @@
-import { Feather } from '@expo/vector-icons'
+import Icon from '@components/Icon'
-import { StyleConstants } from '@root/utils/styles/constants'
+import { StyleConstants } from '@utils/styles/constants'
-import { useTheme } from '@root/utils/styles/ThemeManager'
+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
+          <Icon
-            name='calendar'
+            name='Calendar'
             size={StyleConstants.Font.Size.S}
             color={theme.secondary}
             style={styles.icon}

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
+              <Icon
-                name='check-circle'
+                name='CheckCircle'
                 size={StyleConstants.Font.Size.M}
                 color={theme.primary}
                 style={styles.fieldCheck}

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: MutableRefObject<Animated.Value>
-  scrollY: 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)

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
+  scrollY: MutableRefObject<Animated.Value>
-  accountDispatch: Dispatch<AccountAction>
-  scrollY: Animated.Value
 }
 
-const AccountSegmentedControl: React.FC<Props> = ({
+const AccountSegmentedControl: React.FC<Props> = ({ scrollY }) => {
-  accountState,
+  const { accountState, accountDispatch } = useContext(AccountContext)
-  accountDispatch,
-  scrollY
-}) => {
   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)

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> = ({
+const AccountToots: React.FC<Props> = ({ id }) => {
-  accountState,
+  const { accountState, accountDispatch } = useContext(AccountContext)
-  accountDispatch,
-  id
-}) => {
   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(
+  const renderScene = ({
-    ({
+    route
-      route
+  }: {
-    }: {
+    route: {
-      route: {
+      key: App.Pages
-        key: App.Pages
+    }
-      }
+  }) => {
-    }) => {
+    return <Timeline page={route.key} account={id} disableRefresh />
-      return <Timeline page={route.key} account={id} disableRefresh />
+  }
-    },
-    []
-  )
 
   return (
     <TabView

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

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

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

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']
+    }

src/screens/Shared/Announcements.tsx

@@ -157,8 +157,8 @@ const ScreenSharedAnnouncements: React.FC = ({
                 style={[styles.reaction, { borderColor: theme.primary }]}
                 onPress={() => invisibleTextInputRef.current?.focus()}
               >
-                <Feather
+                <Icon
-                  name='plus'
+                  name='Plus'
                   size={StyleConstants.Font.Size.M}
                   color={theme.primary}
                 />

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
+      <Pressable
-        name='aperture'
-        size={24}
-        color={attachmentColor}
         onPress={attachmentOnPress}
+        children={<Icon name='Aperture' size={24} color={attachmentColor} />}
       />
-      <Feather
+      <Pressable
-        name='bar-chart-2'
-        size={24}
-        color={pollColor}
         onPress={pollOnPress}
+        children={<Icon name='BarChart2' size={24} color={pollColor} />}
       />
-      <Feather
+      <Pressable
-        name={visibilityIcon}
-        size={24}
-        color={composeState.visibilityLock ? theme.disabled : theme.secondary}
         onPress={visibilityOnPress}
+        children={
+          <Icon
+            name={visibilityIcon}
+            size={24}
+            color={
+              composeState.visibilityLock ? theme.disabled : theme.secondary
+            }
+          />
+        }
       />
-      <Feather
+      <Pressable
-        name='alert-triangle'
-        size={24}
-        color={composeState.spoiler.active ? theme.primary : theme.secondary}
         onPress={spoilerOnPress}
+        children={
+          <Icon
+            name='AlertTriangle'
+            size={24}
+            color={
+              composeState.spoiler.active ? theme.primary : theme.secondary
+            }
+          />
+        }
       />
-      <Feather
+      <Pressable
-        name='smile'
-        size={24}
-        color={emojiColor}
         onPress={emojiOnPress}
+        children={<Icon name='Smile' size={24} color={emojiColor} />}
       />
     </View>
   )

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
+        <Icon
-          name={composeState.attachments.sensitive ? 'check-circle' : 'circle'}
+          name={composeState.attachments.sensitive ? 'CheckCircle' : 'Circle'}
           size={StyleConstants.Font.Size.L}
           color={theme.primary}
         />

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
+              <Icon
-                name={multiple ? 'square' : 'circle'}
+                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>
   )

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

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
+            <Icon
-              name='search'
+              name='Search'
               color={theme.primary}
               size={StyleConstants.Font.Size.M}
               style={styles.searchIcon}

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

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:

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"]

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"