diff --git a/native/chat/message-list-types.js b/native/chat/message-list-types.js
index 7c1b3f910..b4acf2b53 100644
--- a/native/chat/message-list-types.js
+++ b/native/chat/message-list-types.js
@@ -1,92 +1,128 @@
 // @flow
 
-import { useNavigation } from '@react-navigation/native';
+import { useNavigation, useNavigationState } from '@react-navigation/native';
 import invariant from 'invariant';
 import * as React from 'react';
 
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 import { type UserInfo } from 'lib/types/user-types.js';
 
+import { ChatContext } from './chat-context.js';
 import type { ChatRouterNavigationAction } from './chat-router.js';
 import type { MarkdownRules } from '../markdown/rules.react.js';
 import { useTextMessageRulesFunc } from '../markdown/rules.react.js';
-import { MessageListRouteName } from '../navigation/route-names.js';
+import {
+  MessageListRouteName,
+  TextMessageTooltipModalRouteName,
+} from '../navigation/route-names.js';
 
 export type MessageListParams = {
   +threadInfo: ThreadInfo,
   +pendingPersonalThreadUserInfo?: UserInfo,
   +searching?: boolean,
   +removeEditMode?: ?RemoveEditMode,
 };
 
 export type RemoveEditMode = (
   action: ChatRouterNavigationAction,
 ) => 'ignore_action' | 'reduce_action';
 
 export type MessageListContextType = {
   +getTextMessageMarkdownRules: (useDarkStyle: boolean) => MarkdownRules,
 };
 
 const MessageListContext: React.Context<?MessageListContextType> =
   React.createContext<?MessageListContextType>();
 
 function useMessageListContext(threadInfo: ThreadInfo) {
   const getTextMessageMarkdownRules = useTextMessageRulesFunc(threadInfo);
   return React.useMemo(
     () => ({
       getTextMessageMarkdownRules,
     }),
     [getTextMessageMarkdownRules],
   );
 }
 
 type Props = {
   +children: React.Node,
   +threadInfo: ThreadInfo,
 };
 function MessageListContextProvider(props: Props): React.Node {
   const context = useMessageListContext(props.threadInfo);
   return (
     <MessageListContext.Provider value={context}>
       {props.children}
     </MessageListContext.Provider>
   );
 }
 
 type NavigateToThreadAction = {
   +name: typeof MessageListRouteName,
   +params: MessageListParams,
   +key: string,
 };
 function createNavigateToThreadAction(
   params: MessageListParams,
 ): NavigateToThreadAction {
   return {
     name: MessageListRouteName,
     params,
     key: `${MessageListRouteName}${params.threadInfo.id}`,
   };
 }
 
 function useNavigateToThread(): (params: MessageListParams) => void {
   const { navigate } = useNavigation();
   return React.useCallback(
     (params: MessageListParams) => {
       navigate<'MessageList'>(createNavigateToThreadAction(params));
     },
     [navigate],
   );
 }
 
 function useTextMessageMarkdownRules(useDarkStyle: boolean): MarkdownRules {
   const messageListContext = React.useContext(MessageListContext);
   invariant(messageListContext, 'DummyTextNode should have MessageListContext');
   return messageListContext.getTextMessageMarkdownRules(useDarkStyle);
 }
 
+function useNavigateToThreadWithFadeAnimation(
+  threadInfo: ThreadInfo,
+  messageKey: ?string,
+): () => mixed {
+  const chatContext = React.useContext(ChatContext);
+  invariant(chatContext, 'ChatContext should be set');
+  const {
+    setCurrentTransitionSidebarSourceID: setSidebarSourceID,
+    setSidebarAnimationType,
+  } = chatContext;
+  const navigateToThread = useNavigateToThread();
+  const navigationStack = useNavigationState(state => state.routes);
+  return React.useCallback(() => {
+    if (
+      navigationStack[navigationStack.length - 1].name ===
+      TextMessageTooltipModalRouteName
+    ) {
+      setSidebarSourceID(messageKey);
+      setSidebarAnimationType('fade_source_message');
+    }
+    navigateToThread({ threadInfo });
+  }, [
+    messageKey,
+    navigateToThread,
+    navigationStack,
+    setSidebarAnimationType,
+    setSidebarSourceID,
+    threadInfo,
+  ]);
+}
+
 export {
   MessageListContextProvider,
   createNavigateToThreadAction,
   useNavigateToThread,
   useTextMessageMarkdownRules,
+  useNavigateToThreadWithFadeAnimation,
 };
diff --git a/native/markdown/markdown-chat-mention.react.js b/native/markdown/markdown-chat-mention.react.js
index 5f496867c..6c53c783d 100644
--- a/native/markdown/markdown-chat-mention.react.js
+++ b/native/markdown/markdown-chat-mention.react.js
@@ -1,31 +1,41 @@
 // @flow
 
 import * as React from 'react';
 import { Text, StyleSheet } from 'react-native';
 
+import type { ResolvedThreadInfo } from 'lib/types/thread-types.js';
+
 import { useMarkdownOnPressUtils } from './markdown-utils.js';
+import { useNavigateToThreadWithFadeAnimation } from '../chat/message-list-types.js';
 
 type TextProps = React.ElementConfig<typeof Text>;
 type Props = {
+  +threadInfo: ResolvedThreadInfo,
   +children: React.Node,
   ...TextProps,
 };
 function MarkdownChatMention(props: Props): React.Node {
-  const { ...rest } = props;
-  const { isRevealed, onLongPressHandler } = useMarkdownOnPressUtils();
+  const { threadInfo, ...rest } = props;
+  const { messageKey, isRevealed, onLongPressHandler } =
+    useMarkdownOnPressUtils();
+  const onPressHandler = useNavigateToThreadWithFadeAnimation(
+    threadInfo,
+    messageKey,
+  );
   return (
     <Text
+      onPress={isRevealed ? onPressHandler : null}
       onLongPress={isRevealed ? onLongPressHandler : null}
       style={styles.mention}
       {...rest}
     />
   );
 }
 
 const styles = StyleSheet.create({
   mention: {
     fontWeight: 'bold',
   },
 });
 
 export default MarkdownChatMention;