Updates

src/components/GracefullyImage.tsx

@@ -3,7 +3,6 @@ import React, { useCallback, useMemo, useState } from 'react'
 import { Pressable, StyleProp, StyleSheet, ViewStyle } from 'react-native'
 import { Blurhash } from 'react-native-blurhash'
 import FastImage, { ImageStyle } from 'react-native-fast-image'
-import { SharedElement } from 'react-navigation-shared-element'
 import { useTheme } from '@utils/styles/ThemeManager'
 
 export interface Props {
@@ -73,23 +72,12 @@ const GracefullyImage = React.memo(
     const children = useCallback(() => {
       return (
         <>
-          {sharedElement ? (
-            <SharedElement id={`image.${sharedElement}`} style={[styles.image]}>
-              <FastImage
-                source={{ uri: sourceUri }}
-                style={[styles.image, imageStyle]}
-                onLoad={onLoad}
-                onError={onError}
-              />
-            </SharedElement>
-          ) : (
-            <FastImage
-              source={{ uri: sourceUri }}
-              style={[styles.image, imageStyle]}
-              onLoad={onLoad}
-              onError={onError}
-            />
-          )}
+          <FastImage
+            source={{ uri: sourceUri }}
+            style={[styles.image, imageStyle]}
+            onLoad={onLoad}
+            onError={onError}
+          />
           {blurhash &&
           (hidden || !(previewLoaded || originalLoaded || remoteLoaded)) ? (
             <Blurhash

src/components/Header/Center.tsx

@@ -5,16 +5,20 @@ import { StyleSheet, Text } from 'react-native'
 
 export interface Props {
   content: string
+  inverted?: boolean
 }
 
 // Used for Android mostly
 const HeaderCenter = React.memo(
-  ({ content }: Props) => {
+  ({ content, inverted = false }: Props) => {
     const { theme } = useTheme()
 
     return (
       <Text
-        style={[styles.text, { color: theme.primary }]}
+        style={[
+          styles.text,
+          { color: inverted ? theme.primaryOverlay : theme.primary }
+        ]}
         children={content}
       />
     )

src/components/Instance.tsx

@@ -29,7 +29,7 @@ const ComponentInstance: React.FC<Props> = ({
   const { t } = useTranslation('componentInstance')
   const { theme } = useTheme()
 
-  const localInstances = useSelector(getLocalInstances)
+  const localInstances = useSelector(getLocalInstances, () => true)
   const [instanceDomain, setInstanceDomain] = useState<string>()
 
   const instanceQuery = useInstanceQuery({

src/components/Timeline.tsx

@@ -1,6 +1,7 @@
 import ComponentSeparator from '@components/Separator'
 import { useScrollToTop } from '@react-navigation/native'
 import { QueryKeyTimeline, useTimelineQuery } from '@utils/queryHooks/timeline'
+import { getLocalActiveIndex } from '@utils/slices/instancesSlice'
 import { StyleConstants } from '@utils/styles/constants'
 import { findIndex } from 'lodash'
 import React, { useCallback, useEffect, useMemo, useRef } from 'react'
@@ -12,6 +13,7 @@ import Animated, {
   withTiming
 } from 'react-native-reanimated'
 import { InfiniteData, useQueryClient } from 'react-query'
+import { useSelector } from 'react-redux'
 import TimelineConversation from './Timeline/Conversation'
 import TimelineDefault from './Timeline/Default'
 import TimelineEmpty from './Timeline/Empty'
@@ -40,6 +42,8 @@ const Timeline: React.FC<Props> = ({
   disableInfinity = false,
   customProps
 }) => {
+  // Update timeline when account switched
+  useSelector(getLocalActiveIndex)
   const queryKeyParams = {
     page,
     ...(hashtag && { hashtag }),
@@ -218,7 +222,7 @@ const Timeline: React.FC<Props> = ({
         ref={flRef}
         windowSize={8}
         data={flattenData}
-        initialNumToRender={3}
+        initialNumToRender={6}
         maxToRenderPerBatch={3}
         style={styles.flatList}
         renderItem={renderItem}

src/components/Timeline/Conversation.tsx

@@ -58,7 +58,10 @@ const TimelineConversation: React.FC<Props> = ({
   queryKey,
   highlighted = false
 }) => {
-  const localAccount = useSelector(getLocalAccount)
+  const localAccount = useSelector(
+    getLocalAccount,
+    (prev, next) => prev?.id === next?.id
+  )
   const { theme } = useTheme()
 
   const queryClient = useQueryClient()

src/components/Timeline/Default.tsx

@@ -36,7 +36,10 @@ const TimelineDefault: React.FC<Props> = ({
   disableOnPress = false
 }) => {
   const { theme } = useTheme()
-  const localAccount = useSelector(getLocalAccount)
+  const localAccount = useSelector(
+    getLocalAccount,
+    (prev, next) => prev?.id === next?.id
+  )
   const navigation = useNavigation<
     StackNavigationProp<Nav.TabLocalStackParamList>
   >()

src/components/Timeline/Notifications.tsx

@@ -29,7 +29,10 @@ const TimelineNotifications: React.FC<Props> = ({
   highlighted = false
 }) => {
   const { theme } = useTheme()
-  const localAccount = useSelector(getLocalAccount)
+  const localAccount = useSelector(
+    getLocalAccount,
+    (prev, next) => prev?.id === next?.id
+  )
   const navigation = useNavigation<
     StackNavigationProp<Nav.TabLocalStackParamList>
   >()