Upload GIF using Android keyboard

https://github.com/tooot-app/app/issues/261

src/screens/Compose.tsx

@@ -1,4 +1,3 @@
-import apiInstance from '@api/instance'
 import analytics from '@components/analytics'
 import { HeaderLeft, HeaderRight } from '@components/Header'
 import { createNativeStackNavigator } from '@react-navigation/native-stack'

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

@@ -5,6 +5,7 @@ import Icon from '@components/Icon'
 import CustomText from '@components/Text'
 import { useActionSheet } from '@expo/react-native-action-sheet'
 import { useNavigation } from '@react-navigation/native'
+import { getInstanceConfigurationStatusMaxAttachments } from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import layoutAnimation from '@utils/styles/layoutAnimation'
 import { useTheme } from '@utils/styles/ThemeManager'
@@ -17,8 +18,10 @@ import React, {
   useRef
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import { FlatList, Image, Pressable, StyleSheet, View } from 'react-native'
+import { FlatList, Pressable, StyleSheet, View } from 'react-native'
 import { Circle } from 'react-native-animated-spinkit'
+import FastImage from 'react-native-fast-image'
+import { useSelector } from 'react-redux'
 import ComposeContext from '../../utils/createContext'
 import { ExtendedAttachment } from '../../utils/types'
 import chooseAndUploadAttachment from './addAttachment'
@@ -33,9 +36,14 @@ const ComposeAttachments: React.FC<Props> = ({ accessibleRefAttachments }) => {
   const { showActionSheetWithOptions } = useActionSheet()
   const { composeState, composeDispatch } = useContext(ComposeContext)
   const { t } = useTranslation('screenCompose')
-  const { colors, mode } = useTheme()
+  const { colors } = useTheme()
   const navigation = useNavigation<any>()
 
+  const maxAttachments = useSelector(
+    getInstanceConfigurationStatusMaxAttachments,
+    () => true
+  )
+
   const flatListRef = useRef<FlatList>(null)
 
   const sensitiveOnPress = useCallback(() => {
@@ -124,7 +132,7 @@ const ComposeAttachments: React.FC<Props> = ({ accessibleRefAttachments }) => {
             width: calculateWidth(item)
           }}
         >
-          <Image
+          <FastImage
             style={{ width: '100%', height: '100%' }}
             source={{
               uri: item.local?.local_thumbnail || item.remote?.preview_url
@@ -320,7 +328,9 @@ const ComposeAttachments: React.FC<Props> = ({ accessibleRefAttachments }) => {
           item.local?.uri || item.remote?.url || Math.random().toString()
         }
         ListFooterComponent={
-          composeState.attachments.uploads.length < 4 ? listFooter : null
+          composeState.attachments.uploads.length < maxAttachments
+            ? listFooter
+            : null
         }
       />
     </View>

src/screens/Compose/Root/Header/TextInput.tsx

@@ -1,17 +1,25 @@
 import CustomText from '@components/Text'
+import { getInstanceConfigurationStatusMaxAttachments } from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useContext } from 'react'
 import { useTranslation } from 'react-i18next'
-import { TextInput } from 'react-native'
+import { Alert, TextInput } from 'react-native'
+import { useSelector } from 'react-redux'
 import formatText from '../../formatText'
 import ComposeContext from '../../utils/createContext'
+import { uploadAttachment } from '../Footer/addAttachment'
 
 const ComposeTextInput: React.FC = () => {
   const { composeState, composeDispatch } = useContext(ComposeContext)
   const { t } = useTranslation('screenCompose')
   const { colors, mode } = useTheme()
 
+  const maxAttachments = useSelector(
+    getInstanceConfigurationStatusMaxAttachments,
+    () => true
+  )
+
   return (
     <TextInput
       keyboardAppearance={mode}
@@ -54,6 +62,36 @@ const ComposeTextInput: React.FC = () => {
       }}
       ref={composeState.textInputFocus.refs.text}
       scrollEnabled={false}
+      onImageChange={({ nativeEvent }) => {
+        if (composeState.attachments.uploads.length >= maxAttachments) {
+          Alert.alert(
+            t(
+              'content.root.header.textInput.keyboardImage.exceedMaximum.title'
+            ),
+            undefined,
+            [
+              {
+                text: t(
+                  'content.root.header.textInput.keyboardImage.exceedMaximum.OK'
+                ),
+                style: 'default'
+              }
+            ]
+          )
+          return
+        }
+        if (nativeEvent.linkUri) {
+          uploadAttachment({
+            composeDispatch,
+            imageInfo: {
+              uri: nativeEvent.linkUri,
+              type: 'image',
+              width: 100,
+              height: 100
+            }
+          })
+        }
+      }}
     >
       <CustomText>{composeState.text.formatted}</CustomText>
     </TextInput>

src/screens/Tabs/Shared/Account/Information/Account.tsx

@@ -31,7 +31,7 @@ const AccountInformationAccount: React.FC<Props> = ({
   const instanceUri = useSelector(getInstanceUri)
 
   const { data: relationship } = useRelationshipQuery({
-    id: account!.id,
+    id: account?.id || '',
     options: { enabled: account !== undefined }
   })