Remove most React memorization

Though added memo for timeline components making them (almost) pure
2025-06-05 22:19:13 +02:00 · 2022-12-29 00:36:35 +01:00
parent 1ea6aff328
commit 4cddbb9bad
32 changed files with 1116 additions and 1210 deletions
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
    "@react-native-community/blur": "^4.3.0",
    "@react-native-community/netinfo": "9.3.7",
    "@react-native-community/segmented-control": "^2.2.2",
-    "@react-native-menu/menu": "^0.7.2",
+    "@react-native-menu/menu": "^0.7.3",
    "@react-navigation/bottom-tabs": "^6.5.2",
    "@react-navigation/native": "^6.1.1",
    "@react-navigation/native-stack": "^6.9.7",
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -17,10 +17,7 @@ import {
  setAccount,
  setGlobalStorage
 } from '@utils/storage/actions'
-import {
-  hasMigratedFromAsyncStorage,
-  migrateFromAsyncStorage
-} from '@utils/storage/migrations/toMMKV'
+import { migrateFromAsyncStorage, versionStorageGlobal } from '@utils/storage/migrations/toMMKV'
 import ThemeManager from '@utils/styles/ThemeManager'
 import * as Localization from 'expo-localization'
 import * as SplashScreen from 'expo-splash-screen'
@@ -51,17 +48,15 @@ const App: React.FC = () => {
  const [appIsReady, setAppIsReady] = useState(false)
  const [localCorrupt, setLocalCorrupt] = useState<string>()

-  const [hasMigrated, setHasMigrated] = useState(hasMigratedFromAsyncStorage)
+  const [hasMigrated, setHasMigrated] = useState<boolean>(versionStorageGlobal !== undefined)

  useEffect(() => {
    const prepare = async () => {
-      if (!hasMigrated && !hasMigratedFromAsyncStorage) {
+      if (!hasMigrated) {
        try {
          await migrateFromAsyncStorage()
          setHasMigrated(true)
-        } catch (e) {
-          // TODO: fall back to AsyncStorage? Wipe storage clean and use MMKV? Crash app?
-        }
+        } catch {}
      } else {
        log('log', 'App', 'loading from MMKV')
        const account = getGlobalStorage.string('account.active')
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,7 +1,7 @@
 import Icon from '@components/Icon'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { useMemo, useState } from 'react'
+import React, { useState } from 'react'
 import { AccessibilityProps, Pressable, StyleProp, View, ViewStyle } from 'react-native'
 import { Flow } from 'react-native-animated-spinkit'
 import CustomText from './Text'
@@ -48,18 +48,16 @@ const Button: React.FC<Props> = ({
  overlay = false,
  onPress
 }) => {
-  const { colors, theme } = useTheme()
+  const { colors } = useTheme()

-  const loadingSpinkit = useMemo(
-    () => (
+  const loadingSpinkit = () =>
+    loading ? (
      <View style={{ position: 'absolute' }}>
        <Flow size={StyleConstants.Font.Size[size]} color={colors.secondary} />
      </View>
-    ),
-    [theme]
-  )
+    ) : null

-  const mainColor = useMemo(() => {
+  const mainColor = () => {
    if (selected) {
      return colors.blue
    } else if (overlay) {
@@ -73,29 +71,21 @@ const Button: React.FC<Props> = ({
        return colors.primaryDefault
      }
    }
-  }, [theme, disabled, loading, selected])
-
-  const colorBackground = useMemo(() => {
-    if (overlay) {
-      return colors.backgroundOverlayInvert
-    } else {
-      return colors.backgroundDefault
  }
-  }, [theme])

-  const children = useMemo(() => {
+  const children = () => {
    switch (type) {
      case 'icon':
        return (
          <>
            <Icon
              name={content}
-              color={mainColor}
+              color={mainColor()}
              strokeWidth={strokeWidth}
              style={{ opacity: loading ? 0 : 1 }}
              size={StyleConstants.Font.Size[size] * (size === 'L' ? 1.25 : 1)}
            />
-            {loading ? loadingSpinkit : null}
+            {loadingSpinkit()}
          </>
        )
      case 'text':
@@ -103,7 +93,7 @@ const Button: React.FC<Props> = ({
          <>
            <CustomText
              style={{
-                color: mainColor,
+                color: mainColor(),
                fontSize: StyleConstants.Font.Size[size] * (size === 'L' ? 1.25 : 1),
                opacity: loading ? 0 : 1
              }}
@@ -111,11 +101,11 @@ const Button: React.FC<Props> = ({
              children={content}
              testID='text'
            />
-            {loading ? loadingSpinkit : null}
+            {loadingSpinkit()}
          </>
        )
    }
-  }, [theme, content, loading, disabled])
+  }

  const [layoutHeight, setLayoutHeight] = useState<number | undefined>()

@@ -136,8 +126,8 @@ const Button: React.FC<Props> = ({
          justifyContent: 'center',
          alignItems: 'center',
          borderWidth: overlay ? 0 : 1,
-          borderColor: mainColor,
-          backgroundColor: colorBackground,
+          borderColor: mainColor(),
+          backgroundColor: overlay ? colors.backgroundOverlayInvert : colors.backgroundDefault,
          paddingVertical: StyleConstants.Spacing[spacing],
          paddingHorizontal: StyleConstants.Spacing[spacing] + StyleConstants.Spacing.XS,
          width: round && layoutHeight ? layoutHeight : undefined
@@ -149,7 +139,7 @@ const Button: React.FC<Props> = ({
      })}
      testID='base'
      onPress={onPress}
-      children={children}
+      children={children()}
      disabled={selected || disabled || loading}
    />
  )
--- a/src/components/GracefullyImage.tsx
+++ b/src/components/GracefullyImage.tsx
@@ -1,6 +1,6 @@
 import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { useMemo, useState } from 'react'
+import React, { useState } from 'react'
 import {
  AccessibilityProps,
  Image,
@@ -65,7 +65,7 @@ const GracefullyImage = ({
    }
  }

-  const blurhashView = useMemo(() => {
+  const blurhashView = () => {
    if (hidden || !imageLoaded) {
      if (blurhash) {
        return <Blurhash decodeAsync blurhash={blurhash} style={styles.placeholder} />
@@ -75,7 +75,7 @@ const GracefullyImage = ({
    } else {
      return null
    }
-  }, [hidden, imageLoaded])
+  }

  return (
    <Pressable
@@ -98,7 +98,7 @@ const GracefullyImage = ({
        style={[{ flex: 1 }, imageStyle]}
        onLoad={onLoad}
      />
-      {blurhashView}
+      {blurhashView()}
    </Pressable>
  )
 }
--- a/src/components/Hashtag.tsx
+++ b/src/components/Hashtag.tsx
@@ -3,7 +3,7 @@ import { StackNavigationProp } from '@react-navigation/stack'
 import { TabLocalStackParamList } from '@utils/navigation/navigators'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { PropsWithChildren, useCallback, useState } from 'react'
+import React, { PropsWithChildren, useState } from 'react'
 import { Dimensions, Pressable, View } from 'react-native'
 import Sparkline from './Sparkline'
 import CustomText from './Text'
@@ -21,9 +21,9 @@ const ComponentHashtag: React.FC<PropsWithChildren & Props> = ({
  const { colors } = useTheme()
  const navigation = useNavigation<StackNavigationProp<TabLocalStackParamList>>()

-  const onPress = useCallback(() => {
+  const onPress = () => {
    navigation.push('Tab-Shared-Hashtag', { hashtag: hashtag.name })
-  }, [])
+  }

  const padding = StyleConstants.Spacing.Global.PagePadding
  const width = Dimensions.get('window').width / 4
--- a/src/components/Header/Left.tsx
+++ b/src/components/Header/Left.tsx
@@ -2,7 +2,7 @@ import Icon from '@components/Icon'
 import CustomText from '@components/Text'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { useMemo } from 'react'
+import React from 'react'
 import { Pressable } from 'react-native'

 export interface Props {
@@ -21,9 +21,9 @@ const HeaderLeft: React.FC<Props> = ({
  background = false,
  onPress
 }) => {
-  const { colors, theme } = useTheme()
+  const { colors } = useTheme()

-  const children = useMemo(() => {
+  const children = () => {
    switch (type) {
      case 'icon':
        return (
@@ -35,31 +35,23 @@ const HeaderLeft: React.FC<Props> = ({
        )
      case 'text':
        return (
-          <CustomText
-            fontStyle='M'
-            style={{ color: colors.primaryDefault }}
-            children={content}
-          />
+          <CustomText fontStyle='M' style={{ color: colors.primaryDefault }} children={content} />
        )
    }
-  }, [theme])
+  }

  return (
    <Pressable
      onPress={onPress}
-      children={children}
+      children={children()}
      style={{
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
-        backgroundColor: background
-          ? colors.backgroundOverlayDefault
-          : undefined,
+        backgroundColor: background ? colors.backgroundOverlayDefault : undefined,
        minHeight: 44,
        minWidth: 44,
-        marginLeft: native
-          ? -StyleConstants.Spacing.S
-          : StyleConstants.Spacing.S,
+        marginLeft: native ? -StyleConstants.Spacing.S : StyleConstants.Spacing.S,
        ...(type === 'icon' && {
          borderRadius: 100
        }),
--- a/src/components/Header/Right.tsx
+++ b/src/components/Header/Right.tsx
@@ -2,7 +2,7 @@ import Icon from '@components/Icon'
 import CustomText from '@components/Text'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { useMemo } from 'react'
+import React from 'react'
 import { AccessibilityProps, Pressable, View } from 'react-native'
 import { Flow } from 'react-native-animated-spinkit'

@@ -40,16 +40,14 @@ const HeaderRight: React.FC<Props> = ({
 }) => {
  const { colors, theme } = useTheme()

-  const loadingSpinkit = useMemo(
-    () => (
+  const loadingSpinkit = () =>
+    loading ? (
      <View style={{ position: 'absolute' }}>
        <Flow size={StyleConstants.Font.Size.M * 1.25} color={colors.secondary} />
      </View>
-    ),
-    [theme]
-  )
+    ) : null

-  const children = useMemo(() => {
+  const children = () => {
    switch (type) {
      case 'icon':
        return (
@@ -60,7 +58,7 @@ const HeaderRight: React.FC<Props> = ({
              size={StyleConstants.Spacing.M * 1.25}
              color={disabled ? colors.secondary : destructive ? colors.red : colors.primaryDefault}
            />
-            {loading && loadingSpinkit}
+            {loadingSpinkit()}
          </>
        )
      case 'text':
@@ -79,11 +77,11 @@ const HeaderRight: React.FC<Props> = ({
              }}
              children={content}
            />
-            {loading && loadingSpinkit}
+            {loadingSpinkit()}
          </>
        )
    }
-  }, [theme, loading, disabled])
+  }

  return (
    <Pressable
@@ -92,7 +90,7 @@ const HeaderRight: React.FC<Props> = ({
      accessibilityRole='button'
      accessibilityState={accessibilityState}
      onPress={onPress}
-      children={children}
+      children={children()}
      disabled={disabled || loading}
      style={{
        flexDirection: 'row',
--- a/src/components/Menu/Row.tsx
+++ b/src/components/Menu/Row.tsx
@@ -4,7 +4,7 @@ import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import { ColorDefinitions } from '@utils/styles/themes'
-import React, { useMemo } from 'react'
+import React from 'react'
 import { View } from 'react-native'
 import { Flow } from 'react-native-animated-spinkit'
 import { State, Switch, TapGestureHandler } from 'react-native-gesture-handler'
@@ -47,15 +47,6 @@ const MenuRow: React.FC<Props> = ({
  const { colors, theme } = useTheme()
  const { screenReaderEnabled } = useAccessibility()

-  const loadingSpinkit = useMemo(
-    () => (
-      <View style={{ position: 'absolute' }}>
-        <Flow size={StyleConstants.Font.Size.M * 1.25} color={colors.secondary} />
-      </View>
-    ),
-    [theme]
-  )
-
  return (
    <View
      style={{ minHeight: 50 }}
@@ -157,7 +148,11 @@ const MenuRow: React.FC<Props> = ({
                    style={{ marginLeft: 8, opacity: loading ? 0 : 1 }}
                  />
                ) : null}
-                {loading && loadingSpinkit}
+                {loading ? (
+                  <View style={{ position: 'absolute' }}>
+                    <Flow size={StyleConstants.Font.Size.M * 1.25} color={colors.secondary} />
+                  </View>
+                ) : null}
              </View>
            ) : null}
          </View>
--- a/src/components/Parse/Emojis.tsx
+++ b/src/components/Parse/Emojis.tsx
@@ -20,8 +20,14 @@ export interface Props {
  style?: TextStyle
 }

-const ParseEmojis = React.memo(
-  ({ content, emojis, size = 'M', adaptiveSize = false, fontBold = false, style }: Props) => {
+const ParseEmojis: React.FC<Props> = ({
+  content,
+  emojis,
+  size = 'M',
+  adaptiveSize = false,
+  fontBold = false,
+  style
+}) => {
  if (!content) return null

  const { reduceMotionEnabled } = useAccessibility()
@@ -93,8 +99,6 @@ const ParseEmojis = React.memo(
      )}
    </CustomText>
  )
-  },
-  (prev, next) => prev.content === next.content && prev.style?.color === next.style?.color
-)
+}

 export default ParseEmojis
--- a/src/components/Parse/HTML.tsx
+++ b/src/components/Parse/HTML.tsx
@@ -34,8 +34,7 @@ export interface Props {
  setSpoilerExpanded?: React.Dispatch<React.SetStateAction<boolean>>
 }

-const ParseHTML = React.memo(
-  ({
+const ParseHTML: React.FC<Props> = ({
  content,
  size = 'M',
  textStyles,
@@ -50,7 +49,7 @@ const ParseHTML = React.memo(
  disableDetails = false,
  selectable = false,
  setSpoilerExpanded
-  }: Props) => {
+}) => {
  const [adaptiveFontsize] = useGlobalStorage.number('app.font_size')
  const adaptedFontsize = adaptiveScale(
    StyleConstants.Font.Size[size],
@@ -143,8 +142,7 @@ const ParseHTML = React.memo(
              }
              if (classes.includes('mention') && mentions?.length) {
                const mentionIndex = mentions.findIndex(mention => mention.url === href)
-                  const paramsAccount = (params as { account: Mastodon.Account } | undefined)
-                    ?.account
+                const paramsAccount = (params as { account: Mastodon.Account } | undefined)?.account
                const sameAccount = paramsAccount?.id === mentions[mentionIndex]?.id
                return (
                  <Text
@@ -263,8 +261,6 @@ const ParseHTML = React.memo(
      />
    </View>
  )
-  },
-  (prev, next) => prev.content === next.content && isEqual(prev.emojis, next.emojis)
-)
+}

 export default ParseHTML
--- a/src/components/Timeline/Conversation.tsx
+++ b/src/components/Timeline/Conversation.tsx
@@ -115,4 +115,4 @@ const TimelineConversation: React.FC<Props> = ({ conversation, queryKey, highlig
  )
 }

-export default TimelineConversation
+export default React.memo(TimelineConversation, () => true)
--- a/src/components/Timeline/Default.tsx
+++ b/src/components/Timeline/Default.tsx
@@ -221,4 +221,4 @@ const TimelineDefault: React.FC<Props> = ({
  )
 }

-export default TimelineDefault
+export default React.memo(TimelineDefault, () => true)
--- a/src/components/Timeline/Notifications.tsx
+++ b/src/components/Timeline/Notifications.tsx
@@ -18,7 +18,7 @@ import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
 import { useAccountStorage } from '@utils/storage/actions'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { Fragment, useCallback, useState } from 'react'
+import React, { Fragment, useState } from 'react'
 import { Pressable, View } from 'react-native'
 import * as ContextMenu from 'zeego/context-menu'
 import StatusContext from './Shared/Context'
@@ -53,14 +53,6 @@ const TimelineNotifications: React.FC<Props> = ({ notification, queryKey }) => {
  const { colors } = useTheme()
  const navigation = useNavigation<StackNavigationProp<TabLocalStackParamList>>()

-  const onPress = useCallback(() => {
-    notification.status &&
-      navigation.push('Tab-Shared-Toot', {
-        toot: notification.status,
-        rootQueryKey: queryKey
-      })
-  }, [])
-
  const main = () => {
    return (
      <>
@@ -159,7 +151,13 @@ const TimelineNotifications: React.FC<Props> = ({ notification, queryKey }) => {
              backgroundColor: colors.backgroundDefault,
              paddingBottom: notification.status ? 0 : StyleConstants.Spacing.Global.PagePadding
            }}
-            onPress={onPress}
+            onPress={() =>
+              notification.status &&
+              navigation.push('Tab-Shared-Toot', {
+                toot: notification.status,
+                rootQueryKey: queryKey
+              })
+            }
            onLongPress={() => {}}
            children={main()}
          />
@@ -187,4 +185,4 @@ const TimelineNotifications: React.FC<Props> = ({ notification, queryKey }) => {
  )
 }

-export default TimelineNotifications
+export default React.memo(TimelineNotifications, () => true)
--- a/src/components/Timeline/Shared/Actions.tsx
+++ b/src/components/Timeline/Shared/Actions.tsx
@@ -16,7 +16,7 @@ import { useAccountStorage } from '@utils/storage/actions'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import { uniqBy } from 'lodash'
-import React, { useCallback, useContext, useMemo } from 'react'
+import React, { useContext } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Pressable, StyleSheet, View } from 'react-native'
 import StatusContext from './Context'
@@ -76,7 +76,7 @@ const TimelineActions: React.FC = () => {
  })

  const [accountId] = useAccountStorage.string('auth.account.id')
-  const onPressReply = useCallback(() => {
+  const onPressReply = () => {
    const accts = uniqBy(
      ([status.account] as Mastodon.Account[] & Mastodon.Mention[])
        .concat(status.mentions)
@@ -89,9 +89,9 @@ const TimelineActions: React.FC = () => {
      accts,
      queryKey
    })
-  }, [status.replies_count])
+  }
  const { showActionSheetWithOptions } = useActionSheet()
-  const onPressReblog = useCallback(() => {
+  const onPressReblog = () => {
    if (!status.reblogged) {
      showActionSheetWithOptions(
        {
@@ -157,8 +157,8 @@ const TimelineActions: React.FC = () => {
        }
      })
    }
-  }, [status.reblogged, status.reblogs_count])
-  const onPressFavourite = useCallback(() => {
+  }
+  const onPressFavourite = () => {
    mutation.mutate({
      type: 'updateStatusProperty',
      queryKey,
@@ -172,8 +172,8 @@ const TimelineActions: React.FC = () => {
        countValue: status.favourites_count
      }
    })
-  }, [status.favourited, status.favourites_count])
-  const onPressBookmark = useCallback(() => {
+  }
+  const onPressBookmark = () => {
    mutation.mutate({
      type: 'updateStatusProperty',
      queryKey,
@@ -187,10 +187,9 @@ const TimelineActions: React.FC = () => {
        countValue: undefined
      }
    })
-  }, [status.bookmarked])
+  }

-  const childrenReply = useMemo(
-    () => (
+  const childrenReply = () => (
    <>
      <Icon name='MessageCircle' color={iconColor} size={StyleConstants.Font.Size.L} />
      {status.replies_count > 0 ? (
@@ -205,10 +204,8 @@ const TimelineActions: React.FC = () => {
        </CustomText>
      ) : null}
    </>
-    ),
-    [status.replies_count]
  )
-  const childrenReblog = useMemo(() => {
+  const childrenReblog = () => {
    const color = (state: boolean) => (state ? colors.green : colors.secondary)
    const disabled =
      status.visibility === 'direct' || (status.visibility === 'private' && !ownAccount)
@@ -236,8 +233,8 @@ const TimelineActions: React.FC = () => {
        ) : null}
      </>
    )
-  }, [status.reblogged, status.reblogs_count])
-  const childrenFavourite = useMemo(() => {
+  }
+  const childrenFavourite = () => {
    const color = (state: boolean) => (state ? colors.red : colors.secondary)
    return (
      <>
@@ -256,13 +253,13 @@ const TimelineActions: React.FC = () => {
        ) : null}
      </>
    )
-  }, [status.favourited, status.favourites_count])
-  const childrenBookmark = useMemo(() => {
+  }
+  const childrenBookmark = () => {
    const color = (state: boolean) => (state ? colors.yellow : colors.secondary)
    return (
      <Icon name='Bookmark' color={color(status.bookmarked)} size={StyleConstants.Font.Size.L} />
    )
-  }, [status.bookmarked])
+  }

  return (
    <View style={{ flexDirection: 'row' }}>
@@ -275,7 +272,7 @@ const TimelineActions: React.FC = () => {
          : { accessibilityLabel: '' })}
        style={styles.action}
        onPress={onPressReply}
-        children={childrenReply}
+        children={childrenReply()}
      />

      <Pressable
@@ -289,7 +286,7 @@ const TimelineActions: React.FC = () => {
          : { accessibilityLabel: '' })}
        style={styles.action}
        onPress={onPressReblog}
-        children={childrenReblog}
+        children={childrenReblog()}
        disabled={
          status.visibility === 'direct' || (status.visibility === 'private' && !ownAccount)
        }
@@ -306,7 +303,7 @@ const TimelineActions: React.FC = () => {
          : { accessibilityLabel: '' })}
        style={styles.action}
        onPress={onPressFavourite}
-        children={childrenFavourite}
+        children={childrenFavourite()}
      />

      <Pressable
@@ -320,7 +317,7 @@ const TimelineActions: React.FC = () => {
          : { accessibilityLabel: '' })}
        style={styles.action}
        onPress={onPressBookmark}
-        children={childrenBookmark}
+        children={childrenBookmark()}
      />
    </View>
  )
--- a/src/components/Timeline/Shared/Poll.tsx
+++ b/src/components/Timeline/Shared/Poll.tsx
@@ -14,7 +14,7 @@ import updateStatusProperty from '@utils/queryHooks/timeline/updateStatusPropert
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import { maxBy } from 'lodash'
-import React, { useCallback, useContext, useMemo, useState } from 'react'
+import React, { useContext, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { Pressable, View } from 'react-native'
 import StatusContext from './Context'
@@ -73,7 +73,7 @@ const TimelinePoll: React.FC = () => {
    }
  })

-  const pollButton = useMemo(() => {
+  const pollButton = () => {
    if (!poll.expired) {
      if (!ownAccount && !poll.voted) {
        return (
@@ -127,17 +127,14 @@ const TimelinePoll: React.FC = () => {
        )
      }
    }
-  }, [theme, poll.expired, poll.voted, allOptions, mutation.isLoading])
+  }

-  const isSelected = useCallback(
-    (index: number): string =>
+  const isSelected = (index: number): string =>
    allOptions[index]
      ? `Check${poll.multiple ? 'Square' : 'Circle'}`
-        : `${poll.multiple ? 'Square' : 'Circle'}`,
-    [allOptions]
-  )
+      : `${poll.multiple ? 'Square' : 'Circle'}`

-  const pollBodyDisallow = useMemo(() => {
+  const pollBodyDisallow = () => {
    const maxValue = maxBy(poll.options, option => option.votes_count)?.votes_count
    return poll.options.map((option, index) => (
      <View key={index} style={{ flex: 1, paddingVertical: StyleConstants.Spacing.S }}>
@@ -191,8 +188,8 @@ const TimelinePoll: React.FC = () => {
        />
      </View>
    ))
-  }, [theme, poll.options])
-  const pollBodyAllow = useMemo(() => {
+  }
+  const pollBodyAllow = () => {
    return poll.options.map((option, index) => (
      <Pressable
        key={index}
@@ -229,7 +226,7 @@ const TimelinePoll: React.FC = () => {
        </View>
      </Pressable>
    ))
-  }, [theme, allOptions])
+  }

  const pollVoteCounts = () => {
    if (poll.voters_count !== null) {
@@ -263,7 +260,7 @@ const TimelinePoll: React.FC = () => {

  return (
    <View style={{ marginTop: StyleConstants.Spacing.M }}>
-      {poll.expired || poll.voted ? pollBodyDisallow : pollBodyAllow}
+      {poll.expired || poll.voted ? pollBodyDisallow() : pollBodyAllow()}
      <View
        style={{
          flex: 1,
@@ -272,7 +269,7 @@ const TimelinePoll: React.FC = () => {
          marginTop: StyleConstants.Spacing.XS
        }}
      >
-        {pollButton}
+        {pollButton()}
        <CustomText fontStyle='S' style={{ flexShrink: 1, color: colors.secondary }}>
          {pollVoteCounts()}
          {pollExpiration()}
--- a/src/components/Timeline/index.tsx
+++ b/src/components/Timeline/index.tsx
@@ -5,7 +5,7 @@ import { QueryKeyTimeline, useTimelineQuery } from '@utils/queryHooks/timeline'
 import { useGlobalStorageListener } from '@utils/storage/actions'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { RefObject, useCallback, useRef } from 'react'
+import React, { RefObject, useRef } from 'react'
 import { FlatList, FlatListProps, Platform, RefreshControl } from 'react-native'
 import Animated, { useAnimatedScrollHandler, useSharedValue } from 'react-native-reanimated'
 import TimelineEmpty from './Empty'
@@ -56,11 +56,6 @@ const Timeline: React.FC<Props> = ({

  const flattenData = data?.pages ? data.pages?.flatMap(page => [...page.body]) : []

-  const onEndReached = useCallback(
-    () => !disableInfinity && !isFetchingNextPage && fetchNextPage(),
-    [isFetchingNextPage]
-  )
-
  const flRef = useRef<FlatList>(null)

  const scrollY = useSharedValue(0)
@@ -120,7 +115,7 @@ const Timeline: React.FC<Props> = ({
        data={flattenData}
        initialNumToRender={6}
        maxToRenderPerBatch={3}
-        onEndReached={onEndReached}
+        onEndReached={() => !disableInfinity && !isFetchingNextPage && fetchNextPage()}
        onEndReachedThreshold={0.75}
        ListFooterComponent={
          <TimelineFooter queryKey={queryKey} disableInfinity={disableInfinity} />
--- a/src/screens/Actions.tsx
+++ b/src/screens/Actions.tsx
@@ -1,7 +1,7 @@
 import { RootStackScreenProps } from '@utils/navigation/navigators'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { useCallback, useEffect } from 'react'
+import React, { useEffect } from 'react'
 import { Dimensions, StyleSheet, View } from 'react-native'
 import { PanGestureHandler, State, TapGestureHandler } from 'react-native-gesture-handler'
 import Animated, {
@@ -34,9 +34,8 @@ const ScreenActions = ({
      bottom: interpolate(panY.value, [0, screenHeight], [0, -screenHeight], Extrapolate.CLAMP)
    }
  })
-  const dismiss = useCallback(() => {
-    navigation.goBack()
-  }, [])
+  const dismiss = () => navigation.goBack()
+
  const onGestureEvent = useAnimatedGestureHandler({
    onActive: ({ translationY }) => {
      panY.value = translationY
--- a/src/screens/Announcements.tsx
+++ b/src/screens/Announcements.tsx
@@ -9,7 +9,7 @@ import { RootStackScreenProps } from '@utils/navigation/navigators'
 import { useAnnouncementMutation, useAnnouncementQuery } from '@utils/queryHooks/announcement'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import {
  Dimensions,
@@ -56,8 +56,7 @@ const ScreenAnnouncements: React.FC<RootStackScreenProps<'Screen-Announcements'>
    }
  }, [query.data])

-  const renderItem = useCallback(
-    ({ item, index }: { item: Mastodon.Announcement; index: number }) => (
+  const renderItem = ({ item, index }: { item: Mastodon.Announcement; index: number }) => (
    <View
      key={index}
      style={{
@@ -181,23 +180,16 @@ const ScreenAnnouncements: React.FC<RootStackScreenProps<'Screen-Announcements'>
        />
      </View>
    </View>
-    ),
-    [mode]
  )

-  const onMomentumScrollEnd = useCallback(
-    ({
+  const onMomentumScrollEnd = ({
    nativeEvent: {
      contentOffset: { x },
      layoutMeasurement: { width }
    }
-    }: NativeSyntheticEvent<NativeScrollEvent>) => {
-      setIndex(Math.floor(x / width))
-    },
-    []
-  )
+  }: NativeSyntheticEvent<NativeScrollEvent>) => setIndex(Math.floor(x / width))

-  const ListEmptyComponent = useCallback(() => {
+  const ListEmptyComponent = () => {
    return (
      <View
        style={{
@@ -209,7 +201,7 @@ const ScreenAnnouncements: React.FC<RootStackScreenProps<'Screen-Announcements'>
        <Circle size={StyleConstants.Font.Size.L} color={colors.secondary} />
      </View>
    )
-  }, [])
+  }

  return Platform.OS === 'ios' ? (
    <BlurView
--- a/src/screens/Compose/Root/Actions.tsx
+++ b/src/screens/Compose/Root/Actions.tsx
@@ -6,7 +6,7 @@ import { useActionSheet } from '@expo/react-native-action-sheet'
 import { androidActionSheetStyles } from '@utils/helpers/androidActionSheetStyles'
 import layoutAnimation from '@utils/styles/layoutAnimation'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { useContext, useMemo } from 'react'
+import React, { useContext } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Keyboard, Pressable, StyleSheet, View } from 'react-native'
 import ComposeContext from '../utils/createContext'
@@ -18,7 +18,7 @@ const ComposeActions: React.FC = () => {
  const { t } = useTranslation(['common', 'screenCompose'])
  const { colors } = useTheme()

-  const attachmentColor = useMemo(() => {
+  const attachmentColor = () => {
    if (composeState.poll.active) return colors.disabled

    if (composeState.attachments.uploads.length) {
@@ -26,7 +26,7 @@ const ComposeActions: React.FC = () => {
    } else {
      return colors.secondary
    }
-  }, [composeState.poll.active, composeState.attachments.uploads])
+  }
  const attachmentOnPress = () => {
    if (composeState.poll.active) return

@@ -35,7 +35,7 @@ const ComposeActions: React.FC = () => {
    }
  }

-  const pollColor = useMemo(() => {
+  const pollColor = () => {
    if (composeState.attachments.uploads.length) return colors.disabled

    if (composeState.poll.active) {
@@ -43,7 +43,7 @@ const ComposeActions: React.FC = () => {
    } else {
      return colors.secondary
    }
-  }, [composeState.poll.active, composeState.attachments.uploads])
+  }
  const pollOnPress = () => {
    if (!composeState.attachments.uploads.length) {
      layoutAnimation()
@@ -57,7 +57,7 @@ const ComposeActions: React.FC = () => {
    }
  }

-  const visibilityIcon = useMemo(() => {
+  const visibilityIcon = () => {
    switch (composeState.visibility) {
      case 'public':
        return 'Globe'
@@ -68,7 +68,7 @@ const ComposeActions: React.FC = () => {
      case 'direct':
        return 'Mail'
    }
-  }, [composeState.visibility])
+  }
  const visibilityOnPress = () => {
    if (!composeState.visibilityLock) {
      showActionSheetWithOptions(
@@ -116,7 +116,7 @@ const ComposeActions: React.FC = () => {
  }

  const { emojisState, emojisDispatch } = useContext(EmojisContext)
-  const emojiColor = useMemo(() => {
+  const emojiColor = () => {
    if (!emojis.current?.length) return colors.disabled

    if (emojisState.targetIndex !== -1) {
@@ -124,7 +124,7 @@ const ComposeActions: React.FC = () => {
    } else {
      return colors.secondary
    }
-  }, [emojis.current?.length, emojisState.targetIndex])
+  }
  const emojiOnPress = () => {
    if (emojisState.targetIndex === -1) {
      Keyboard.dismiss()
@@ -159,7 +159,7 @@ const ComposeActions: React.FC = () => {
        }}
        style={styles.button}
        onPress={attachmentOnPress}
-        children={<Icon name='Camera' size={24} color={attachmentColor} />}
+        children={<Icon name='Camera' size={24} color={attachmentColor()} />}
      />
      <Pressable
        accessibilityRole='button'
@@ -171,7 +171,7 @@ const ComposeActions: React.FC = () => {
        }}
        style={styles.button}
        onPress={pollOnPress}
-        children={<Icon name='BarChart2' size={24} color={pollColor} />}
+        children={<Icon name='BarChart2' size={24} color={pollColor()} />}
      />
      <Pressable
        accessibilityRole='button'
@@ -183,7 +183,7 @@ const ComposeActions: React.FC = () => {
        onPress={visibilityOnPress}
        children={
          <Icon
-            name={visibilityIcon}
+            name={visibilityIcon()}
            size={24}
            color={composeState.visibilityLock ? colors.disabled : colors.secondary}
          />
@@ -213,7 +213,7 @@ const ComposeActions: React.FC = () => {
        }}
        style={styles.button}
        onPress={emojiOnPress}
-        children={<Icon name='Smile' size={24} color={emojiColor} />}
+        children={<Icon name='Smile' size={24} color={emojiColor()} />}
      />
    </View>
  )
--- a/src/screens/Compose/Root/Footer/Attachments.tsx
+++ b/src/screens/Compose/Root/Footer/Attachments.tsx
@@ -8,7 +8,7 @@ import { useNavigation } from '@react-navigation/native'
 import { StyleConstants } from '@utils/styles/constants'
 import layoutAnimation from '@utils/styles/layoutAnimation'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { RefObject, useCallback, useContext, useEffect, useMemo, useRef } from 'react'
+import React, { RefObject, useContext, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { FlatList, Pressable, StyleSheet, View } from 'react-native'
 import { Circle } from 'react-native-animated-spinkit'
@@ -32,16 +32,13 @@ const ComposeAttachments: React.FC<Props> = ({ accessibleRefAttachments }) => {

  const flatListRef = useRef<FlatList>(null)

-  const sensitiveOnPress = useCallback(
-    () =>
+  const sensitiveOnPress = () =>
    composeDispatch({
      type: 'attachments/sensitive',
      payload: { sensitive: !composeState.attachments.sensitive }
-      }),
-    [composeState.attachments.sensitive]
-  )
+    })

-  const calculateWidth = useCallback((item: ExtendedAttachment) => {
+  const calculateWidth = (item: ExtendedAttachment) => {
    if (item.local) {
      return ((item.local.width || 100) / (item.local.height || 100)) * DEFAULT_HEIGHT
    } else {
@@ -59,9 +56,9 @@ const ComposeAttachments: React.FC<Props> = ({ accessibleRefAttachments }) => {
        return DEFAULT_HEIGHT
      }
    }
-  }, [])
+  }

-  const snapToOffsets = useMemo(() => {
+  const snapToOffsets = () => {
    const attachmentsOffsets = composeState.attachments.uploads.map((_, index) => {
      let currentOffset = 0
      Array.from(Array(index).keys()).map(
@@ -81,19 +78,19 @@ const ComposeAttachments: React.FC<Props> = ({ accessibleRefAttachments }) => {
            StyleConstants.Spacing.Global.PagePadding
        ]
      : attachmentsOffsets
-  }, [composeState.attachments.uploads.length])
+  }
  let prevOffsets = useRef<number[]>()
  useEffect(() => {
-    if (snapToOffsets.length > (prevOffsets.current ? prevOffsets.current.length : 0)) {
+    const snap = snapToOffsets()
+    if (snap.length > (prevOffsets.current ? prevOffsets.current.length : 0)) {
      flatListRef.current?.scrollToOffset({
-        offset: snapToOffsets[snapToOffsets.length - 2] + snapToOffsets[snapToOffsets.length - 1]
+        offset: snap[snapToOffsets.length - 2] + snap[snapToOffsets.length - 1]
      })
    }
-    prevOffsets.current = snapToOffsets
+    prevOffsets.current = snap
  }, [snapToOffsets, prevOffsets.current])

-  const renderAttachment = useCallback(
-    ({ item, index }: { item: ExtendedAttachment; index: number }) => {
+  const renderAttachment = ({ item, index }: { item: ExtendedAttachment; index: number }) => {
    return (
      <View
        key={index}
@@ -189,52 +186,8 @@ const ComposeAttachments: React.FC<Props> = ({ accessibleRefAttachments }) => {
        )}
      </View>
    )
-    },
-    []
-  )
+  }

-  const listFooter = useMemo(
-    () => (
-      <Pressable
-        accessible
-        accessibilityLabel={t('content.root.footer.attachments.upload.accessibilityLabel')}
-        style={{
-          height: DEFAULT_HEIGHT,
-          marginLeft: StyleConstants.Spacing.Global.PagePadding,
-          marginTop: StyleConstants.Spacing.Global.PagePadding,
-          marginBottom: StyleConstants.Spacing.Global.PagePadding,
-          width: DEFAULT_HEIGHT,
-          backgroundColor: colors.backgroundOverlayInvert
-        }}
-        onPress={async () => {
-          await chooseAndUploadAttachment({
-            composeDispatch,
-            showActionSheetWithOptions
-          })
-        }}
-      >
-        <Button
-          type='icon'
-          content='UploadCloud'
-          spacing='M'
-          round
-          overlay
-          onPress={async () => {
-            await chooseAndUploadAttachment({
-              composeDispatch,
-              showActionSheetWithOptions
-            })
-          }}
-          style={{
-            position: 'absolute',
-            top: (DEFAULT_HEIGHT - StyleConstants.Spacing.M * 2 - StyleConstants.Font.Size.M) / 2,
-            left: (DEFAULT_HEIGHT - StyleConstants.Spacing.M * 2 - StyleConstants.Font.Size.M) / 2
-          }}
-        />
-      </Pressable>
-    ),
-    []
-  )
  return (
    <View
      style={{
@@ -276,13 +229,54 @@ const ComposeAttachments: React.FC<Props> = ({ accessibleRefAttachments }) => {
        pagingEnabled={false}
        snapToAlignment='center'
        renderItem={renderAttachment}
-        snapToOffsets={snapToOffsets}
+        snapToOffsets={snapToOffsets()}
        keyboardShouldPersistTaps='always'
        showsHorizontalScrollIndicator={false}
        data={composeState.attachments.uploads}
        keyExtractor={item => item.local?.uri || item.remote?.url || Math.random().toString()}
        ListFooterComponent={
-          composeState.attachments.uploads.length < MAX_MEDIA_ATTACHMENTS ? listFooter : null
+          composeState.attachments.uploads.length < MAX_MEDIA_ATTACHMENTS ? (
+            <Pressable
+              accessible
+              accessibilityLabel={t('content.root.footer.attachments.upload.accessibilityLabel')}
+              style={{
+                height: DEFAULT_HEIGHT,
+                marginLeft: StyleConstants.Spacing.Global.PagePadding,
+                marginTop: StyleConstants.Spacing.Global.PagePadding,
+                marginBottom: StyleConstants.Spacing.Global.PagePadding,
+                width: DEFAULT_HEIGHT,
+                backgroundColor: colors.backgroundOverlayInvert
+              }}
+              onPress={async () => {
+                await chooseAndUploadAttachment({
+                  composeDispatch,
+                  showActionSheetWithOptions
+                })
+              }}
+            >
+              <Button
+                type='icon'
+                content='UploadCloud'
+                spacing='M'
+                round
+                overlay
+                onPress={async () => {
+                  await chooseAndUploadAttachment({
+                    composeDispatch,
+                    showActionSheetWithOptions
+                  })
+                }}
+                style={{
+                  position: 'absolute',
+                  top:
+                    (DEFAULT_HEIGHT - StyleConstants.Spacing.M * 2 - StyleConstants.Font.Size.M) /
+                    2,
+                  left:
+                    (DEFAULT_HEIGHT - StyleConstants.Spacing.M * 2 - StyleConstants.Font.Size.M) / 2
+                }}
+              />
+            </Pressable>
+          ) : null
        }
      />
    </View>
--- a/src/screens/Compose/Root/index.tsx
+++ b/src/screens/Compose/Root/index.tsx
@@ -2,7 +2,7 @@ import ComponentSeparator from '@components/Separator'
 import { useSearchQuery } from '@utils/queryHooks/search'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { useContext, useEffect, useMemo, useRef } from 'react'
+import React, { useContext, useEffect, useRef } from 'react'
 import { AccessibilityInfo, findNodeHandle, FlatList, View } from 'react-native'
 import { Circle } from 'react-native-animated-spinkit'
 import ComposePosting from '../Posting'
@@ -53,29 +53,22 @@ const ComposeRoot = () => {
    }
  }, [composeState.tag])

-  const listEmpty = useMemo(() => {
-    if (isFetching) {
-      return (
-        <View key='listEmpty' style={{ flex: 1, alignItems: 'center' }}>
-          <Circle size={StyleConstants.Font.Size.M * 1.25} color={colors.secondary} />
-        </View>
-      )
-    }
-  }, [isFetching])
-
-  const Footer = useMemo(
-    () => <ComposeRootFooter accessibleRefAttachments={accessibleRefAttachments} />,
-    [accessibleRefAttachments.current]
-  )
-
  return (
    <View style={{ flex: 1 }}>
      <FlatList
        renderItem={({ item }) => <ComposeRootSuggestion item={item} />}
-        ListEmptyComponent={listEmpty}
+        ListEmptyComponent={
+          isFetching ? (
+            <View key='listEmpty' style={{ flex: 1, alignItems: 'center' }}>
+              <Circle size={StyleConstants.Font.Size.M * 1.25} color={colors.secondary} />
+            </View>
+          ) : null
+        }
        keyboardShouldPersistTaps='always'
        ListHeaderComponent={ComposeRootHeader}
-        ListFooterComponent={Footer}
+        ListFooterComponent={
+          <ComposeRootFooter accessibleRefAttachments={accessibleRefAttachments} />
+        }
        ItemSeparatorComponent={ComponentSeparator}
        // @ts-ignore
        data={data ? data[mapSchemaToType()] : undefined}
--- a/src/screens/Compose/index.tsx
+++ b/src/screens/Compose/index.tsx
@@ -21,7 +21,7 @@ import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import * as StoreReview from 'expo-store-review'
 import { filter } from 'lodash'
-import React, { useCallback, useEffect, useMemo, useReducer, useState } from 'react'
+import React, { useEffect, useMemo, useReducer, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Alert, Keyboard, Platform } from 'react-native'
 import ComposeDraftsList, { removeDraft } from './DraftsList'
@@ -202,8 +202,74 @@ const ScreenCompose: React.FC<RootStackScreenProps<'Screen-Compose'>> = ({
    return () => (autoSave ? clearInterval(autoSave) : undefined)
  }, [composeState])

-  const headerLeft = useCallback(
-    () => (
+  const headerRightDisabled = () => {
+    if (totalTextCount > maxTootChars) {
+      return true
+    }
+    if (composeState.attachments.uploads.filter(upload => upload.uploading).length > 0) {
+      return true
+    }
+    if (composeState.attachments.uploads.length === 0 && composeState.text.raw.length === 0) {
+      return true
+    }
+    return false
+  }
+  const mutateTimeline = useTimelineMutation({ onMutate: true })
+
+  const inputProps: EmojisState['inputProps'] = [
+    {
+      value: [
+        composeState.text.raw,
+        content => {
+          formatText({ textInput: 'text', composeDispatch, content })
+        }
+      ],
+      selection: [
+        composeState.text.selection,
+        selection => composeDispatch({ type: 'text', payload: { selection } })
+      ],
+      isFocused: composeState.textInputFocus.isFocused.text,
+      maxLength: maxTootChars - (composeState.spoiler.active ? composeState.spoiler.count : 0),
+      ref: composeState.textInputFocus.refs.text
+    },
+    {
+      value: [
+        composeState.spoiler.raw,
+        content => formatText({ textInput: 'spoiler', composeDispatch, content })
+      ],
+      selection: [
+        composeState.spoiler.selection,
+        selection => composeDispatch({ type: 'spoiler', payload: { selection } })
+      ],
+      isFocused: composeState.textInputFocus.isFocused.spoiler,
+      maxLength: maxTootChars - composeState.text.count,
+      ref: composeState.textInputFocus.refs.spoiler
+    }
+  ]
+
+  return (
+    <ComponentEmojis
+      inputProps={inputProps}
+      customButton
+      customBehavior={Platform.OS === 'ios' ? 'padding' : undefined}
+      customEdges={hasKeyboard ? ['top'] : ['top', 'bottom']}
+    >
+      <ComposeContext.Provider value={{ composeState, composeDispatch }}>
+        <Stack.Navigator initialRouteName='Screen-Compose-Root'>
+          <Stack.Screen
+            name='Screen-Compose-Root'
+            component={ComposeRoot}
+            options={{
+              title: `${totalTextCount} / ${maxTootChars}`,
+              headerTitleStyle: {
+                fontWeight:
+                  totalTextCount > maxTootChars
+                    ? StyleConstants.Font.Weight.Bold
+                    : StyleConstants.Font.Weight.Normal,
+                fontSize: StyleConstants.Font.Size.M
+              },
+              headerTintColor: totalTextCount > maxTootChars ? colors.red : colors.secondary,
+              headerLeft: () => (
                <HeaderLeft
                  type='text'
                  content={t('common:buttons.cancel')}
@@ -237,23 +303,7 @@ const ScreenCompose: React.FC<RootStackScreenProps<'Screen-Compose'>> = ({
                  }}
                />
              ),
-    [composeState]
-  )
-  const headerRightDisabled = useMemo(() => {
-    if (totalTextCount > maxTootChars) {
-      return true
-    }
-    if (composeState.attachments.uploads.filter(upload => upload.uploading).length > 0) {
-      return true
-    }
-    if (composeState.attachments.uploads.length === 0 && composeState.text.raw.length === 0) {
-      return true
-    }
-    return false
-  }, [totalTextCount, composeState.attachments.uploads, composeState.text.raw])
-  const mutateTimeline = useTimelineMutation({ onMutate: true })
-  const headerRight = useCallback(
-    () => (
+              headerRight: () => (
                <HeaderRight
                  type='text'
                  content={t(
@@ -276,7 +326,9 @@ const ScreenCompose: React.FC<RootStackScreenProps<'Screen-Compose'>> = ({
                        if (Platform.OS === 'ios' && Platform.constants.osVersion === '13.3') {
                          // https://github.com/tooot-app/app/issues/59
                        } else {
-                const currentCount = getGlobalStorage.number('app.count_till_store_review')
+                          const currentCount = getGlobalStorage.number(
+                            'app.count_till_store_review'
+                          )
                          if (currentCount === 10) {
                            StoreReview?.isAvailableAsync()
                              .then(() => StoreReview.requestReview())
@@ -332,78 +384,18 @@ const ScreenCompose: React.FC<RootStackScreenProps<'Screen-Compose'>> = ({
                          haptics('Error')
                          handleError({ message: 'Posting error', captureResponse: true })
                          composeDispatch({ type: 'posting', payload: false })
-                Alert.alert(t('screenCompose:heading.right.alert.default.title'), undefined, [
-                  { text: t('screenCompose:heading.right.alert.default.button') }
-                ])
+                          Alert.alert(
+                            t('screenCompose:heading.right.alert.default.title'),
+                            undefined,
+                            [{ text: t('screenCompose:heading.right.alert.default.button') }]
+                          )
                        }
                      })
                  }}
                  loading={composeState.posting}
-        disabled={headerRightDisabled}
+                  disabled={headerRightDisabled()}
                />
-    ),
-    [totalTextCount, composeState]
              )
-
-  const headerContent = useMemo(() => {
-    return `${totalTextCount} / ${maxTootChars}`
-  }, [totalTextCount, maxTootChars, composeState.dirty])
-
-  const inputProps: EmojisState['inputProps'] = [
-    {
-      value: [
-        composeState.text.raw,
-        content => {
-          formatText({ textInput: 'text', composeDispatch, content })
-        }
-      ],
-      selection: [
-        composeState.text.selection,
-        selection => composeDispatch({ type: 'text', payload: { selection } })
-      ],
-      isFocused: composeState.textInputFocus.isFocused.text,
-      maxLength: maxTootChars - (composeState.spoiler.active ? composeState.spoiler.count : 0),
-      ref: composeState.textInputFocus.refs.text
-    },
-    {
-      value: [
-        composeState.spoiler.raw,
-        content => formatText({ textInput: 'spoiler', composeDispatch, content })
-      ],
-      selection: [
-        composeState.spoiler.selection,
-        selection => composeDispatch({ type: 'spoiler', payload: { selection } })
-      ],
-      isFocused: composeState.textInputFocus.isFocused.spoiler,
-      maxLength: maxTootChars - composeState.text.count,
-      ref: composeState.textInputFocus.refs.spoiler
-    }
-  ]
-
-  return (
-    <ComponentEmojis
-      inputProps={inputProps}
-      customButton
-      customBehavior={Platform.OS === 'ios' ? 'padding' : undefined}
-      customEdges={hasKeyboard ? ['top'] : ['top', 'bottom']}
-    >
-      <ComposeContext.Provider value={{ composeState, composeDispatch }}>
-        <Stack.Navigator initialRouteName='Screen-Compose-Root'>
-          <Stack.Screen
-            name='Screen-Compose-Root'
-            component={ComposeRoot}
-            options={{
-              title: headerContent,
-              headerTitleStyle: {
-                fontWeight:
-                  totalTextCount > maxTootChars
-                    ? StyleConstants.Font.Weight.Bold
-                    : StyleConstants.Font.Weight.Normal,
-                fontSize: StyleConstants.Font.Size.M
-              },
-              headerTintColor: totalTextCount > maxTootChars ? colors.red : colors.secondary,
-              headerLeft,
-              headerRight
            }}
          />
          <Stack.Screen
--- a/src/screens/ImageViewer/index.tsx
+++ b/src/screens/ImageViewer/index.tsx
@@ -4,7 +4,7 @@ import { useActionSheet } from '@expo/react-native-action-sheet'
 import { androidActionSheetStyles } from '@utils/helpers/androidActionSheetStyles'
 import { RootStackScreenProps } from '@utils/navigation/navigators'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { useCallback, useState } from 'react'
+import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
  Dimensions,
@@ -40,14 +40,41 @@ const ScreenImagesViewer = ({

  const insets = useSafeAreaInsets()

-  const { mode, colors } = useTheme()
+  const { colors } = useTheme()
  const { t } = useTranslation(['common', 'screenImageViewer'])

  const initialIndex = imageUrls.findIndex(image => image.id === id)
  const [currentIndex, setCurrentIndex] = useState(initialIndex)

  const { showActionSheetWithOptions } = useActionSheet()
-  const onPress = useCallback(() => {
+
+  const isZoomed = useSharedValue(false)
+
+  return (
+    <View style={{ backgroundColor: 'black' }}>
+      <StatusBar hidden />
+      <View
+        style={{
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          marginTop: insets.top,
+          position: 'absolute',
+          width: '100%',
+          zIndex: 999
+        }}
+      >
+        <HeaderLeft content='X' native={false} background onPress={() => navigation.goBack()} />
+        {!hideCounter ? (
+          <HeaderCenter inverted content={`${currentIndex + 1} / ${imageUrls.length}`} />
+        ) : null}
+        <HeaderRight
+          accessibilityLabel={t('screenImageViewer:content.actions.accessibilityLabel')}
+          accessibilityHint={t('screenImageViewer:content.actions.accessibilityHint')}
+          content='MoreHorizontal'
+          native={false}
+          background
+          onPress={() =>
            showActionSheetWithOptions(
              {
                options: [
@@ -76,100 +103,7 @@ const ScreenImagesViewer = ({
                }
              }
            )
-  }, [currentIndex])
-
-  const isZoomed = useSharedValue(false)
-
-  const renderItem = React.useCallback(
-    ({
-      item
-    }: {
-      item: RootStackScreenProps<'Screen-ImagesViewer'>['route']['params']['imageUrls'][0]
-    }) => {
-      const screenRatio = WINDOW_WIDTH / WINDOW_HEIGHT
-      const imageRatio = item.width && item.height ? item.width / item.height : 1
-      const imageWidth = item.width || 100
-      const imageHeight = item.height || 100
-
-      const maxWidthScale = item.width ? (item.width / WINDOW_WIDTH / PixelRatio.get()) * 4 : 0
-      const maxHeightScale = item.height ? (item.height / WINDOW_WIDTH / PixelRatio.get()) * 4 : 0
-      const max = Math.max.apply(Math, [maxWidthScale, maxHeightScale, 4])
-
-      return (
-        <Zoom
-          onZoomBegin={() => (isZoomed.value = true)}
-          onZoomEnd={() => (isZoomed.value = false)}
-          maximumZoomScale={max > 8 ? 8 : max}
-          simultaneousGesture={Gesture.Fling()
-            .direction(Directions.DOWN)
-            .onStart(() => {
-              if (isZoomed.value === false) {
-                runOnJS(navigation.goBack)()
          }
-            })}
-          children={
-            <View
-              style={{
-                width: WINDOW_WIDTH,
-                height: WINDOW_HEIGHT,
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'center'
-              }}
-            >
-              <GracefullyImage
-                uri={{ preview: item.preview_url, remote: item.remote_url, original: item.url }}
-                dimension={{
-                  width:
-                    screenRatio > imageRatio
-                      ? (WINDOW_HEIGHT / imageHeight) * imageWidth
-                      : WINDOW_WIDTH,
-                  height:
-                    screenRatio > imageRatio
-                      ? WINDOW_HEIGHT
-                      : (WINDOW_WIDTH / imageWidth) * imageHeight
-                }}
-              />
-            </View>
-          }
-        />
-      )
-    },
-    [isZoomed.value]
-  )
-
-  const onViewableItemsChanged = useCallback(
-    ({ viewableItems }: { viewableItems: ViewToken[] }) => {
-      setCurrentIndex(viewableItems[0]?.index || 0)
-    },
-    []
-  )
-
-  return (
-    <View style={{ backgroundColor: 'black' }}>
-      <StatusBar hidden />
-      <View
-        style={{
-          flexDirection: 'row',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          marginTop: insets.top,
-          position: 'absolute',
-          width: '100%',
-          zIndex: 999
-        }}
-      >
-        <HeaderLeft content='X' native={false} background onPress={() => navigation.goBack()} />
-        {!hideCounter ? (
-          <HeaderCenter inverted content={`${currentIndex + 1} / ${imageUrls.length}`} />
-        ) : null}
-        <HeaderRight
-          accessibilityLabel={t('screenImageViewer:content.actions.accessibilityLabel')}
-          accessibilityHint={t('screenImageViewer:content.actions.accessibilityHint')}
-          content='MoreHorizontal'
-          native={false}
-          background
-          onPress={onPress}
        />
      </View>
      <LongPressGestureHandler
@@ -211,8 +145,71 @@ const ScreenImagesViewer = ({
          pagingEnabled
          horizontal
          keyExtractor={item => item.id}
-          renderItem={renderItem}
-          onViewableItemsChanged={onViewableItemsChanged}
+          renderItem={({
+            item
+          }: {
+            item: RootStackScreenProps<'Screen-ImagesViewer'>['route']['params']['imageUrls'][0]
+          }) => {
+            const screenRatio = WINDOW_WIDTH / WINDOW_HEIGHT
+            const imageRatio = item.width && item.height ? item.width / item.height : 1
+            const imageWidth = item.width || 100
+            const imageHeight = item.height || 100
+
+            const maxWidthScale = item.width
+              ? (item.width / WINDOW_WIDTH / PixelRatio.get()) * 4
+              : 0
+            const maxHeightScale = item.height
+              ? (item.height / WINDOW_WIDTH / PixelRatio.get()) * 4
+              : 0
+            const max = Math.max.apply(Math, [maxWidthScale, maxHeightScale, 4])
+
+            return (
+              <Zoom
+                onZoomBegin={() => (isZoomed.value = true)}
+                onZoomEnd={() => (isZoomed.value = false)}
+                maximumZoomScale={max > 8 ? 8 : max}
+                simultaneousGesture={Gesture.Fling()
+                  .direction(Directions.DOWN)
+                  .onStart(() => {
+                    if (isZoomed.value === false) {
+                      runOnJS(navigation.goBack)()
+                    }
+                  })}
+                children={
+                  <View
+                    style={{
+                      width: WINDOW_WIDTH,
+                      height: WINDOW_HEIGHT,
+                      flexDirection: 'row',
+                      alignItems: 'center',
+                      justifyContent: 'center'
+                    }}
+                  >
+                    <GracefullyImage
+                      uri={{
+                        preview: item.preview_url,
+                        remote: item.remote_url,
+                        original: item.url
+                      }}
+                      dimension={{
+                        width:
+                          screenRatio > imageRatio
+                            ? (WINDOW_HEIGHT / imageHeight) * imageWidth
+                            : WINDOW_WIDTH,
+                        height:
+                          screenRatio > imageRatio
+                            ? WINDOW_HEIGHT
+                            : (WINDOW_WIDTH / imageWidth) * imageHeight
+                      }}
+                    />
+                  </View>
+                }
+              />
+            )
+          }}
+          onViewableItemsChanged={({ viewableItems }: { viewableItems: ViewToken[] }) => {
+            setCurrentIndex(viewableItems[0]?.index || 0)
+          }}
          viewabilityConfig={{
            itemVisiblePercentThreshold: 50
          }}
--- a/src/screens/Tabs/Shared/Account/Attachments.tsx
+++ b/src/screens/Tabs/Shared/Account/Attachments.tsx
@@ -6,8 +6,8 @@ import { TabLocalStackParamList } from '@utils/navigation/navigators'
 import { useTimelineQuery } from '@utils/queryHooks/timeline'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { useCallback } from 'react'
-import { Dimensions, ListRenderItem, Pressable, View } from 'react-native'
+import React from 'react'
+import { Dimensions, Pressable, View } from 'react-native'
 import { FlatList } from 'react-native-gesture-handler'
 import Animated, { useAnimatedStyle, withTiming } from 'react-native-reanimated'

@@ -39,8 +39,25 @@ const AccountAttachments: React.FC<Props> = ({ account }) => {
        .splice(0, DISPLAY_AMOUNT)
    : []

-  const renderItem = useCallback<ListRenderItem<Mastodon.Status>>(
-    ({ item, index }) => {
+  const styleContainer = useAnimatedStyle(() => {
+    if (flattenData.length) {
+      return {
+        height: withTiming(width + StyleConstants.Spacing.Global.PagePadding * 2),
+        paddingVertical: StyleConstants.Spacing.Global.PagePadding,
+        borderTopWidth: 1,
+        borderTopColor: colors.border
+      }
+    } else {
+      return {}
+    }
+  }, [flattenData.length])
+
+  return (
+    <Animated.View style={[{ flex: 1 }, styleContainer]}>
+      <FlatList
+        horizontal
+        data={flattenData}
+        renderItem={({ item, index }) => {
          if (index === DISPLAY_AMOUNT - 1) {
            return (
              <Pressable
@@ -72,7 +89,8 @@ const AccountAttachments: React.FC<Props> = ({ account }) => {
            return (
              <GracefullyImage
                uri={{
-              original: item.media_attachments[0]?.preview_url || item.media_attachments[0]?.url,
+                  original:
+                    item.media_attachments[0]?.preview_url || item.media_attachments[0]?.url,
                  remote: item.media_attachments[0]?.remote_url
                }}
                blurhash={
@@ -84,29 +102,7 @@ const AccountAttachments: React.FC<Props> = ({ account }) => {
              />
            )
          }
-    },
-    [account]
-  )
-
-  const styleContainer = useAnimatedStyle(() => {
-    if (flattenData.length) {
-      return {
-        height: withTiming(width + StyleConstants.Spacing.Global.PagePadding * 2),
-        paddingVertical: StyleConstants.Spacing.Global.PagePadding,
-        borderTopWidth: 1,
-        borderTopColor: colors.border
-      }
-    } else {
-      return {}
-    }
-  }, [flattenData.length])
-
-  return (
-    <Animated.View style={[{ flex: 1 }, styleContainer]}>
-      <FlatList
-        horizontal
-        data={flattenData}
-        renderItem={renderItem}
+        }}
        showsHorizontalScrollIndicator={false}
      />
    </Animated.View>
--- a/src/screens/Tabs/Shared/Account/Information/Name.tsx
+++ b/src/screens/Tabs/Shared/Account/Information/Name.tsx
@@ -2,7 +2,7 @@ import { ParseEmojis } from '@components/Parse'
 import CustomText from '@components/Text'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { useMemo } from 'react'
+import React from 'react'
 import { View } from 'react-native'
 import { PlaceholderLine } from 'rn-placeholder'

@@ -13,21 +13,6 @@ export interface Props {
 const AccountInformationName: React.FC<Props> = ({ account }) => {
  const { colors } = useTheme()

-  const movedContent = useMemo(() => {
-    if (account?.moved) {
-      return (
-        <View style={{ marginLeft: StyleConstants.Spacing.S }}>
-          <ParseEmojis
-            content={account.moved.display_name || account.moved.username}
-            emojis={account.moved.emojis}
-            size='L'
-            fontBold
-          />
-        </View>
-      )
-    }
-  }, [account?.moved])
-
  return (
    <View
      style={{
@@ -51,7 +36,16 @@ const AccountInformationName: React.FC<Props> = ({ account }) => {
              fontBold
            />
          </CustomText>
-          {movedContent}
+          {account.moved ? (
+            <View style={{ marginLeft: StyleConstants.Spacing.S }}>
+              <ParseEmojis
+                content={account.moved.display_name || account.moved.username}
+                emojis={account.moved.emojis}
+                size='L'
+                fontBold
+              />
+            </View>
+          ) : null}
        </>
      ) : (
        <PlaceholderLine
--- a/src/screens/Tabs/Shared/Users.tsx
+++ b/src/screens/Tabs/Shared/Users.tsx
@@ -9,7 +9,7 @@ import { SearchResult } from '@utils/queryHooks/search'
 import { QueryKeyUsers, useUsersQuery } from '@utils/queryHooks/users'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { View } from 'react-native'
 import { Circle, Flow } from 'react-native-animated-spinkit'
@@ -41,11 +41,6 @@ const TabSharedUsers: React.FC<TabSharedStackScreenProps<'Tab-Shared-Users'>> =
  })
  const flattenData = data?.pages ? data.pages.flatMap(page => [...page.body]) : []

-  const onEndReached = useCallback(
-    () => hasNextPage && !isFetchingNextPage && fetchNextPage(),
-    [hasNextPage, isFetchingNextPage]
-  )
-
  const [isSearching, setIsSearching] = useState(false)

  return (
@@ -90,7 +85,7 @@ const TabSharedUsers: React.FC<TabSharedStackScreenProps<'Tab-Shared-Users'>> =
          children={<Flow size={StyleConstants.Font.Size.L} color={colors.secondary} />}
        />
      )}
-      onEndReached={onEndReached}
+      onEndReached={() => hasNextPage && !isFetchingNextPage && fetchNextPage()}
      onEndReachedThreshold={0.75}
      ItemSeparatorComponent={ComponentSeparator}
      ListEmptyComponent={
--- a/src/screens/Tabs/index.tsx
+++ b/src/screens/Tabs/index.tsx
@@ -5,7 +5,7 @@ import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
 import { RootStackScreenProps, ScreenTabsStackParamList } from '@utils/navigation/navigators'
 import { getGlobalStorage, useAccountStorage, useGlobalStorage } from '@utils/storage/actions'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { useCallback, useMemo } from 'react'
+import React from 'react'
 import { Platform } from 'react-native'
 import TabLocal from './Local'
 import TabMe from './Me'
@@ -20,31 +20,6 @@ const ScreenTabs = ({ navigation }: RootStackScreenProps<'Screen-Tabs'>) => {
  const [accountActive] = useGlobalStorage.string('account.active')
  const [avatarStatic] = useAccountStorage.string('auth.account.avatar_static')

-  const composeListeners = useMemo(
-    () => ({
-      tabPress: (e: any) => {
-        e.preventDefault()
-        haptics('Light')
-        navigation.navigate('Screen-Compose')
-      }
-    }),
-    []
-  )
-  const composeComponent = useCallback(() => null, [])
-
-  const meListeners = useMemo(
-    () => ({
-      tabLongPress: () => {
-        haptics('Light')
-        //@ts-ignore
-        navigation.navigate('Tab-Me', { screen: 'Tab-Me-Root' })
-        //@ts-ignore
-        navigation.navigate('Tab-Me', { screen: 'Tab-Me-Switch' })
-      }
-    }),
-    []
-  )
-
  return (
    <Tab.Navigator
      initialRouteName={accountActive ? getGlobalStorage.string('app.prev_tab') : 'Tab-Me'}
@@ -97,9 +72,32 @@ const ScreenTabs = ({ navigation }: RootStackScreenProps<'Screen-Tabs'>) => {
    >
      <Tab.Screen name='Tab-Local' component={TabLocal} />
      <Tab.Screen name='Tab-Public' component={TabPublic} />
-      <Tab.Screen name='Tab-Compose' component={composeComponent} listeners={composeListeners} />
+      <Tab.Screen
+        name='Tab-Compose'
+        listeners={{
+          tabPress: e => {
+            e.preventDefault()
+            haptics('Light')
+            navigation.navigate('Screen-Compose')
+          }
+        }}
+      >
+        {() => null}
+      </Tab.Screen>
      <Tab.Screen name='Tab-Notifications' component={TabNotifications} />
-      <Tab.Screen name='Tab-Me' component={TabMe} listeners={meListeners} />
+      <Tab.Screen
+        name='Tab-Me'
+        component={TabMe}
+        listeners={{
+          tabLongPress: () => {
+            haptics('Light')
+            //@ts-ignore
+            navigation.navigate('Tab-Me', { screen: 'Tab-Me-Root' })
+            //@ts-ignore
+            navigation.navigate('Tab-Me', { screen: 'Tab-Me-Switch' })
+          }
+        }}
+      />
    </Tab.Navigator>
  )
 }
--- a/src/screens/index.tsx
+++ b/src/screens/index.tsx
@@ -23,7 +23,7 @@ import { useTheme } from '@utils/styles/ThemeManager'
 import { themes } from '@utils/styles/themes'
 import * as Linking from 'expo-linking'
 import { addScreenshotListener } from 'expo-screen-capture'
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { IntlProvider } from 'react-intl'
 import { Alert, Platform, StatusBar } from 'react-native'
@@ -90,7 +90,7 @@ const Screens: React.FC<Props> = ({ localCorrupt }) => {
  useEmojisQuery({ options: { enabled: !!accountActive } })

  // Callbacks
-  const navigationContainerOnStateChange = useCallback(() => {
+  const navigationContainerOnStateChange = () => {
    const currentRoute = navigationRef.getCurrentRoute()

    const matchTabName = currentRoute?.name?.match(/(Tab-.*)-Root/)
@@ -98,7 +98,7 @@ const Screens: React.FC<Props> = ({ localCorrupt }) => {
      // @ts-ignore
      setGlobalStorage('app.prev_tab', matchTabName[1])
    }
-  }, [])
+  }

  // Deep linking for compose
  const [deeplinked, setDeeplinked] = useState(false)
@@ -128,8 +128,7 @@ const Screens: React.FC<Props> = ({ localCorrupt }) => {
  }, [accounts, accountActive, deeplinked])

  // Share Extension
-  const handleShare = useCallback(
-    (
+  const handleShare = (
    item?:
      | {
          data: { mimeType: string; data: string }[]
@@ -228,9 +227,7 @@ const Screens: React.FC<Props> = ({ localCorrupt }) => {
        })
      }
    }
-    },
-    []
-  )
+  }
  useEffect(() => {
    ShareMenu.getInitialShare(handleShare)
  }, [])
--- a/src/utils/storage/global/v0.ts
+++ b/src/utils/storage/global/v0.ts
@@ -13,6 +13,8 @@ export type GlobalV0 = {
  // number
  'app.count_till_store_review'?: number
  'app.font_size'?: -1 | 0 | 1 | 2 | 3
+  'version.global': number
+  'version.account': number
  // boolean
  'app.auto_play_gifv'?: boolean

--- a/src/utils/storage/migrations/toMMKV.ts
+++ b/src/utils/storage/migrations/toMMKV.ts
@@ -3,7 +3,7 @@ import log from '@utils/startup/log'
 import { secureStorage, storage } from '@utils/storage'
 import { MMKV } from 'react-native-mmkv'

-export const hasMigratedFromAsyncStorage = storage.global.getBoolean('hasMigratedFromAsyncStorage')
+export const versionStorageGlobal = storage.global.getNumber('version.global')

 export async function migrateFromAsyncStorage(): Promise<void> {
  log('log', 'Migration', 'Migrating...')
@@ -107,7 +107,7 @@ export async function migrateFromAsyncStorage(): Promise<void> {
    throw error
  }

-  storage.global.set('hasMigratedFromAsyncStorage', true)
+  storage.global.set('version.global', 0)

  const end = global.performance.now()
  log('log', 'Migration', `Migrated in ${end - start}ms`)
--- a/src/utils/styles/ThemeManager.tsx
+++ b/src/utils/styles/ThemeManager.tsx
@@ -19,7 +19,7 @@ const ManageThemeContext = createContext<ContextType>({

 export const useTheme = () => useContext(ManageThemeContext)

-const useColorSchemeDelay = (delay = 500) => {
+const useColorSchemeDelay = (delay = 50) => {
  const [colorScheme, setColorScheme] = React.useState(Appearance.getColorScheme())
  const onColorSchemeChange = React.useCallback(
    throttle(
--- a/yarn.lock
+++ b/yarn.lock
@@ -2922,13 +2922,13 @@ __metadata:
  languageName: node
  linkType: hard

-"@react-native-menu/menu@npm:^0.7.2":
-  version: 0.7.2
-  resolution: "@react-native-menu/menu@npm:0.7.2"
+"@react-native-menu/menu@npm:^0.7.3":
+  version: 0.7.3
+  resolution: "@react-native-menu/menu@npm:0.7.3"
  peerDependencies:
    react: "*"
    react-native: "*"
-  checksum: b82402d183a58427cf0cc0dd617a81019e559d828b370f37d2df2690254dfa1e53f4da228e8c63e53d7c29423fd939f9a4b0c2b2930dc7d6cc5fdc5858b523f6
+  checksum: 419b2e500c49248b3cc2202ceda7cdb35008dfc3a4d67becb5a1276a9d306c654eccfa041a1d040b97ebb188478e565c658fa5dee1d7db834a786d67e32461e1
  languageName: node
  linkType: hard

@@ -11232,7 +11232,7 @@ __metadata:
    "@react-native-community/blur": ^4.3.0
    "@react-native-community/netinfo": 9.3.7
    "@react-native-community/segmented-control": ^2.2.2
-    "@react-native-menu/menu": ^0.7.2
+    "@react-native-menu/menu": ^0.7.3
    "@react-navigation/bottom-tabs": ^6.5.2
    "@react-navigation/native": ^6.1.1
    "@react-navigation/native-stack": ^6.9.7