@react-navigation/material-top-tabs 6.0.3

package/src/navigators/createMaterialTopTabNavigator.tsx

@@ -0,0 +1,145 @@
+import {
+  createNavigatorFactory,
+  DefaultNavigatorOptions,
+  ParamListBase,
+  TabActionHelpers,
+  TabNavigationState,
+  TabRouter,
+  TabRouterOptions,
+  useNavigationBuilder,
+} from '@react-navigation/native';
+import * as React from 'react';
+import warnOnce from 'warn-once';
+
+import type {
+  MaterialTopTabNavigationConfig,
+  MaterialTopTabNavigationEventMap,
+  MaterialTopTabNavigationOptions,
+} from '../types';
+import MaterialTopTabView from '../views/MaterialTopTabView';
+
+type Props = DefaultNavigatorOptions<
+  ParamListBase,
+  TabNavigationState<ParamListBase>,
+  MaterialTopTabNavigationOptions,
+  MaterialTopTabNavigationEventMap
+> &
+  TabRouterOptions &
+  MaterialTopTabNavigationConfig;
+
+function MaterialTopTabNavigator({
+  initialRouteName,
+  backBehavior,
+  children,
+  screenListeners,
+  screenOptions,
+  // @ts-expect-error: swipeEnabled is deprecated
+  swipeEnabled,
+  // @ts-expect-error: lazy is deprecated
+  lazy,
+  // @ts-expect-error: lazyPlaceholder is deprecated
+  lazyPlaceholder,
+  // @ts-expect-error: lazyPreloadDistance is deprecated
+  lazyPreloadDistance,
+  // @ts-expect-error: tabBarOptions is deprecated
+  tabBarOptions,
+  ...rest
+}: Props) {
+  let defaultScreenOptions: MaterialTopTabNavigationOptions = {};
+
+  if (tabBarOptions) {
+    Object.assign(defaultScreenOptions, {
+      tabBarActiveTintColor: tabBarOptions.activeTintColor,
+      tabBarInactiveTintColor: tabBarOptions.inactiveTintColor,
+      tabBarPressColor: tabBarOptions.pressColor,
+      tabBarPressOpacity: tabBarOptions.pressOpacity,
+      tabBarShowLabel: tabBarOptions.showLabel,
+      tabBarShowIcon: tabBarOptions.showIcon,
+      tabBarAllowFontScaling: tabBarOptions.allowFontScaling,
+      tabBarBounces: tabBarOptions.bounces,
+      tabBarScrollEnabled: tabBarOptions.scrollEnabled,
+      tabBarIconStyle: tabBarOptions.iconStyle,
+      tabBarLabelStyle: tabBarOptions.labelStyle,
+      tabBarItemStyle: tabBarOptions.tabStyle,
+      tabBarBadge: tabBarOptions.renderBadge,
+      tabBarIndicator: tabBarOptions.renderIndicator,
+      tabBarIndicatorStyle: tabBarOptions.indicatorStyle,
+      tabBarIndicatorContainerStyle: tabBarOptions.indicatorContainerStyle,
+      tabBarContentContainerStyle: tabBarOptions.contentContainerStyle,
+      tabBarStyle: tabBarOptions.style,
+    });
+
+    (
+      Object.keys(
+        defaultScreenOptions
+      ) as (keyof MaterialTopTabNavigationOptions)[]
+    ).forEach((key) => {
+      if (defaultScreenOptions[key] === undefined) {
+        // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+        delete defaultScreenOptions[key];
+      }
+    });
+
+    warnOnce(
+      tabBarOptions,
+      `Material Top Tab Navigator: 'tabBarOptions' is deprecated. Migrate the options to 'screenOptions' instead.\n\nPlace the following in 'screenOptions' in your code to keep current behavior:\n\n${JSON.stringify(
+        defaultScreenOptions,
+        null,
+        2
+      )}\n\nSee https://reactnavigation.org/docs/material-top-tab-navigator#options for more details.`
+    );
+  }
+
+  const deprecatedProps = {
+    swipeEnabled,
+    lazy,
+    lazyPlaceholder,
+    lazyPreloadDistance,
+  } as const;
+
+  Object.entries(deprecatedProps).forEach(([propName, propValue]) => {
+    if (propValue !== undefined) {
+      // @ts-expect-error: Object.entries doesn't return strict types
+      defaultScreenOptions[propName] = propValue;
+
+      warnOnce(
+        true,
+        `Material Top Tab Navigator: '${propName}' in props is deprecated. Move it to 'screenOptions' instead.\n\nSee https://reactnavigation.org/docs/material-top-tab-navigator#${propName.toLowerCase()} for more details.`
+      );
+    }
+  });
+
+  const { state, descriptors, navigation, NavigationContent } =
+    useNavigationBuilder<
+      TabNavigationState<ParamListBase>,
+      TabRouterOptions,
+      TabActionHelpers<ParamListBase>,
+      MaterialTopTabNavigationOptions,
+      MaterialTopTabNavigationEventMap
+    >(TabRouter, {
+      initialRouteName,
+      backBehavior,
+      children,
+      screenListeners,
+      screenOptions,
+      defaultScreenOptions,
+    });
+
+  return (
+    <NavigationContent>
+      <MaterialTopTabView
+        {...rest}
+        state={state}
+        navigation={navigation}
+        descriptors={descriptors}
+      />
+    </NavigationContent>
+  );
+}
+
+export default createNavigatorFactory<
+  TabNavigationState<ParamListBase>,
+  MaterialTopTabNavigationOptions,
+  MaterialTopTabNavigationEventMap,
+  typeof MaterialTopTabNavigator
+>(MaterialTopTabNavigator);

package/src/types.tsx

@@ -0,0 +1,268 @@
+import type {
+  Descriptor,
+  NavigationHelpers,
+  NavigationProp,
+  ParamListBase,
+  Route,
+  RouteProp,
+  TabActionHelpers,
+  TabNavigationState,
+} from '@react-navigation/native';
+import type React from 'react';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type {
+  SceneRendererProps,
+  TabBar,
+  TabViewProps,
+} from 'react-native-tab-view';
+
+export type MaterialTopTabNavigationEventMap = {
+  /**
+   * Event which fires on tapping on the tab in the tab bar.
+   */
+  tabPress: { data: undefined; canPreventDefault: true };
+  /**
+   * Event which fires on long press on the tab in the tab bar.
+   */
+  tabLongPress: { data: undefined };
+  /**
+   * Event which fires when a swipe gesture starts, i.e. finger touches the screen.
+   */
+  swipeStart: { data: undefined };
+  /**
+   * Event which fires when a swipe gesture ends, i.e. finger leaves the screen.
+   */
+  swipeEnd: { data: undefined };
+};
+
+export type MaterialTopTabNavigationHelpers = NavigationHelpers<
+  ParamListBase,
+  MaterialTopTabNavigationEventMap
+> &
+  TabActionHelpers<ParamListBase>;
+
+export type MaterialTopTabNavigationProp<
+  ParamList extends ParamListBase,
+  RouteName extends keyof ParamList = keyof ParamList
+> = NavigationProp<
+  ParamList,
+  RouteName,
+  TabNavigationState<ParamList>,
+  MaterialTopTabNavigationOptions,
+  MaterialTopTabNavigationEventMap
+> &
+  TabActionHelpers<ParamList>;
+
+export type MaterialTopTabScreenProps<
+  ParamList extends ParamListBase,
+  RouteName extends keyof ParamList = keyof ParamList
+> = {
+  navigation: MaterialTopTabNavigationProp<ParamList, RouteName>;
+  route: RouteProp<ParamList, RouteName>;
+};
+
+export type MaterialTopTabNavigationOptions = {
+  /**
+   * Title text for the screen.
+   */
+  title?: string;
+
+  /**
+   * Title string of a tab displayed in the tab bar
+   * or a function that given { focused: boolean, color: string } returns a React.Node, to display in tab bar.
+   *
+   * When undefined, scene title is used. Use `tabBarShowLabel` to hide the label.
+   */
+  tabBarLabel?:
+    | string
+    | ((props: { focused: boolean; color: string }) => React.ReactNode);
+
+  /**
+   * Accessibility label for the tab button. This is read by the screen reader when the user taps the tab.
+   * It's recommended to set this if you don't have a label for the tab.
+   */
+  tabBarAccessibilityLabel?: string;
+
+  /**
+   * Whether label font should scale to respect Text Size accessibility settings.
+   */
+  tabBarAllowFontScaling?: boolean;
+
+  /**
+   * Whether the tab label should be visible. Defaults to `true`.
+   */
+  tabBarShowLabel?: boolean;
+
+  /**
+   * A function that given { focused: boolean, color: string } returns a React.Node to display in the tab bar.
+   */
+  tabBarIcon?: (props: { focused: boolean; color: string }) => React.ReactNode;
+
+  /**
+   * Whether the tab icon should be visible. Defaults to `false`.
+   */
+  tabBarShowIcon?: boolean;
+
+  /**
+   * Function that returns a React element to use as a badge for the tab.
+   */
+  tabBarBadge?: () => React.ReactNode;
+
+  /**
+   * Function that returns a React element as the tab bar indicator.
+   */
+  tabBarIndicator?: (
+    props: Omit<
+      Parameters<React.ComponentProps<typeof TabBar>['renderIndicator']>[0],
+      'navigationState'
+    > & { state: TabNavigationState<ParamListBase> }
+  ) => React.ReactNode;
+
+  /**
+   * Style object for the tab bar indicator.
+   */
+  tabBarIndicatorStyle?: StyleProp<ViewStyle>;
+
+  /**
+   * Style object for the view containing the tab bar indicator.
+   */
+  tabBarIndicatorContainerStyle?: StyleProp<ViewStyle>;
+
+  /**
+   * ID to locate this tab button in tests.
+   */
+  tabBarTestID?: string;
+
+  /**
+   * Color for the icon and label in the active tab.
+   */
+  tabBarActiveTintColor?: string;
+
+  /**
+   * Color for the icon and label in the inactive tabs.
+   */
+  tabBarInactiveTintColor?: string;
+
+  /**
+   * Color for material ripple (Android >= 5.0 only).
+   */
+  tabBarPressColor?: string;
+
+  /**
+   * Opacity for pressed tab (iOS and Android < 5.0 only).
+   */
+  tabBarPressOpacity?: number;
+
+  /**
+   * Boolean indicating whether the tab bar bounces when overscrolling.
+   */
+  tabBarBounces?: boolean;
+
+  /**
+   * Boolean indicating whether to make the tab bar scrollable.
+   *
+   * If you set this to `true`, you should also specify a width in `tabBarItemStyle` to improve the performance of initial render.
+   */
+  tabBarScrollEnabled?: boolean;
+
+  /**
+   * Style object for the tab icon container.
+   */
+  tabBarIconStyle?: StyleProp<ViewStyle>;
+
+  /**
+   * Style object for the tab label.
+   */
+  tabBarLabelStyle?: StyleProp<TextStyle>;
+
+  /**
+   * Style object for the individual tab items.
+   */
+  tabBarItemStyle?: StyleProp<ViewStyle>;
+
+  /**
+   * Style object for the view containing the tab items.
+   */
+  tabBarContentContainerStyle?: StyleProp<ViewStyle>;
+
+  /**
+   * Style object for the the tab bar.
+   */
+  tabBarStyle?: StyleProp<ViewStyle>;
+
+  /**
+   * Whether to enable swipe gestures when this screen is focused.
+   * Swipe gestures are enabled by default. Passing `false` will disable swipe gestures,
+   * but the user can still switch tabs by pressing the tab bar.
+   */
+  swipeEnabled?: boolean;
+
+  /**
+   * Whether this screen should be lazily rendered. When this is set to `true`,
+   * the screen will be rendered as it comes into the viewport.
+   * By default all screens are rendered to provide a smoother swipe experience.
+   * But you might want to defer the rendering of screens out of the viewport until the user sees them.
+   * To enable lazy rendering for this screen, set `lazy` to `true`.
+   *
+   * When you enable `lazy`, the lazy loaded screens will usually take some time to render
+   * when they come into the viewport. You can use the `lazyPlaceholder` prop to customize
+   * what the user sees during this short period.
+   */
+  lazy?: boolean;
+
+  /**
+   * When `lazy` is enabled, you can specify how many adjacent screens should be preloaded in advance with this prop.
+   * This value defaults to `0` which means lazy pages are loaded as they come into the viewport.
+   */
+  lazyPreloadDistance?: number;
+
+  /**
+   * Function that returns a React element to render if this screen hasn't been rendered yet.
+   * The `lazy` option also needs to be enabled for this to work.
+   *
+   * This view is usually only shown for a split second. Keep it lightweight.
+   *
+   * By default, this renders `null`.
+   */
+  lazyPlaceholder?: () => React.ReactNode;
+};
+
+export type MaterialTopTabDescriptor = Descriptor<
+  MaterialTopTabNavigationOptions,
+  MaterialTopTabNavigationProp<ParamListBase>,
+  RouteProp<ParamListBase>
+>;
+
+export type MaterialTopTabDescriptorMap = Record<
+  string,
+  MaterialTopTabDescriptor
+>;
+
+export type MaterialTopTabNavigationConfig = Omit<
+  TabViewProps<Route<string>>,
+  | 'navigationState'
+  | 'onIndexChange'
+  | 'onSwipeStart'
+  | 'onSwipeEnd'
+  | 'renderScene'
+  | 'renderTabBar'
+  | 'renderLazyPlaceholder'
+  | 'swipeEnabled'
+  | 'lazy'
+  | 'lazyPreloadDistance'
+  | 'lazyPlaceholder'
+> & {
+  /**
+   * Function that returns a React element to display as the tab bar.
+   */
+  tabBar?: (props: MaterialTopTabBarProps) => React.ReactNode;
+};
+
+export type MaterialTopTabBarProps = SceneRendererProps & {
+  state: TabNavigationState<ParamListBase>;
+  navigation: NavigationHelpers<
+    ParamListBase,
+    MaterialTopTabNavigationEventMap
+  >;
+  descriptors: MaterialTopTabDescriptorMap;
+};

package/src/views/MaterialTopTabBar.tsx

@@ -0,0 +1,143 @@
+import {
+  ParamListBase,
+  Route,
+  TabNavigationState,
+  useTheme,
+} from '@react-navigation/native';
+import Color from 'color';
+import * as React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { TabBar, TabBarIndicator } from 'react-native-tab-view';
+
+import type { MaterialTopTabBarProps } from '../types';
+
+export default function TabBarTop({
+  state,
+  navigation,
+  descriptors,
+  ...rest
+}: MaterialTopTabBarProps) {
+  const { colors } = useTheme();
+
+  const focusedOptions = descriptors[state.routes[state.index].key].options;
+
+  const activeColor = focusedOptions.tabBarActiveTintColor ?? colors.text;
+  const inactiveColor =
+    focusedOptions.tabBarInactiveTintColor ??
+    Color(activeColor).alpha(0.5).rgb().string();
+
+  return (
+    <TabBar
+      {...rest}
+      navigationState={state}
+      scrollEnabled={focusedOptions.tabBarScrollEnabled}
+      bounces={focusedOptions.tabBarBounces}
+      activeColor={activeColor}
+      inactiveColor={inactiveColor}
+      pressColor={focusedOptions.tabBarPressColor}
+      pressOpacity={focusedOptions.tabBarPressOpacity}
+      tabStyle={focusedOptions.tabBarItemStyle}
+      indicatorStyle={[
+        { backgroundColor: colors.primary },
+        focusedOptions.tabBarIndicatorStyle,
+      ]}
+      indicatorContainerStyle={focusedOptions.tabBarIndicatorContainerStyle}
+      contentContainerStyle={focusedOptions.tabBarContentContainerStyle}
+      style={[{ backgroundColor: colors.card }, focusedOptions.tabBarStyle]}
+      getAccessibilityLabel={({ route }) =>
+        descriptors[route.key].options.tabBarAccessibilityLabel
+      }
+      getTestID={({ route }) => descriptors[route.key].options.tabBarTestID}
+      onTabPress={({ route, preventDefault }) => {
+        const event = navigation.emit({
+          type: 'tabPress',
+          target: route.key,
+          canPreventDefault: true,
+        });
+
+        if (event.defaultPrevented) {
+          preventDefault();
+        }
+      }}
+      onTabLongPress={({ route }) =>
+        navigation.emit({
+          type: 'tabLongPress',
+          target: route.key,
+        })
+      }
+      renderIcon={({ route, focused, color }) => {
+        const { options } = descriptors[route.key];
+
+        if (options.tabBarShowIcon === false) {
+          return null;
+        }
+
+        if (options.tabBarIcon !== undefined) {
+          const icon = options.tabBarIcon({ focused, color });
+
+          return (
+            <View style={[styles.icon, options.tabBarIconStyle]}>{icon}</View>
+          );
+        }
+
+        return null;
+      }}
+      renderLabel={({ route, focused, color }) => {
+        const { options } = descriptors[route.key];
+
+        if (options.tabBarShowLabel === false) {
+          return null;
+        }
+
+        const label =
+          options.tabBarLabel !== undefined
+            ? options.tabBarLabel
+            : options.title !== undefined
+            ? options.title
+            : (route as Route<string>).name;
+
+        if (typeof label === 'string') {
+          return (
+            <Text
+              style={[styles.label, { color }, options.tabBarLabelStyle]}
+              allowFontScaling={options.tabBarAllowFontScaling}
+            >
+              {label}
+            </Text>
+          );
+        }
+
+        return label({ focused, color });
+      }}
+      renderBadge={({ route }) => {
+        const { tabBarBadge } = descriptors[route.key].options;
+
+        return tabBarBadge?.() ?? null;
+      }}
+      renderIndicator={({ navigationState: state, ...rest }) => {
+        return focusedOptions.tabBarIndicator ? (
+          focusedOptions.tabBarIndicator({
+            state: state as TabNavigationState<ParamListBase>,
+            ...rest,
+          })
+        ) : (
+          <TabBarIndicator navigationState={state} {...rest} />
+        );
+      }}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  icon: {
+    height: 24,
+    width: 24,
+  },
+  label: {
+    textAlign: 'center',
+    textTransform: 'uppercase',
+    fontSize: 13,
+    margin: 4,
+    backgroundColor: 'transparent',
+  },
+});

package/src/views/MaterialTopTabView.tsx

@@ -0,0 +1,75 @@
+import {
+  CommonActions,
+  ParamListBase,
+  Route,
+  TabNavigationState,
+  useTheme,
+} from '@react-navigation/native';
+import * as React from 'react';
+import { SceneRendererProps, TabView } from 'react-native-tab-view';
+
+import type {
+  MaterialTopTabBarProps,
+  MaterialTopTabDescriptorMap,
+  MaterialTopTabNavigationConfig,
+  MaterialTopTabNavigationHelpers,
+} from '../types';
+import MaterialTopTabBar from './MaterialTopTabBar';
+
+type Props = MaterialTopTabNavigationConfig & {
+  state: TabNavigationState<ParamListBase>;
+  navigation: MaterialTopTabNavigationHelpers;
+  descriptors: MaterialTopTabDescriptorMap;
+};
+
+export default function MaterialTopTabView({
+  tabBar = (props: MaterialTopTabBarProps) => <MaterialTopTabBar {...props} />,
+  state,
+  navigation,
+  descriptors,
+  sceneContainerStyle,
+  ...rest
+}: Props) {
+  const { colors } = useTheme();
+
+  const renderTabBar = (props: SceneRendererProps) => {
+    return tabBar({
+      ...props,
+      state: state,
+      navigation: navigation,
+      descriptors: descriptors,
+    });
+  };
+
+  const focusedOptions = descriptors[state.routes[state.index].key].options;
+
+  return (
+    <TabView<Route<string>>
+      {...rest}
+      onIndexChange={(index) =>
+        navigation.dispatch({
+          ...CommonActions.navigate({
+            name: state.routes[index].name,
+            merge: true,
+          }),
+          target: state.key,
+        })
+      }
+      renderScene={({ route }) => descriptors[route.key].render()}
+      navigationState={state}
+      renderTabBar={renderTabBar}
+      renderLazyPlaceholder={({ route }) =>
+        descriptors[route.key].options.lazyPlaceholder?.() ?? null
+      }
+      lazy={({ route }) => descriptors[route.key].options.lazy === true}
+      lazyPreloadDistance={focusedOptions.lazyPreloadDistance}
+      swipeEnabled={focusedOptions.swipeEnabled}
+      onSwipeStart={() => navigation.emit({ type: 'swipeStart' })}
+      onSwipeEnd={() => navigation.emit({ type: 'swipeEnd' })}
+      sceneContainerStyle={[
+        { backgroundColor: colors.background },
+        sceneContainerStyle,
+      ]}
+    />
+  );
+}