diff --git a/native/chat/chat-options.js b/native/chat/chat-options.js
new file mode 100644
--- /dev/null
+++ b/native/chat/chat-options.js
@@ -0,0 +1,28 @@
+// @flow
+
+import * as React from 'react';
+
+import { threadSettingsNotificationsCopy } from 'lib/shared/thread-settings-notifications-utils.js';
+
+import SWMansionIcon from '../components/swmansion-icon.react.js';
+
+const homeChatThreadListOptions: {
+  +title: string,
+  +tabBarIcon: ({ +color: string, ... }) => React.Node,
+} = {
+  title: threadSettingsNotificationsCopy.HOME,
+  tabBarIcon: ({ color }) => (
+    <SWMansionIcon name="home-1" size={22} style={{ color }} />
+  ),
+};
+const backgroundChatThreadListOptions: {
+  +title: string,
+  +tabBarIcon: ({ +color: string, ... }) => React.Node,
+} = {
+  title: threadSettingsNotificationsCopy.MUTED,
+  tabBarIcon: ({ color }) => (
+    <SWMansionIcon name="bell-disabled" size={22} style={{ color }} />
+  ),
+};
+
+export { backgroundChatThreadListOptions, homeChatThreadListOptions };
diff --git a/native/chat/chat-tab-bar.react.js b/native/chat/chat-tab-bar.react.js
new file mode 100644
--- /dev/null
+++ b/native/chat/chat-tab-bar.react.js
@@ -0,0 +1,73 @@
+// @flow
+
+import type {
+  MaterialTopTabBarProps,
+  Route,
+  TabBarItemProps,
+} from '@react-navigation/core';
+import { MaterialTopTabBar } from '@react-navigation/material-top-tabs';
+import invariant from 'invariant';
+import * as React from 'react';
+import { View } from 'react-native';
+import { TabBarItem } from 'react-native-tab-view';
+
+import {
+  nuxTip,
+  NUXTipsContext,
+} from '../components/nux-tips-context.react.js';
+import {
+  HomeChatThreadListRouteName,
+  BackgroundChatThreadListRouteName,
+} from '../navigation/route-names.js';
+
+const ButtonTitleToTip = Object.freeze({
+  [BackgroundChatThreadListRouteName]: nuxTip.MUTED,
+  [HomeChatThreadListRouteName]: nuxTip.HOME,
+});
+
+function TabBarButton(props: TabBarItemProps<Route<>>) {
+  const tipsContext = React.useContext(NUXTipsContext);
+  invariant(tipsContext, 'NUXTipsContext should be defined');
+
+  const viewRef = React.useRef<?React.ElementRef<typeof View>>();
+  const onLayout = React.useCallback(() => {
+    const button = viewRef.current;
+    if (!button) {
+      return;
+    }
+
+    const tipType = ButtonTitleToTip[props.route.name];
+    if (!tipType) {
+      return;
+    }
+    button.measure((x, y, width, height, pageX, pageY) => {
+      tipsContext.registerTipButton(tipType, {
+        x,
+        y,
+        width,
+        height,
+        pageX,
+        pageY,
+      });
+    });
+  }, [props.route.name, tipsContext]);
+
+  return (
+    <View ref={viewRef} onLayout={onLayout}>
+      <TabBarItem {...props} />
+    </View>
+  );
+}
+
+export default function TabBarTop(
+  props: MaterialTopTabBarProps<Route<>>,
+): React.Node {
+  const renderTabBarItem = React.useCallback(
+    (innerProps: $ReadOnly<{ ...TabBarItemProps<Route<>>, key: string }>) => (
+      <TabBarButton {...innerProps} />
+    ),
+    [],
+  );
+
+  return <MaterialTopTabBar {...props} renderTabBarItem={renderTabBarItem} />;
+}
diff --git a/native/chat/chat.react.js b/native/chat/chat.react.js
--- a/native/chat/chat.react.js
+++ b/native/chat/chat.react.js
@@ -34,10 +34,15 @@
 
 import BackgroundChatThreadList from './background-chat-thread-list.react.js';
 import ChatHeader from './chat-header.react.js';
+import {
+  backgroundChatThreadListOptions,
+  homeChatThreadListOptions,
+} from './chat-options.js';
 import ChatRouter, {
   type ChatRouterNavigationHelpers,
   type ChatRouterNavigationAction,
 } from './chat-router.js';
+import TabBar from './chat-tab-bar.react.js';
 import ComposeSubchannel from './compose-subchannel.react.js';
 import ComposeThreadButton from './compose-thread-button.react.js';
 import FullScreenThreadMediaGallery from './fullscreen-thread-media-gallery.react.js';
@@ -58,7 +63,6 @@
   nuxTip,
   NUXTipsContext,
 } from '../components/nux-tips-context.react.js';
-import SWMansionIcon from '../components/swmansion-icon.react.js';
 import { InputStateContext } from '../input/input-state.js';
 import CommunityDrawerButton from '../navigation/community-drawer-button.react.js';
 import HeaderBackButton from '../navigation/header-back-button.react.js';
@@ -119,19 +123,6 @@
 export type ChatTopTabsNavigationHelpers =
   MaterialTopTabNavigationHelpers<ScreenParamList>;
 
-const homeChatThreadListOptions = {
-  title: threadSettingsNotificationsCopy.HOME,
-  tabBarIcon: ({ color }: { +color: string, ... }) => (
-    <SWMansionIcon name="home-1" size={22} style={{ color }} />
-  ),
-};
-const backgroundChatThreadListOptions = {
-  title: threadSettingsNotificationsCopy.MUTED,
-  tabBarIcon: ({ color }: { +color: string, ... }) => (
-    <SWMansionIcon name="bell-disabled" size={22} style={{ color }} />
-  ),
-};
-
 const ChatThreadsTopTab = createMaterialTopTabNavigator<
   ScreenParamList,
   ChatTopTabsParamList,
@@ -156,8 +147,9 @@
     }),
     [tabBarAccent, tabBarBackground],
   );
+
   return (
-    <ChatThreadsTopTab.Navigator screenOptions={screenOptions}>
+    <ChatThreadsTopTab.Navigator screenOptions={screenOptions} tabBar={TabBar}>
       <ChatThreadsTopTab.Screen
         name={HomeChatThreadListRouteName}
         component={HomeChatThreadList}
diff --git a/native/components/nux-tips-context.react.js b/native/components/nux-tips-context.react.js
--- a/native/components/nux-tips-context.react.js
+++ b/native/components/nux-tips-context.react.js
@@ -9,6 +9,7 @@
 const nuxTip = Object.freeze({
   COMMUNITY_DRAWER: 'community_drawer',
   MUTED: 'muted',
+  HOME: 'home',
 });
 
 export type NUXTip = $Values<typeof nuxTip>;