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,17 +537,8 @@ const Compose: React.FC<Props> = ({ route: { params }, navigation }) => {
     edit: '发嘟嘟'
   }
 
-  return (
+  const headerLeft = useCallback(
-    <KeyboardAvoidingView behavior='padding' style={{ flex: 1 }}>
+    () => (
-      <SafeAreaView
-        style={{ flex: 1 }}
-        edges={hasKeyboard ? ['left', 'right'] : ['left', 'right', 'bottom']}
-      >
-        <Stack.Navigator>
-          <Stack.Screen
-            name='PostMain'
-            options={{
-              headerLeft: () => (
       <HeaderLeft
         onPress={() =>
           Alert.alert('确认取消编辑？', '', [
@@ -563,7 +553,10 @@ const Compose: React.FC<Props> = ({ route: { params }, navigation }) => {
         text='退出编辑'
       />
     ),
-              headerCenter: () => (
+    []
+  )
+  const headerCenter = useCallback(
+    () => (
       <Text
         style={[
           styles.count,
@@ -575,7 +568,10 @@ const Compose: React.FC<Props> = ({ route: { params }, navigation }) => {
         {totalTextCount} / 500
       </Text>
     ),
-              headerRight: () =>
+    [totalTextCount]
+  )
+  const headerRight = useCallback(
+    () =>
       isSubmitting ? (
         <ActivityIndicator />
       ) : (
@@ -584,8 +580,20 @@ const Compose: React.FC<Props> = ({ route: { params }, navigation }) => {
           text={params?.type ? postButtonText[params.type] : '发嘟嘟'}
           disabled={rawCount < 1 || totalTextCount > 500}
         />
+      ),
+    [isSubmitting, rawCount, totalTextCount]
   )
-            }}
+
+  return (
+    <KeyboardAvoidingView behavior='padding' style={{ flex: 1 }}>
+      <SafeAreaView
+        style={{ flex: 1 }}
+        edges={hasKeyboard ? ['left', 'right'] : ['left', 'right', 'bottom']}
+      >
+        <Stack.Navigator>
+          <Stack.Screen
+            name='PostMain'
+            options={{ headerLeft, headerCenter, headerRight }}
           >
             {() => (
               <ComposeContext.Provider