From 93b18884504b9d4e60c35fd7976530f7cb9da8e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oskar=20Kwas=CC=81niewski?= <oskarkwasniewski@icloud.com>
Date: Fri, 21 Mar 2025 14:58:49 +0100
Subject: [PATCH 1/2] fix: memoise callbacks

---
 .../react-native-bottom-tabs/src/TabView.tsx  | 53 ++++++++++++++-----
 1 file changed, 39 insertions(+), 14 deletions(-)

diff --git a/packages/react-native-bottom-tabs/src/TabView.tsx b/packages/react-native-bottom-tabs/src/TabView.tsx
index 8863c792..3854669c 100644
--- a/packages/react-native-bottom-tabs/src/TabView.tsx
+++ b/packages/react-native-bottom-tabs/src/TabView.tsx
@@ -1,5 +1,10 @@
 import React from 'react';
-import type { TabViewItems } from './TabViewNativeComponent';
+import type {
+  OnNativeLayout,
+  OnPageSelectedEventData,
+  OnTabBarMeasured,
+  TabViewItems,
+} from './TabViewNativeComponent';
 import {
   type ColorValue,
   Image,
@@ -279,6 +284,35 @@ const TabView = <Route extends BaseRoute>({
     onIndexChange(index);
   });
 
+  const handleTabLongPress = React.useCallback(
+    ({ nativeEvent: { key } }: { nativeEvent: OnPageSelectedEventData }) => {
+      const index = trimmedRoutes.findIndex((route) => route.key === key);
+      onTabLongPress?.(index);
+    },
+    [trimmedRoutes, onTabLongPress]
+  );
+
+  const handlePageSelected = React.useCallback(
+    ({ nativeEvent: { key } }: { nativeEvent: OnPageSelectedEventData }) => {
+      jumpTo(key);
+    },
+    [jumpTo]
+  );
+
+  const handleTabBarMeasured = React.useCallback(
+    ({ nativeEvent: { height } }: { nativeEvent: OnTabBarMeasured }) => {
+      setTabBarHeight(height);
+    },
+    [setTabBarHeight]
+  );
+
+  const handleNativeLayout = React.useCallback(
+    ({ nativeEvent: { width, height } }: { nativeEvent: OnNativeLayout }) => {
+      setMeasuredDimensions({ width, height });
+    },
+    [setMeasuredDimensions]
+  );
+
   return (
     <BottomTabBarHeightContext.Provider value={tabBarHeight}>
       <NativeTabView
@@ -290,19 +324,10 @@ const TabView = <Route extends BaseRoute>({
         icons={renderCustomTabBar ? undefined : resolvedIconAssets}
         selectedPage={focusedKey}
         tabBarHidden={!!renderCustomTabBar}
-        onTabLongPress={({ nativeEvent: { key } }) => {
-          const index = trimmedRoutes.findIndex((route) => route.key === key);
-          onTabLongPress?.(index);
-        }}
-        onPageSelected={({ nativeEvent: { key } }) => {
-          jumpTo(key);
-        }}
-        onTabBarMeasured={({ nativeEvent: { height } }) => {
-          setTabBarHeight(height);
-        }}
-        onNativeLayout={({ nativeEvent: { width, height } }) => {
-          setMeasuredDimensions({ width, height });
-        }}
+        onTabLongPress={handleTabLongPress}
+        onPageSelected={handlePageSelected}
+        onTabBarMeasured={handleTabBarMeasured}
+        onNativeLayout={handleNativeLayout}
         hapticFeedbackEnabled={hapticFeedbackEnabled}
         activeTintColor={activeTintColor}
         inactiveTintColor={inactiveTintColor}

From 5b88c879e2cdaddc66eb2f6d4d6c5d045ee7e8ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oskar=20Kwas=CC=81niewski?= <oskarkwasniewski@icloud.com>
Date: Fri, 21 Mar 2025 14:59:02 +0100
Subject: [PATCH 2/2] fix: move SceneMap outside of the component

---
 apps/example/src/Examples/FourTabs.tsx   | 14 +++++++-------
 apps/example/src/Examples/Labeled.tsx    | 14 +++++++-------
 apps/example/src/Examples/SFSymbols.tsx  | 12 ++++++------
 apps/example/src/Examples/ThreeTabs.tsx  | 12 ++++++------
 apps/example/src/Examples/TintColors.tsx | 15 +++++++--------
 5 files changed, 33 insertions(+), 34 deletions(-)

diff --git a/apps/example/src/Examples/FourTabs.tsx b/apps/example/src/Examples/FourTabs.tsx
index 44802668..93ed60ff 100644
--- a/apps/example/src/Examples/FourTabs.tsx
+++ b/apps/example/src/Examples/FourTabs.tsx
@@ -16,6 +16,13 @@ interface Props {
   activeIndicatorColor?: ColorValue;
 }
 
+const renderScene = SceneMap({
+  article: Article,
+  albums: Albums,
+  contacts: Contacts,
+  chat: Chat,
+});
+
 export default function FourTabs({
   disablePageAnimations = false,
   scrollEdgeAppearance = 'default',
@@ -53,13 +60,6 @@ export default function FourTabs({
     },
   ]);
 
-  const renderScene = SceneMap({
-    article: Article,
-    albums: Albums,
-    contacts: Contacts,
-    chat: Chat,
-  });
-
   return (
     <TabView
       sidebarAdaptable
diff --git a/apps/example/src/Examples/Labeled.tsx b/apps/example/src/Examples/Labeled.tsx
index 2c1b41e6..2822e822 100644
--- a/apps/example/src/Examples/Labeled.tsx
+++ b/apps/example/src/Examples/Labeled.tsx
@@ -5,6 +5,13 @@ import { Albums } from '../Screens/Albums';
 import { Contacts } from '../Screens/Contacts';
 import { Chat } from '../Screens/Chat';
 
+const renderScene = SceneMap({
+  article: Article,
+  albums: Albums,
+  contacts: Contacts,
+  chat: Chat,
+});
+
 export default function LabeledTabs({
   showLabels = true,
 }: {
@@ -36,13 +43,6 @@ export default function LabeledTabs({
     },
   ]);
 
-  const renderScene = SceneMap({
-    article: Article,
-    albums: Albums,
-    contacts: Contacts,
-    chat: Chat,
-  });
-
   return (
     <TabView
       labeled={showLabels}
diff --git a/apps/example/src/Examples/SFSymbols.tsx b/apps/example/src/Examples/SFSymbols.tsx
index d29a349b..591424de 100644
--- a/apps/example/src/Examples/SFSymbols.tsx
+++ b/apps/example/src/Examples/SFSymbols.tsx
@@ -5,6 +5,12 @@ import { Albums } from '../Screens/Albums';
 import { Contacts } from '../Screens/Contacts';
 import { Platform } from 'react-native';
 
+const renderScene = SceneMap({
+  article: Article,
+  albums: Albums,
+  contacts: Contacts,
+});
+
 const isAndroid = Platform.OS === 'android';
 
 export default function SFSymbols() {
@@ -38,12 +44,6 @@ export default function SFSymbols() {
     },
   ]);
 
-  const renderScene = SceneMap({
-    article: Article,
-    albums: Albums,
-    contacts: Contacts,
-  });
-
   return (
     <TabView
       sidebarAdaptable
diff --git a/apps/example/src/Examples/ThreeTabs.tsx b/apps/example/src/Examples/ThreeTabs.tsx
index 12c7b081..5fe96024 100644
--- a/apps/example/src/Examples/ThreeTabs.tsx
+++ b/apps/example/src/Examples/ThreeTabs.tsx
@@ -4,6 +4,12 @@ import { Article } from '../Screens/Article';
 import { Albums } from '../Screens/Albums';
 import { Contacts } from '../Screens/Contacts';
 
+const renderScene = SceneMap({
+  article: Article,
+  albums: Albums,
+  contacts: Contacts,
+});
+
 export default function ThreeTabs() {
   const [index, setIndex] = useState(1);
   const [routes] = useState([
@@ -30,12 +36,6 @@ export default function ThreeTabs() {
     },
   ]);
 
-  const renderScene = SceneMap({
-    article: Article,
-    albums: Albums,
-    contacts: Contacts,
-  });
-
   return (
     <TabView
       navigationState={{ index, routes }}
diff --git a/apps/example/src/Examples/TintColors.tsx b/apps/example/src/Examples/TintColors.tsx
index ddb850f4..c5f44333 100644
--- a/apps/example/src/Examples/TintColors.tsx
+++ b/apps/example/src/Examples/TintColors.tsx
@@ -1,4 +1,3 @@
-import * as React from 'react';
 import TabView, { SceneMap } from 'react-native-bottom-tabs';
 import { useState } from 'react';
 import { Article } from '../Screens/Article';
@@ -6,6 +5,13 @@ import { Albums } from '../Screens/Albums';
 import { Contacts } from '../Screens/Contacts';
 import { Chat } from '../Screens/Chat';
 
+const renderScene = SceneMap({
+  article: Article,
+  albums: Albums,
+  contacts: Contacts,
+  chat: Chat,
+});
+
 export default function TintColorsExample() {
   const [index, setIndex] = useState(0);
   const [routes] = useState([
@@ -38,13 +44,6 @@ export default function TintColorsExample() {
     },
   ]);
 
-  const renderScene = SceneMap({
-    article: Article,
-    albums: Albums,
-    contacts: Contacts,
-    chat: Chat,
-  });
-
   return (
     <TabView
       sidebarAdaptable