Added reduced motion

src/screens/Compose/Root.tsx

@@ -4,14 +4,8 @@ import { useSearchQuery } from '@utils/queryHooks/search'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import { forEach, groupBy, sortBy } from 'lodash'
-import React, {
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef
-} from 'react'
-import { FlatList, Image, StyleSheet, View } from 'react-native'
+import React, { useCallback, useContext, useEffect, useMemo } from 'react'
+import { FlatList, StyleSheet, View } from 'react-native'
 import { Circle } from 'react-native-animated-spinkit'
 import ComposeActions from './Root/Actions'
 import ComposePosting from './Posting'
@@ -20,24 +14,32 @@ import ComposeRootHeader from './Root/Header'
 import ComposeRootSuggestion from './Root/Suggestion'
 import ComposeContext from './utils/createContext'
 import ComposeDrafts from './Root/Drafts'
+import FastImage from 'react-native-fast-image'
+import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
 
 const prefetchEmojis = (
-  sortedEmojis: { title: string; data: Mastodon.Emoji[] }[]
+  sortedEmojis: { title: string; data: Mastodon.Emoji[] }[],
+  reduceMotionEnabled: boolean
 ) => {
+  const prefetches: { uri: string }[] = []
   let requestedIndex = 0
   sortedEmojis.forEach(sorted => {
     sorted.data.forEach(emoji => {
       if (requestedIndex > 40) {
         return
       }
-      Image.prefetch(emoji.url)
+      prefetches.push({
+        uri: reduceMotionEnabled ? emoji.static_url : emoji.url
+      })
       requestedIndex++
     })
   })
+  FastImage.preload(prefetches)
 }
 
 const ComposeRoot = React.memo(
   () => {
+    const { reduceMotionEnabled } = useAccessibility()
     const { theme } = useTheme()
 
     const { composeState, composeDispatch } = useContext(ComposeContext)
@@ -74,9 +76,9 @@ const ComposeRoot = React.memo(
           type: 'emoji',
           payload: { ...composeState.emoji, emojis: sortedEmojis }
         })
-        prefetchEmojis(sortedEmojis)
+        prefetchEmojis(sortedEmojis, reduceMotionEnabled)
       }
-    }, [emojisData])
+    }, [emojisData, reduceMotionEnabled])
 
     const listEmpty = useMemo(() => {
       if (isFetching) {

src/screens/Compose/Root/Footer/Emojis.tsx

@@ -3,18 +3,15 @@ import haptics from '@components/haptics'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useCallback, useContext, useMemo } from 'react'
-import {
-  Image,
-  Pressable,
-  SectionList,
-  StyleSheet,
-  Text,
-  View
-} from 'react-native'
+import { Pressable, SectionList, StyleSheet, Text, View } from 'react-native'
 import ComposeContext from '../../utils/createContext'
 import updateText from '../../updateText'
+import FastImage from 'react-native-fast-image'
+import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
 
 const SingleEmoji = ({ emoji }: { emoji: Mastodon.Emoji }) => {
+  const { reduceMotionEnabled } = useAccessibility()
+
   const { composeState, composeDispatch } = useContext(ComposeContext)
   const onPress = useCallback(() => {
     analytics('compose_emoji_add')
@@ -32,8 +29,8 @@ const SingleEmoji = ({ emoji }: { emoji: Mastodon.Emoji }) => {
   }, [composeState])
   const children = useMemo(
     () => (
-      <Image
-        source={{ uri: emoji.url, cache: 'force-cache' }}
+      <FastImage
+        source={{ uri: reduceMotionEnabled ? emoji.static_url : emoji.url }}
         style={styles.emoji}
       />
     ),
@@ -81,6 +78,7 @@ const ComposeEmojis: React.FC = () => {
         keyExtractor={item => item.shortcode}
         renderSectionHeader={listHeader}
         renderItem={listItem}
+        windowSize={3}
       />
     </View>
   )