Updates

src/components/Timelines/Timeline/Notifications.tsx

@@ -74,7 +74,7 @@ const TimelineNotifications: React.FC<Props> = ({
           {notification.status.media_attachments.length > 0 && (
             <TimelineAttachment
               status={notification.status}
-              width={contentWidth}
+              contentWidth={contentWidth}
             />
           )}
           {notification.status.card && (

src/components/Timelines/Timeline/Shared/Content.tsx

@@ -4,6 +4,7 @@ import ParseContent from '@components/ParseContent'
 import { useTheme } from '@utils/styles/ThemeManager'
 import { StyleConstants } from '@utils/styles/constants'
 import { LinearGradient } from 'expo-linear-gradient'
+import layoutAnimation from '@root/utils/styles/layoutAnimation'
 
 export interface Props {
   status: Mastodon.Status
@@ -16,7 +17,7 @@ const TimelineContent: React.FC<Props> = ({
   numberOfLines,
   highlighted = false
 }) => {
-  LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
+  layoutAnimation()
   const { theme } = useTheme()
   const [spoilerCollapsed, setSpoilerCollapsed] = useState(false)
   const lineHeight = 28

src/screens/Me/Root.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useState } from 'react'
-import { Animated, LayoutAnimation, ScrollView } from 'react-native'
+import { Animated, ScrollView } from 'react-native'
 import { useSelector } from 'react-redux'
 
 import { getLocalUrl } from '@utils/slices/instancesSlice'
@@ -12,9 +12,10 @@ import Logout from '@screens/Me/Root/Logout'
 import { useScrollToTop } from '@react-navigation/native'
 import { AccountState } from '../Shared/Account'
 import AccountNav from '../Shared/Account/Nav'
+import layoutAnimation from '@root/utils/styles/layoutAnimation'
 
 const ScreenMeRoot: React.FC = () => {
-  LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
+  layoutAnimation()
   const localRegistered = useSelector(getLocalUrl)
 
   const scrollRef = useRef<ScrollView>(null)

src/screens/Shared/Account.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useReducer, useRef, useState } from 'react'
-import { Animated, LayoutAnimation, ScrollView } from 'react-native'
+import { Animated, ScrollView } from 'react-native'
 
 import { useQuery } from 'react-query'
 import { accountFetch } from '@utils/fetches/accountFetch'
@@ -13,6 +13,7 @@ import BottomSheet from '@root/components/BottomSheet'
 import { useSelector } from 'react-redux'
 import { getLocalAccountId } from '@root/utils/slices/instancesSlice'
 import HeaderDefaultActionsAccount from '@root/components/Timelines/Timeline/Shared/HeaderDefault/ActionsAccount'
+import layoutAnimation from '@root/utils/styles/layoutAnimation'
 
 // Moved account example: https://m.cmx.im/web/accounts/27812
 
@@ -73,7 +74,7 @@ const ScreenSharedAccount: React.FC<Props> = ({
   },
   navigation
 }) => {
-  LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
+  layoutAnimation()
   const localAccountId = useSelector(getLocalAccountId)
   const { data } = useQuery(['Account', { id: account.id }], accountFetch)
 

src/screens/Shared/Compose.tsx

@@ -4,6 +4,7 @@ import React, {
   Dispatch,
   ReactNode,
   RefObject,
+  useCallback,
   useEffect,
   useReducer,
   useState
@@ -13,7 +14,6 @@ import {
   Alert,
   Keyboard,
   KeyboardAvoidingView,
-  LayoutAnimation,
   StyleSheet,
   Text,
   TextInput
@@ -333,7 +333,6 @@ export interface Props {
 }
 
 const Compose: React.FC<Props> = ({ route: { params }, navigation }) => {
-  LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
   const { theme } = useTheme()
   const queryClient = useQueryClient()
 
@@ -538,6 +537,53 @@ const Compose: React.FC<Props> = ({ route: { params }, navigation }) => {
     edit: '发嘟嘟'
   }
 
+  const headerLeft = useCallback(
+    () => (
+      <HeaderLeft
+        onPress={() =>
+          Alert.alert('确认取消编辑？', '', [
+            { text: '继续编辑', style: 'cancel' },
+            {
+              text: '退出编辑',
+              style: 'destructive',
+              onPress: () => navigation.goBack()
+            }
+          ])
+        }
+        text='退出编辑'
+      />
+    ),
+    []
+  )
+  const headerCenter = useCallback(
+    () => (
+      <Text
+        style={[
+          styles.count,
+          {
+            color: totalTextCount > 500 ? theme.red : theme.secondary
+          }
+        ]}
+      >
+        {totalTextCount} / 500
+      </Text>
+    ),
+    [totalTextCount]
+  )
+  const headerRight = useCallback(
+    () =>
+      isSubmitting ? (
+        <ActivityIndicator />
+      ) : (
+        <HeaderRight
+          onPress={async () => tootPost()}
+          text={params?.type ? postButtonText[params.type] : '发嘟嘟'}
+          disabled={rawCount < 1 || totalTextCount > 500}
+        />
+      ),
+    [isSubmitting, rawCount, totalTextCount]
+  )
+
   return (
     <KeyboardAvoidingView behavior='padding' style={{ flex: 1 }}>
       <SafeAreaView
@@ -547,45 +593,7 @@ const Compose: React.FC<Props> = ({ route: { params }, navigation }) => {
         <Stack.Navigator>
           <Stack.Screen
             name='PostMain'
-            options={{
-              headerLeft: () => (
-                <HeaderLeft
-                  onPress={() =>
-                    Alert.alert('确认取消编辑？', '', [
-                      { text: '继续编辑', style: 'cancel' },
-                      {
-                        text: '退出编辑',
-                        style: 'destructive',
-                        onPress: () => navigation.goBack()
-                      }
-                    ])
-                  }
-                  text='退出编辑'
-                />
-              ),
-              headerCenter: () => (
-                <Text
-                  style={[
-                    styles.count,
-                    {
-                      color: totalTextCount > 500 ? theme.red : theme.secondary
-                    }
-                  ]}
-                >
-                  {totalTextCount} / 500
-                </Text>
-              ),
-              headerRight: () =>
-                isSubmitting ? (
-                  <ActivityIndicator />
-                ) : (
-                  <HeaderRight
-                    onPress={async () => tootPost()}
-                    text={params?.type ? postButtonText[params.type] : '发嘟嘟'}
-                    disabled={rawCount < 1 || totalTextCount > 500}
-                  />
-                )
-            }}
+            options={{ headerLeft, headerCenter, headerRight }}
           >
             {() => (
               <ComposeContext.Provider