@react-navigation/bottom-tabs 7.6.0 → 7.7.0

package/src/unstable/NativeScreen/useHeaderConfig.tsx

@@ -0,0 +1,423 @@
+import { getHeaderTitle, HeaderTitle } from '@react-navigation/elements';
+import {
+  type Route,
+  type Theme,
+  useLocale,
+  useTheme,
+} from '@react-navigation/native';
+import Color from 'color';
+import { Platform, StyleSheet, type TextStyle, View } from 'react-native';
+import {
+  type HeaderBarButtonItem,
+  type HeaderBarButtonItemMenuAction,
+  type HeaderBarButtonItemSubmenu,
+  isSearchBarAvailableForCurrentPlatform,
+  ScreenStackHeaderCenterView,
+  type ScreenStackHeaderConfigProps,
+  ScreenStackHeaderLeftView,
+  ScreenStackHeaderRightView,
+  ScreenStackHeaderSearchBarView,
+  SearchBar,
+} from 'react-native-screens';
+
+import type {
+  NativeHeaderOptions,
+  NativeScreenHeaderItem,
+  NativeScreenHeaderItemMenuAction,
+  NativeScreenHeaderItemMenuSubmenu,
+} from './types';
+
+type Props = NativeHeaderOptions & {
+  headerTopInsetEnabled: boolean;
+  headerHeight: number;
+  route: Route<string>;
+};
+
+const processBarButtonItems = (
+  items: NativeScreenHeaderItem[] | undefined,
+  colors: Theme['colors'],
+  fonts: Theme['fonts']
+) => {
+  return items
+    ?.map((item, index) => {
+      if (item.type === 'custom') {
+        // Handled with `ScreenStackHeaderLeftView` or `ScreenStackHeaderRightView`
+        return null;
+      }
+
+      if (item.type === 'spacing') {
+        if (item.spacing == null) {
+          throw new Error(
+            `Spacing item must have a 'spacing' property defined: ${JSON.stringify(
+              item
+            )}`
+          );
+        }
+
+        return item;
+      }
+
+      if (item.type === 'button' || item.type === 'menu') {
+        if (item.type === 'menu' && item.menu == null) {
+          throw new Error(
+            `Menu item must have a 'menu' property defined: ${JSON.stringify(
+              item
+            )}`
+          );
+        }
+
+        const { badge, label, labelStyle, icon, ...rest } = item;
+
+        let processedItem: HeaderBarButtonItem = {
+          ...rest,
+          index,
+          title: label,
+          titleStyle: {
+            ...fonts.regular,
+            ...labelStyle,
+          },
+          icon:
+            icon?.type === 'image'
+              ? icon.tinted === false
+                ? {
+                    type: 'imageSource',
+                    imageSource: icon.source,
+                  }
+                : {
+                    type: 'templateSource',
+                    templateSource: icon.source,
+                  }
+              : icon,
+        };
+
+        if (processedItem.type === 'menu' && item.type === 'menu') {
+          processedItem = {
+            ...processedItem,
+            menu: {
+              ...processedItem.menu,
+              items: item.menu.items.map(getMenuItem),
+            },
+          };
+        }
+
+        if (badge) {
+          const badgeBackgroundColor =
+            badge.style?.backgroundColor ?? colors.notification;
+          const badgeTextColor =
+            typeof badgeBackgroundColor === 'string' &&
+            Color(badgeBackgroundColor)?.isLight()
+              ? 'black'
+              : 'white';
+
+          processedItem = {
+            ...processedItem,
+            badge: {
+              ...badge,
+              value: String(badge.value),
+              style: {
+                backgroundColor: badgeBackgroundColor,
+                color: badgeTextColor,
+                ...fonts.regular,
+                ...badge.style,
+              },
+            },
+          };
+        }
+
+        return processedItem;
+      }
+
+      throw new Error(
+        `Invalid item type: ${JSON.stringify(item)}. Valid types are 'button', 'menu', 'custom' and 'spacing'.`
+      );
+    })
+    .filter((item) => item != null);
+};
+
+const getMenuItem = (
+  item: NativeScreenHeaderItemMenuAction | NativeScreenHeaderItemMenuSubmenu
+): HeaderBarButtonItemMenuAction | HeaderBarButtonItemSubmenu => {
+  const { label, ...rest } = item;
+
+  if (rest.type === 'submenu') {
+    return {
+      ...rest,
+      title: label,
+      items: rest.items.map(getMenuItem),
+    };
+  }
+
+  return {
+    ...rest,
+    title: label,
+  };
+};
+
+export function useHeaderConfig({
+  headerShadowVisible,
+  headerLargeStyle,
+  headerLargeTitle,
+  headerLargeTitleShadowVisible,
+  headerLargeTitleStyle,
+  headerBackground,
+  headerLeft,
+  headerRight,
+  headerShown,
+  headerStyle,
+  headerBlurEffect,
+  headerTintColor,
+  headerTitle,
+  headerTitleAlign,
+  headerTitleStyle,
+  headerTransparent,
+  headerSearchBarOptions,
+  headerTopInsetEnabled,
+  route,
+  title,
+  unstable_headerLeftItems: headerLeftItems,
+  unstable_headerRightItems: headerRightItems,
+}: Props): ScreenStackHeaderConfigProps {
+  const { direction } = useLocale();
+  const { colors, fonts } = useTheme();
+  const tintColor =
+    headerTintColor ?? (Platform.OS === 'ios' ? colors.primary : colors.text);
+
+  const headerLargeTitleStyleFlattened =
+    StyleSheet.flatten([
+      Platform.select({ ios: fonts.heavy, default: fonts.medium }),
+      headerLargeTitleStyle,
+    ]) || {};
+
+  const headerTitleStyleFlattened =
+    StyleSheet.flatten([
+      Platform.select({ ios: fonts.bold, default: fonts.medium }),
+      headerTitleStyle,
+    ]) || {};
+
+  const headerStyleFlattened = StyleSheet.flatten(headerStyle) || {};
+  const headerLargeStyleFlattened = StyleSheet.flatten(headerLargeStyle) || {};
+
+  const titleText = getHeaderTitle({ title, headerTitle }, route.name);
+
+  const titleColor =
+    'color' in headerTitleStyleFlattened
+      ? headerTitleStyleFlattened.color
+      : (headerTintColor ?? colors.text);
+
+  const titleFontSize =
+    'fontSize' in headerTitleStyleFlattened
+      ? headerTitleStyleFlattened.fontSize
+      : undefined;
+
+  const titleFontFamily = headerTitleStyleFlattened.fontFamily;
+  const titleFontWeight = headerTitleStyleFlattened.fontWeight;
+
+  const largeTitleFontFamily = headerLargeTitleStyleFlattened.fontFamily;
+  const largeTitleBackgroundColor = headerLargeStyleFlattened.backgroundColor;
+
+  const largeTitleColor =
+    'color' in headerLargeTitleStyleFlattened
+      ? headerLargeTitleStyleFlattened.color
+      : undefined;
+
+  const largeTitleFontSize =
+    'fontSize' in headerLargeTitleStyleFlattened
+      ? headerLargeTitleStyleFlattened.fontSize
+      : undefined;
+
+  const largeTitleFontWeight = headerLargeTitleStyleFlattened.fontWeight;
+
+  const headerTitleStyleSupported: TextStyle = { color: titleColor };
+
+  if (headerTitleStyleFlattened.fontFamily != null) {
+    headerTitleStyleSupported.fontFamily = headerTitleStyleFlattened.fontFamily;
+  }
+
+  if (titleFontSize != null) {
+    headerTitleStyleSupported.fontSize = titleFontSize;
+  }
+
+  if (titleFontWeight != null) {
+    headerTitleStyleSupported.fontWeight = titleFontWeight;
+  }
+
+  const headerBackgroundColor =
+    headerStyleFlattened.backgroundColor ??
+    (headerBackground != null || headerTransparent
+      ? 'transparent'
+      : colors.card);
+
+  const headerLeftElement = headerLeft?.({
+    tintColor,
+  });
+
+  const headerRightElement = headerRight?.({
+    tintColor,
+  });
+
+  const headerTitleElement =
+    typeof headerTitle === 'function'
+      ? headerTitle({
+          tintColor,
+          children: titleText,
+        })
+      : null;
+
+  const hasHeaderSearchBar =
+    isSearchBarAvailableForCurrentPlatform && headerSearchBarOptions != null;
+
+  const translucent =
+    headerBackground != null ||
+    headerTransparent ||
+    // When using a SearchBar or large title, the header needs to be translucent for it to work on iOS
+    ((hasHeaderSearchBar || headerLargeTitle) &&
+      Platform.OS === 'ios' &&
+      headerTransparent !== false);
+
+  const isCenterViewRenderedAndroid = headerTitleAlign === 'center';
+
+  const leftItems = headerLeftItems?.({
+    tintColor,
+  });
+
+  let rightItems = headerRightItems?.({
+    tintColor,
+  });
+
+  if (rightItems) {
+    // iOS renders right items in reverse order
+    // So we need to reverse them here to match the order
+    rightItems = [...rightItems].reverse();
+  }
+
+  const children = (
+    <>
+      {Platform.OS === 'ios' ? (
+        <>
+          {leftItems ? (
+            leftItems.map((item, index) => {
+              if (item.type === 'custom') {
+                return (
+                  <ScreenStackHeaderLeftView
+                    // eslint-disable-next-line @eslint-react/no-array-index-key
+                    key={index}
+                    hidesSharedBackground={item.hidesSharedBackground}
+                  >
+                    {item.element}
+                  </ScreenStackHeaderLeftView>
+                );
+              }
+
+              return null;
+            })
+          ) : headerLeftElement != null ? (
+            <ScreenStackHeaderLeftView>
+              {headerLeftElement}
+            </ScreenStackHeaderLeftView>
+          ) : null}
+          {headerTitleElement != null ? (
+            <ScreenStackHeaderCenterView>
+              {headerTitleElement}
+            </ScreenStackHeaderCenterView>
+          ) : null}
+        </>
+      ) : (
+        <>
+          {headerLeftElement != null || typeof headerTitle === 'function' ? (
+            // The style passed to header left, together with title element being wrapped
+            // in flex view is reqruied for proper header layout, in particular,
+            // for the text truncation to work.
+            <ScreenStackHeaderLeftView
+              style={!isCenterViewRenderedAndroid ? { flex: 1 } : null}
+            >
+              {headerLeftElement}
+              {headerTitleAlign !== 'center' ? (
+                typeof headerTitle === 'function' ? (
+                  <View style={{ flex: 1 }}>{headerTitleElement}</View>
+                ) : (
+                  <View style={{ flex: 1 }}>
+                    <HeaderTitle
+                      tintColor={tintColor}
+                      style={headerTitleStyleSupported}
+                    >
+                      {titleText}
+                    </HeaderTitle>
+                  </View>
+                )
+              ) : null}
+            </ScreenStackHeaderLeftView>
+          ) : null}
+          {isCenterViewRenderedAndroid ? (
+            <ScreenStackHeaderCenterView>
+              {typeof headerTitle === 'function' ? (
+                headerTitleElement
+              ) : (
+                <HeaderTitle
+                  tintColor={tintColor}
+                  style={headerTitleStyleSupported}
+                >
+                  {titleText}
+                </HeaderTitle>
+              )}
+            </ScreenStackHeaderCenterView>
+          ) : null}
+        </>
+      )}
+      {Platform.OS === 'ios' && rightItems ? (
+        rightItems.map((item, index) => {
+          if (item.type === 'custom') {
+            return (
+              <ScreenStackHeaderRightView
+                // eslint-disable-next-line @eslint-react/no-array-index-key
+                key={index}
+                hidesSharedBackground={item.hidesSharedBackground}
+              >
+                {item.element}
+              </ScreenStackHeaderRightView>
+            );
+          }
+
+          return null;
+        })
+      ) : headerRightElement != null ? (
+        <ScreenStackHeaderRightView>
+          {headerRightElement}
+        </ScreenStackHeaderRightView>
+      ) : null}
+      {hasHeaderSearchBar ? (
+        <ScreenStackHeaderSearchBarView>
+          <SearchBar {...headerSearchBarOptions} />
+        </ScreenStackHeaderSearchBarView>
+      ) : null}
+    </>
+  );
+
+  return {
+    backgroundColor: headerBackgroundColor,
+    blurEffect: headerBlurEffect,
+    color: tintColor,
+    direction,
+    hidden: headerShown === false,
+    hideShadow:
+      headerShadowVisible === false ||
+      headerBackground != null ||
+      (headerTransparent && headerShadowVisible !== true),
+    largeTitle: headerLargeTitle,
+    largeTitleBackgroundColor,
+    largeTitleColor,
+    largeTitleFontFamily,
+    largeTitleFontSize,
+    largeTitleFontWeight,
+    largeTitleHideShadow: headerLargeTitleShadowVisible === false,
+    title: titleText,
+    titleColor,
+    titleFontFamily,
+    titleFontSize,
+    titleFontWeight: String(titleFontWeight),
+    topInsetEnabled: headerTopInsetEnabled,
+    translucent: translucent === true,
+    children,
+    headerLeftBarButtonItems: processBarButtonItems(leftItems, colors, fonts),
+    headerRightBarButtonItems: processBarButtonItems(rightItems, colors, fonts),
+  } as const;
+}

package/src/unstable/createNativeBottomTabNavigator.native.tsx

@@ -0,0 +1,116 @@
+import {
+  createNavigatorFactory,
+  type NavigatorTypeBagBase,
+  type ParamListBase,
+  StackActions,
+  type StaticConfig,
+  type TabActionHelpers,
+  type TabNavigationState,
+  TabRouter,
+  type TabRouterOptions,
+  type TypedNavigator,
+  useNavigationBuilder,
+} from '@react-navigation/native';
+import * as React from 'react';
+
+import { NativeBottomTabView } from './NativeBottomTabView.native';
+import type {
+  NativeBottomTabNavigationEventMap,
+  NativeBottomTabNavigationOptions,
+  NativeBottomTabNavigationProp,
+  NativeBottomTabNavigatorProps,
+} from './types';
+
+function NativeBottomTabNavigator({
+  id,
+  initialRouteName,
+  backBehavior,
+  children,
+  layout,
+  screenListeners,
+  screenOptions,
+  screenLayout,
+  UNSTABLE_router,
+  UNSTABLE_routeNamesChangeBehavior,
+  ...rest
+}: NativeBottomTabNavigatorProps) {
+  const { state, navigation, descriptors, NavigationContent } =
+    useNavigationBuilder<
+      TabNavigationState<ParamListBase>,
+      TabRouterOptions,
+      TabActionHelpers<ParamListBase>,
+      NativeBottomTabNavigationOptions,
+      NativeBottomTabNavigationEventMap
+    >(TabRouter, {
+      id,
+      initialRouteName,
+      backBehavior,
+      children,
+      layout,
+      screenListeners,
+      screenOptions,
+      screenLayout,
+      UNSTABLE_router,
+      UNSTABLE_routeNamesChangeBehavior,
+    });
+
+  const focusedRouteKey = state.routes[state.index].key;
+  const previousRouteKeyRef = React.useRef(focusedRouteKey);
+
+  React.useEffect(() => {
+    const previousRouteKey = previousRouteKeyRef.current;
+
+    if (
+      previousRouteKey !== focusedRouteKey &&
+      descriptors[previousRouteKey]?.options.popToTopOnBlur
+    ) {
+      const prevRoute = state.routes.find(
+        (route) => route.key === previousRouteKey
+      );
+
+      if (prevRoute?.state?.type === 'stack' && prevRoute.state.key) {
+        const popToTopAction = {
+          ...StackActions.popToTop(),
+          target: prevRoute.state.key,
+        };
+        navigation.dispatch(popToTopAction);
+      }
+    }
+
+    previousRouteKeyRef.current = focusedRouteKey;
+  }, [descriptors, focusedRouteKey, navigation, state.index, state.routes]);
+
+  return (
+    <NavigationContent>
+      <NativeBottomTabView
+        {...rest}
+        state={state}
+        navigation={navigation}
+        descriptors={descriptors}
+      />
+    </NavigationContent>
+  );
+}
+
+export function createNativeBottomTabNavigator<
+  const ParamList extends ParamListBase,
+  const NavigatorID extends string | undefined = undefined,
+  const TypeBag extends NavigatorTypeBagBase = {
+    ParamList: ParamList;
+    NavigatorID: NavigatorID;
+    State: TabNavigationState<ParamList>;
+    ScreenOptions: NativeBottomTabNavigationOptions;
+    EventMap: NativeBottomTabNavigationEventMap;
+    NavigationList: {
+      [RouteName in keyof ParamList]: NativeBottomTabNavigationProp<
+        ParamList,
+        RouteName,
+        NavigatorID
+      >;
+    };
+    Navigator: typeof NativeBottomTabNavigator;
+  },
+  const Config extends StaticConfig<TypeBag> = StaticConfig<TypeBag>,
+>(config?: Config): TypedNavigator<TypeBag, Config> {
+  return createNavigatorFactory(NativeBottomTabNavigator)(config);
+}

package/src/unstable/createNativeBottomTabNavigator.tsx

@@ -0,0 +1,4 @@
+export const createNativeBottomTabNavigator: typeof import('./createNativeBottomTabNavigator.native').createNativeBottomTabNavigator =
+  () => {
+    throw new Error('Native Bottom Tabs are not supported on this platform.');
+  };

package/src/unstable/index.tsx

@@ -0,0 +1,22 @@
+/**
+ * Navigators
+ */
+export { createNativeBottomTabNavigator } from './createNativeBottomTabNavigator';
+
+/**
+ * Views
+ */
+export { NativeBottomTabView } from './NativeBottomTabView';
+
+/**
+ * Types
+ */
+export type {
+  NativeBottomTabBarProps,
+  NativeBottomTabNavigationEventMap,
+  NativeBottomTabNavigationOptions,
+  NativeBottomTabNavigationProp,
+  NativeBottomTabNavigatorProps,
+  NativeBottomTabOptionsArgs,
+  NativeBottomTabScreenProps,
+} from './types';