Fix remote toot not interactable

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

@@ -11,7 +11,7 @@ import { usePreferencesQuery } from '@utils/queryHooks/preferences'
 import { StyleConstants } from '@utils/styles/constants'
 import { isLargeDevice } from '@utils/styles/scaling'
 import { chunk } from 'lodash'
-import React, { useContext, useState } from 'react'
+import React, { Fragment, useContext, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Pressable, View } from 'react-native'
 import StatusContext from '../Context'
@@ -72,14 +72,9 @@ const TimelineAttachment = () => {
           }
         default:
           if (
-            attachment.preview_url?.endsWith('.jpg') ||
-            attachment.preview_url?.endsWith('.jpeg') ||
-            attachment.preview_url?.endsWith('.png') ||
-            attachment.preview_url?.endsWith('.gif') ||
-            attachment.remote_url?.endsWith('.jpg') ||
-            attachment.remote_url?.endsWith('.jpeg') ||
-            attachment.remote_url?.endsWith('.png') ||
-            attachment.remote_url?.endsWith('.gif')
+            // https://docs.expo.dev/versions/unversioned/sdk/image/#supported-image-formats
+            attachment.preview_url?.match(/.(?:a?png|jpe?g|webp|avif|heic|gif|svg|ico|icns)$/i) ||
+            attachment.remote_url?.match(/.(?:a?png|jpe?g|webp|avif|heic|gif|svg|ico|icns)$/i)
           ) {
             return {
               id: attachment.id,
@@ -186,6 +181,7 @@ const TimelineAttachment = () => {
     >
       {chunk(status.media_attachments, 2).map((chunk, chunkIndex) => (
         <View
+          key={chunkIndex}
           style={{
             flex: 1,
             flexDirection: 'row',
@@ -195,7 +191,9 @@ const TimelineAttachment = () => {
             gap: StyleConstants.Spacing.XS
           }}
         >
-          {chunk.map((a, aIndex) => mapAttachmentType(a, chunkIndex * 2 + aIndex))}
+          {chunk.map((a, aIndex) => (
+            <Fragment key={aIndex}>{mapAttachmentType(a, chunkIndex * 2 + aIndex)}</Fragment>
+          ))}
         </View>
       ))}
 

src/components/Timeline/index.tsx

@@ -42,6 +42,7 @@ export interface Props {
     'notifyOnChangeProps' | 'getNextPageParam' | 'getPreviousPageParam' | 'select' | 'onSuccess'
   >
   disableRefresh?: boolean
+  refreshAutoRefetch?: boolean
   disableInfinity?: boolean
   readMarker?: 'read_marker_following'
   customProps?: Partial<FlatListProps<any>>
@@ -52,6 +53,7 @@ const Timeline: React.FC<Props> = ({
   queryKey,
   queryOptions,
   disableRefresh = false,
+  refreshAutoRefetch = true,
   disableInfinity = false,
   readMarker = undefined,
   customProps
@@ -154,6 +156,7 @@ const Timeline: React.FC<Props> = ({
       if (
         curr === true &&
         prev === false &&
+        refreshAutoRefetch &&
         !isFetchingPrev.value &&
         fetchingType.value === 0 &&
         shouldAutoFetch.value &&

src/screens/Tabs/Public/Root.tsx

@@ -4,6 +4,7 @@ import Icon from '@components/Icon'
 import CustomText from '@components/Text'
 import Timeline from '@components/Timeline'
 import SegmentedControl from '@react-native-segmented-control/segmented-control'
+import { useScrollToTop } from '@react-navigation/native'
 import { NativeStackScreenProps } from '@react-navigation/native-stack'
 import apiGeneral from '@utils/api/general'
 import { TabPublicStackParamList } from '@utils/navigation/navigators'
@@ -114,11 +115,14 @@ const Explore = ({ route: { key: page } }: { route: { key: 'Explore' } }) => {
     </View>
   )
 
+  useScrollToTop(flRef)
+
   return (
     <Timeline
       flRef={flRef}
       queryKey={queryKey}
       disableRefresh={!remoteActive}
+      refreshAutoRefetch={false}
       customProps={{
         ListHeaderComponent: (
           <View
@@ -400,10 +404,17 @@ const Root: React.FC<NativeStackScreenProps<TabPublicStackParamList, 'Tab-Public
     { key: 'LocalPublic', title: t('tabs.public.segments.federated') },
     { key: 'Explore', title: t('tabs.public.segments.explore') }
   ])
+  const [remoteActive] = useGlobalStorage.string('remote.active')
   useEffect(() => {
     const page = segments[segment]
-    page && navigation.setParams({ queryKey: ['Timeline', { page }] })
-  }, [segment])
+    page &&
+      navigation.setParams({
+        queryKey: [
+          'Timeline',
+          { page, ...(page === 'Explore' && remoteActive && { domain: remoteActive }) }
+        ]
+      })
+  }, [segment, remoteActive])
 
   useEffect(() => {
     navigation.setOptions({

src/screens/Tabs/Shared/Toot.tsx

@@ -29,7 +29,7 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
   const { colors } = useTheme()
   const { t } = useTranslation(['componentTimeline', 'screenTabs'])
 
-  const [hasRemoteContent, setHasRemoteContent] = useState<boolean>(false)
+  const [hasRemoteContent, setHasRemoteContent] = useState<boolean>(toot._remote || false)
   const queryKey: { local: QueryKeyTimeline; remote: QueryKeyTimeline } = {
     local: ['Timeline', { page: 'Toot', toot: toot.id, remote: false }],
     remote: ['Timeline', { page: 'Toot', toot: toot.id, remote: true }]
@@ -70,7 +70,7 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
       headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />,
       headerBackVisible: false
     })
-    navigation.setParams({ toot, queryKey: queryKey.local })
+    navigation.setParams({ queryKey: queryKey.local })
   }, [hasRemoteContent])
 
   const PREV_PER_BATCH = 1
@@ -236,12 +236,15 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
           return
         }
 
-        if ((query.data?.pages[0].body.length || 0) < data.length) {
+        if ((query.data?.pages[0].body.length || 0) <= data.length) {
+          if (!hasRemoteContent && (query.data?.pages[0].body.length || 0) <= data.length) {
+            setHasRemoteContent(true)
+          }
+
           queryClient.cancelQueries(queryKey.local)
           queryClient.setQueryData<{ pages: { body: Mastodon.Status[] }[] }>(
             queryKey.local,
             old => {
-              setHasRemoteContent(true)
               return {
                 pages: [
                   {
@@ -350,7 +353,7 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
             ) : null}
             <TimelineDefault
               item={item}
-              queryKey={item._remote ? queryKey.remote : queryKey.local}
+              queryKey={queryKey.local}
               highlighted={toot.id === item.id}
               suppressSpoiler={
                 toot.id !== item.id &&