fix: memoise callbacks passed to TabView (#333)

* fix: memoise callbacks

* fix: move SceneMap outside of the component

Author: okwasniewski

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

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}

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

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 }}

apps/example/src/Examples/TintColors.tsx

@@ -1,11 +1,17 @@
-import * as React from 'react';
 import TabView, { SceneMap } from 'react-native-bottom-tabs';
 import { useState } from 'react';
 import { Article } from '../Screens/Article';
 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

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}