Fixed #539

Respect system's reduced motion enabled setting

src/components/Timeline/Shared/Attachment/Video.tsx

@@ -7,6 +7,7 @@ import { Blurhash } from 'react-native-blurhash'
 import attachmentAspectRatio from './aspectRatio'
 import AttachmentAltText from './AltText'
 import { Platform } from 'expo-modules-core'
+import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
 
 export interface Props {
   total: number
@@ -23,6 +24,8 @@ const AttachmentVideo: React.FC<Props> = ({
   video,
   gifv = false
 }) => {
+  const { reduceMotionEnabled } = useAccessibility()
+
   const videoPlayer = useRef<Video>(null)
   const [videoLoading, setVideoLoading] = useState(false)
   const [videoLoaded, setVideoLoaded] = useState(false)
@@ -57,7 +60,7 @@ const AttachmentVideo: React.FC<Props> = ({
         resizeMode={videoResizeMode}
         {...(gifv
           ? {
-              shouldPlay: true,
+              shouldPlay: reduceMotionEnabled ? false : true,
               isMuted: true,
               isLooping: true,
               source: { uri: video.url }
@@ -70,10 +73,10 @@ const AttachmentVideo: React.FC<Props> = ({
         onFullscreenUpdate={event => {
           if (event.fullscreenUpdate === VideoFullscreenUpdate.PLAYER_DID_DISMISS) {
             Platform.OS === 'android' && setVideoResizeMode(ResizeMode.COVER)
-            if (!gifv) {
+            if (gifv && !reduceMotionEnabled) {
-              videoPlayer.current?.pauseAsync()
-            } else {
               videoPlayer.current?.playAsync()
+            } else {
+              videoPlayer.current?.pauseAsync()
             }
           }
         }}
@@ -103,7 +106,7 @@ const AttachmentVideo: React.FC<Props> = ({
           video.blurhash ? (
             <Blurhash blurhash={video.blurhash} style={{ width: '100%', height: '100%' }} />
           ) : null
-        ) : !gifv ? (
+        ) : !gifv || (gifv && reduceMotionEnabled) ? (
           <Button
             round
             overlay

src/screens/Tabs/Local.tsx

@@ -6,8 +6,7 @@ import { ScreenTabsScreenProps, TabLocalStackParamList } from '@utils/navigation
 import usePopToTop from '@utils/navigation/usePopToTop'
 import { useListsQuery } from '@utils/queryHooks/lists'
 import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
-import layoutAnimation from '@utils/styles/layoutAnimation'
+import React, { useState } from 'react'
-import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import * as DropdownMenu from 'zeego/dropdown-menu'
 import TabShared from './Shared'
@@ -19,9 +18,6 @@ const TabLocal = React.memo(
     const { t } = useTranslation('screenTabs')
 
     const { data: lists } = useListsQuery({})
-    useEffect(() => {
-      layoutAnimation()
-    }, [lists?.length])
 
     const [queryKey, setQueryKey] = useState<QueryKeyTimeline>(['Timeline', { page: 'Following' }])
 

src/utils/styles/layoutAnimation.ts

@@ -1,6 +1,10 @@
-import { LayoutAnimation } from 'react-native'
+import { AccessibilityInfo, LayoutAnimation } from 'react-native'
+
+const layoutAnimation = async () => {
+  const disable = await AccessibilityInfo.isReduceMotionEnabled()
+  if (disable) return
 
-const layoutAnimation = () =>
   LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
+}
 
 export default layoutAnimation