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