Fix bugs

src/components/GracefullyImage.tsx

@@ -61,7 +61,7 @@ const GracefullyImage = ({
         placeholderContentFit='cover'
         placeholder={sources.blurhash || connectMedia(sources.preview)}
         source={hidden ? undefined : connectMedia(source)}
-        {...((!withoutTransition || !reduceMotionEnabled) && { transition: { duration: 120 } })}
+        {...(!withoutTransition && !reduceMotionEnabled && { transition: { duration: 120 } })}
         style={{ flex: 1, ...imageStyle }}
         onError={() => {
           if (

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

@@ -17,13 +17,8 @@ import { Pressable, View } from 'react-native'
 import StatusContext from '../Context'
 
 const TimelineAttachment = () => {
-  const { status, disableDetails } = useContext(StatusContext)
-  if (
-    !status ||
-    disableDetails ||
-    !Array.isArray(status.media_attachments) ||
-    !status.media_attachments.length
-  )
+  const { status, spoilerHidden, disableDetails } = useContext(StatusContext)
+  if (!status || !Array.isArray(status.media_attachments) || !status.media_attachments.length)
     return null
 
   const { t } = useTranslation('componentTimeline')
@@ -170,6 +165,8 @@ const TimelineAttachment = () => {
     }
   }
 
+  if (spoilerHidden || disableDetails) return null
+
   return (
     <View style={{ marginTop: StyleConstants.Spacing.M, ...(isLargeDevice && { maxWidth: 375 }) }}>
       <View style={{ gap: StyleConstants.Spacing.XS }}>

src/components/Timeline/index.tsx

@@ -167,12 +167,12 @@ const Timeline: React.FC<Props> = ({
     }
   )
 
-  const latestMarker = useRef<string>()
+  const latestMarker = useRef<string>('')
   const updateMarkers = useCallback(
     throttle(() => {
       if (readMarker) {
         const currentMarker = getAccountStorage.string(readMarker) || '0'
-        if ((latestMarker.current || '0') > currentMarker) {
+        if (latestMarker.current > currentMarker) {
           setAccountStorage([{ key: readMarker, value: latestMarker.current }])
         } else {
           // setAccountStorage([{ key: readMarker, value: '105250709762254246' }])
@@ -183,9 +183,12 @@ const Timeline: React.FC<Props> = ({
   )
   readMarker &&
     useEffect(() => {
-      const unsubscribe = navigation.addListener('blur', () =>
-        setAccountStorage([{ key: readMarker, value: latestMarker.current }])
-      )
+      const unsubscribe = navigation.addListener('blur', () => {
+        const currentMarker = getAccountStorage.string(readMarker) || '0'
+        if (latestMarker.current > currentMarker) {
+          setAccountStorage([{ key: readMarker, value: latestMarker.current }])
+        }
+      })
       return unsubscribe
     }, [])
   const viewabilityConfigCallbackPairs = useRef<

src/screens/Tabs/Public/Root.tsx

@@ -124,6 +124,8 @@ const Explore = ({ route: { key: page } }: { route: { key: 'Explore' } }) => {
       disableRefresh={!remoteActive}
       refreshAutoRefetch={false}
       customProps={{
+        stickyHeaderIndices: [0],
+        stickyHeaderHiddenOnScroll: true,
         ListHeaderComponent: (
           <View
             style={{ backgroundColor: colors.backgroundDefault }}
@@ -279,7 +281,8 @@ const Explore = ({ route: { key: page } }: { route: { key: 'Explore' } }) => {
                         alignItems: 'center',
                         justifyContent: 'center',
                         gap: StyleConstants.Spacing.XS,
-                        paddingTop: StyleConstants.Spacing.M
+                        paddingTop: StyleConstants.Spacing.S,
+                        paddingBottom: StyleConstants.Spacing.M
                       }}
                     >
                       <CustomText

src/screens/Tabs/Shared/Toot.tsx

@@ -35,7 +35,7 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
     remote: ['Timeline', { page: 'Toot', toot: toot.id, remote: true }]
   }
 
-  const flRef = useRef<FlatList<Mastodon.Status & { _level?: number; key?: string }>>(null)
+  const flRef = useRef<FlatList<Mastodon.Status & { _level?: number }>>(null)
 
   useEffect(() => {
     navigation.setOptions({
@@ -74,7 +74,7 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
   }, [hasRemoteContent])
 
   const PREV_PER_BATCH = 1
-  const ancestorsCache = useRef<(Mastodon.Status & { _level?: number; key?: string })[]>()
+  const ancestorsCache = useRef<(Mastodon.Status & { _level?: number })[]>()
   const loaded = useRef<boolean>(false)
   const prependContent = async () => {
     loaded.current = true
@@ -126,7 +126,7 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
     ['public', 'unlisted'].includes(toot.visibility) &&
     match?.domain !== getAccountStorage.string('auth.domain')
   const query = useQuery<{
-    pages: { body: (Mastodon.Status & { _level?: number; key?: string })[] }[]
+    pages: { body: (Mastodon.Status & { _level?: number })[] }[]
   }>(
     queryKey.local,
     async () => {
@@ -160,7 +160,6 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
       }
     },
     {
-      placeholderData: { pages: [{ body: [{ ...toot, _level: 0, key: `${toot.id}_cache` }] }] },
       enabled: !toot._remote,
       staleTime: 0,
       refetchOnMount: true,
@@ -255,11 +254,7 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
                     body: data.map(remote => {
                       const localMatch = old?.pages[0].body.find(local => local.uri === remote.uri)
                       if (localMatch) {
-                        return {
-                          ...localMatch,
-                          _level: remote._level,
-                          key: `${localMatch.id}_remote`
-                        }
+                        return { ...localMatch, _level: remote._level }
                       } else {
                         return appendRemote.status(remote)
                       }
@@ -285,7 +280,7 @@ const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
     <FlatList
       ref={flRef}
       data={query.data?.pages?.[0].body}
-      extraData={query.dataUpdatedAt}
+      keyExtractor={(item, index) => `${item.id}_${index}`}
       renderItem={({ item, index }) => {
         const prev = query.data?.pages[0].body[index - 1]?._level || 0
         const curr = item._level || 0