@react-navigation/material-top-tabs 6.0.3

package/lib/module/views/MaterialTopTabBar.js

@@ -0,0 +1,155 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import { 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';
+export default function TabBarTop({
+  state,
+  navigation,
+  descriptors,
+  ...rest
+}) {
+  var _focusedOptions$tabBa, _focusedOptions$tabBa2;
+
+  const {
+    colors
+  } = useTheme();
+  const focusedOptions = descriptors[state.routes[state.index].key].options;
+  const activeColor = (_focusedOptions$tabBa = focusedOptions.tabBarActiveTintColor) !== null && _focusedOptions$tabBa !== void 0 ? _focusedOptions$tabBa : colors.text;
+  const inactiveColor = (_focusedOptions$tabBa2 = focusedOptions.tabBarInactiveTintColor) !== null && _focusedOptions$tabBa2 !== void 0 ? _focusedOptions$tabBa2 : Color(activeColor).alpha(0.5).rgb().string();
+  return /*#__PURE__*/React.createElement(TabBar, _extends({}, 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 /*#__PURE__*/React.createElement(View, {
+          style: [styles.icon, options.tabBarIconStyle]
+        }, icon);
+      }
+
+      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.name;
+
+      if (typeof label === 'string') {
+        return /*#__PURE__*/React.createElement(Text, {
+          style: [styles.label, {
+            color
+          }, options.tabBarLabelStyle],
+          allowFontScaling: options.tabBarAllowFontScaling
+        }, label);
+      }
+
+      return label({
+        focused,
+        color
+      });
+    },
+    renderBadge: ({
+      route
+    }) => {
+      var _tabBarBadge;
+
+      const {
+        tabBarBadge
+      } = descriptors[route.key].options;
+      return (_tabBarBadge = tabBarBadge === null || tabBarBadge === void 0 ? void 0 : tabBarBadge()) !== null && _tabBarBadge !== void 0 ? _tabBarBadge : null;
+    },
+    renderIndicator: ({
+      navigationState: state,
+      ...rest
+    }) => {
+      return focusedOptions.tabBarIndicator ? focusedOptions.tabBarIndicator({
+        state: state,
+        ...rest
+      }) : /*#__PURE__*/React.createElement(TabBarIndicator, _extends({
+        navigationState: state
+      }, rest));
+    }
+  }));
+}
+const styles = StyleSheet.create({
+  icon: {
+    height: 24,
+    width: 24
+  },
+  label: {
+    textAlign: 'center',
+    textTransform: 'uppercase',
+    fontSize: 13,
+    margin: 4,
+    backgroundColor: 'transparent'
+  }
+});
+//# sourceMappingURL=MaterialTopTabBar.js.map

package/lib/module/views/MaterialTopTabBar.js.map

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

package/lib/module/views/MaterialTopTabView.js

@@ -0,0 +1,63 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import { CommonActions, useTheme } from '@react-navigation/native';
+import * as React from 'react';
+import { TabView } from 'react-native-tab-view';
+import MaterialTopTabBar from './MaterialTopTabBar';
+export default function MaterialTopTabView({
+  tabBar = props => /*#__PURE__*/React.createElement(MaterialTopTabBar, props),
+  state,
+  navigation,
+  descriptors,
+  sceneContainerStyle,
+  ...rest
+}) {
+  const {
+    colors
+  } = useTheme();
+
+  const renderTabBar = props => {
+    return tabBar({ ...props,
+      state: state,
+      navigation: navigation,
+      descriptors: descriptors
+    });
+  };
+
+  const focusedOptions = descriptors[state.routes[state.index].key].options;
+  return /*#__PURE__*/React.createElement(TabView, _extends({}, 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
+    }) => {
+      var _descriptors$route$ke, _descriptors$route$ke2, _descriptors$route$ke3;
+
+      return (_descriptors$route$ke = (_descriptors$route$ke2 = (_descriptors$route$ke3 = descriptors[route.key].options).lazyPlaceholder) === null || _descriptors$route$ke2 === void 0 ? void 0 : _descriptors$route$ke2.call(_descriptors$route$ke3)) !== null && _descriptors$route$ke !== void 0 ? _descriptors$route$ke : 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]
+  }));
+}
+//# sourceMappingURL=MaterialTopTabView.js.map

package/lib/module/views/MaterialTopTabView.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["MaterialTopTabView.tsx"],"names":["CommonActions","useTheme","React","TabView","MaterialTopTabBar","MaterialTopTabView","tabBar","props","state","navigation","descriptors","sceneContainerStyle","rest","colors","renderTabBar","focusedOptions","routes","index","key","options","dispatch","navigate","name","merge","target","route","render","lazyPlaceholder","lazy","lazyPreloadDistance","swipeEnabled","emit","type","backgroundColor","background"],"mappings":";;AAAA,SACEA,aADF,EAKEC,QALF,QAMO,0BANP;AAOA,OAAO,KAAKC,KAAZ,MAAuB,OAAvB;AACA,SAA6BC,OAA7B,QAA4C,uBAA5C;AAQA,OAAOC,iBAAP,MAA8B,qBAA9B;AAQA,eAAe,SAASC,kBAAT,CAA4B;AACzCC,EAAAA,MAAM,GAAIC,KAAD,iBAAmC,oBAAC,iBAAD,EAAuBA,KAAvB,CADH;AAEzCC,EAAAA,KAFyC;AAGzCC,EAAAA,UAHyC;AAIzCC,EAAAA,WAJyC;AAKzCC,EAAAA,mBALyC;AAMzC,KAAGC;AANsC,CAA5B,EAOL;AACR,QAAM;AAAEC,IAAAA;AAAF,MAAaZ,QAAQ,EAA3B;;AAEA,QAAMa,YAAY,GAAIP,KAAD,IAA+B;AAClD,WAAOD,MAAM,CAAC,EACZ,GAAGC,KADS;AAEZC,MAAAA,KAAK,EAAEA,KAFK;AAGZC,MAAAA,UAAU,EAAEA,UAHA;AAIZC,MAAAA,WAAW,EAAEA;AAJD,KAAD,CAAb;AAMD,GAPD;;AASA,QAAMK,cAAc,GAAGL,WAAW,CAACF,KAAK,CAACQ,MAAN,CAAaR,KAAK,CAACS,KAAnB,EAA0BC,GAA3B,CAAX,CAA2CC,OAAlE;AAEA,sBACE,oBAAC,OAAD,eACMP,IADN;AAEE,IAAA,aAAa,EAAGK,KAAD,IACbR,UAAU,CAACW,QAAX,CAAoB,EAClB,GAAGpB,aAAa,CAACqB,QAAd,CAAuB;AACxBC,QAAAA,IAAI,EAAEd,KAAK,CAACQ,MAAN,CAAaC,KAAb,EAAoBK,IADF;AAExBC,QAAAA,KAAK,EAAE;AAFiB,OAAvB,CADe;AAKlBC,MAAAA,MAAM,EAAEhB,KAAK,CAACU;AALI,KAApB,CAHJ;AAWE,IAAA,WAAW,EAAE,CAAC;AAAEO,MAAAA;AAAF,KAAD,KAAef,WAAW,CAACe,KAAK,CAACP,GAAP,CAAX,CAAuBQ,MAAvB,EAX9B;AAYE,IAAA,eAAe,EAAElB,KAZnB;AAaE,IAAA,YAAY,EAAEM,YAbhB;AAcE,IAAA,qBAAqB,EAAE,CAAC;AAAEW,MAAAA;AAAF,KAAD;AAAA;;AAAA,gEACrB,0BAAAf,WAAW,CAACe,KAAK,CAACP,GAAP,CAAX,CAAuBC,OAAvB,EAA+BQ,eADV,2DACrB,mDADqB,yEACiC,IADjC;AAAA,KAdzB;AAiBE,IAAA,IAAI,EAAE,CAAC;AAAEF,MAAAA;AAAF,KAAD,KAAef,WAAW,CAACe,KAAK,CAACP,GAAP,CAAX,CAAuBC,OAAvB,CAA+BS,IAA/B,KAAwC,IAjB/D;AAkBE,IAAA,mBAAmB,EAAEb,cAAc,CAACc,mBAlBtC;AAmBE,IAAA,YAAY,EAAEd,cAAc,CAACe,YAnB/B;AAoBE,IAAA,YAAY,EAAE,MAAMrB,UAAU,CAACsB,IAAX,CAAgB;AAAEC,MAAAA,IAAI,EAAE;AAAR,KAAhB,CApBtB;AAqBE,IAAA,UAAU,EAAE,MAAMvB,UAAU,CAACsB,IAAX,CAAgB;AAAEC,MAAAA,IAAI,EAAE;AAAR,KAAhB,CArBpB;AAsBE,IAAA,mBAAmB,EAAE,CACnB;AAAEC,MAAAA,eAAe,EAAEpB,MAAM,CAACqB;AAA1B,KADmB,EAEnBvB,mBAFmB;AAtBvB,KADF;AA6BD","sourcesContent":["import {\n  CommonActions,\n  ParamListBase,\n  Route,\n  TabNavigationState,\n  useTheme,\n} from '@react-navigation/native';\nimport * as React from 'react';\nimport { SceneRendererProps, TabView } from 'react-native-tab-view';\n\nimport type {\n  MaterialTopTabBarProps,\n  MaterialTopTabDescriptorMap,\n  MaterialTopTabNavigationConfig,\n  MaterialTopTabNavigationHelpers,\n} from '../types';\nimport MaterialTopTabBar from './MaterialTopTabBar';\n\ntype Props = MaterialTopTabNavigationConfig & {\n  state: TabNavigationState<ParamListBase>;\n  navigation: MaterialTopTabNavigationHelpers;\n  descriptors: MaterialTopTabDescriptorMap;\n};\n\nexport default function MaterialTopTabView({\n  tabBar = (props: MaterialTopTabBarProps) => <MaterialTopTabBar {...props} />,\n  state,\n  navigation,\n  descriptors,\n  sceneContainerStyle,\n  ...rest\n}: Props) {\n  const { colors } = useTheme();\n\n  const renderTabBar = (props: SceneRendererProps) => {\n    return tabBar({\n      ...props,\n      state: state,\n      navigation: navigation,\n      descriptors: descriptors,\n    });\n  };\n\n  const focusedOptions = descriptors[state.routes[state.index].key].options;\n\n  return (\n    <TabView<Route<string>>\n      {...rest}\n      onIndexChange={(index) =>\n        navigation.dispatch({\n          ...CommonActions.navigate({\n            name: state.routes[index].name,\n            merge: true,\n          }),\n          target: state.key,\n        })\n      }\n      renderScene={({ route }) => descriptors[route.key].render()}\n      navigationState={state}\n      renderTabBar={renderTabBar}\n      renderLazyPlaceholder={({ route }) =>\n        descriptors[route.key].options.lazyPlaceholder?.() ?? null\n      }\n      lazy={({ route }) => descriptors[route.key].options.lazy === true}\n      lazyPreloadDistance={focusedOptions.lazyPreloadDistance}\n      swipeEnabled={focusedOptions.swipeEnabled}\n      onSwipeStart={() => navigation.emit({ type: 'swipeStart' })}\n      onSwipeEnd={() => navigation.emit({ type: 'swipeEnd' })}\n      sceneContainerStyle={[\n        { backgroundColor: colors.background },\n        sceneContainerStyle,\n      ]}\n    />\n  );\n}\n"]}

package/lib/typescript/src/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Navigators
+ */
+export { default as createMaterialTopTabNavigator } from './navigators/createMaterialTopTabNavigator';
+/**
+ * Views
+ */
+export { default as MaterialTopTabBar } from './views/MaterialTopTabBar';
+export { default as MaterialTopTabView } from './views/MaterialTopTabView';
+/**
+ * Types
+ */
+export type { MaterialTopTabBarProps, MaterialTopTabNavigationOptions, MaterialTopTabNavigationProp, MaterialTopTabScreenProps, } from './types';

package/lib/typescript/src/navigators/createMaterialTopTabNavigator.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { DefaultNavigatorOptions, ParamListBase, TabNavigationState, TabRouterOptions } from '@react-navigation/native';
+import type { MaterialTopTabNavigationConfig, MaterialTopTabNavigationEventMap, MaterialTopTabNavigationOptions } from '../types';
+declare type Props = DefaultNavigatorOptions<ParamListBase, TabNavigationState<ParamListBase>, MaterialTopTabNavigationOptions, MaterialTopTabNavigationEventMap> & TabRouterOptions & MaterialTopTabNavigationConfig;
+declare function MaterialTopTabNavigator({ initialRouteName, backBehavior, children, screenListeners, screenOptions, swipeEnabled, lazy, lazyPlaceholder, lazyPreloadDistance, tabBarOptions, ...rest }: Props): JSX.Element;
+declare const _default: <ParamList extends ParamListBase>() => import("@react-navigation/native").TypedNavigator<ParamList, TabNavigationState<ParamListBase>, MaterialTopTabNavigationOptions, MaterialTopTabNavigationEventMap, typeof MaterialTopTabNavigator>;
+export default _default;

package/lib/typescript/src/types.d.ts

@@ -0,0 +1,190 @@
+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 declare 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 declare type MaterialTopTabNavigationHelpers = NavigationHelpers<ParamListBase, MaterialTopTabNavigationEventMap> & TabActionHelpers<ParamListBase>;
+export declare type MaterialTopTabNavigationProp<ParamList extends ParamListBase, RouteName extends keyof ParamList = keyof ParamList> = NavigationProp<ParamList, RouteName, TabNavigationState<ParamList>, MaterialTopTabNavigationOptions, MaterialTopTabNavigationEventMap> & TabActionHelpers<ParamList>;
+export declare type MaterialTopTabScreenProps<ParamList extends ParamListBase, RouteName extends keyof ParamList = keyof ParamList> = {
+    navigation: MaterialTopTabNavigationProp<ParamList, RouteName>;
+    route: RouteProp<ParamList, RouteName>;
+};
+export declare 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 declare type MaterialTopTabDescriptor = Descriptor<MaterialTopTabNavigationOptions, MaterialTopTabNavigationProp<ParamListBase>, RouteProp<ParamListBase>>;
+export declare type MaterialTopTabDescriptorMap = Record<string, MaterialTopTabDescriptor>;
+export declare 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 declare type MaterialTopTabBarProps = SceneRendererProps & {
+    state: TabNavigationState<ParamListBase>;
+    navigation: NavigationHelpers<ParamListBase, MaterialTopTabNavigationEventMap>;
+    descriptors: MaterialTopTabDescriptorMap;
+};

package/lib/typescript/src/views/MaterialTopTabBar.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { MaterialTopTabBarProps } from '../types';
+export default function TabBarTop({ state, navigation, descriptors, ...rest }: MaterialTopTabBarProps): JSX.Element;

package/lib/typescript/src/views/MaterialTopTabView.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ParamListBase, TabNavigationState } from '@react-navigation/native';
+import type { MaterialTopTabDescriptorMap, MaterialTopTabNavigationConfig, MaterialTopTabNavigationHelpers } from '../types';
+declare type Props = MaterialTopTabNavigationConfig & {
+    state: TabNavigationState<ParamListBase>;
+    navigation: MaterialTopTabNavigationHelpers;
+    descriptors: MaterialTopTabDescriptorMap;
+};
+export default function MaterialTopTabView({ tabBar, state, navigation, descriptors, sceneContainerStyle, ...rest }: Props): JSX.Element;
+export {};

package/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "@react-navigation/material-top-tabs",
+  "description": "Integration for the animated tab view component from react-native-tab-view",
+  "version": "6.0.3",
+  "keywords": [
+    "react-native-component",
+    "react-component",
+    "react-native",
+    "react-navigation",
+    "ios",
+    "android",
+    "material",
+    "tab"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/react-navigation/react-navigation.git",
+    "directory": "packages/material-top-tabs"
+  },
+  "bugs": {
+    "url": "https://github.com/react-navigation/react-navigation/issues"
+  },
+  "homepage": "https://reactnavigation.org/docs/material-top-tab-navigator/",
+  "main": "lib/commonjs/index.js",
+  "react-native": "src/index.tsx",
+  "source": "src/index.tsx",
+  "module": "lib/module/index.js",
+  "types": "lib/typescript/src/index.d.ts",
+  "files": [
+    "src",
+    "lib",
+    "!**/__tests__"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "prepare": "bob build",
+    "clean": "del lib"
+  },
+  "dependencies": {
+    "color": "^3.1.3",
+    "warn-once": "^0.1.0"
+  },
+  "devDependencies": {
+    "@react-navigation/native": "^6.0.3",
+    "@testing-library/react-native": "^7.2.0",
+    "@types/react": "^17.0.9",
+    "@types/react-native": "~0.64.9",
+    "del-cli": "^3.0.1",
+    "react": "~16.13.1",
+    "react-native": "~0.63.4",
+    "react-native-builder-bob": "^0.18.1",
+    "react-native-pager-view": "^5.1.10",
+    "react-native-tab-view": "^3.1.1",
+    "typescript": "^4.3.2"
+  },
+  "peerDependencies": {
+    "@react-navigation/native": "^6.0.0",
+    "react": "*",
+    "react-native": "*",
+    "react-native-pager-view": ">= 4.0.0",
+    "react-native-tab-view": ">= 3.0.0"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "gitHead": "38ac69f17ee314f96d3d4bcee02349fa4a02d422"
+}

package/src/index.tsx

@@ -0,0 +1,20 @@
+/**
+ * Navigators
+ */
+export { default as createMaterialTopTabNavigator } from './navigators/createMaterialTopTabNavigator';
+
+/**
+ * Views
+ */
+export { default as MaterialTopTabBar } from './views/MaterialTopTabBar';
+export { default as MaterialTopTabView } from './views/MaterialTopTabView';
+
+/**
+ * Types
+ */
+export type {
+  MaterialTopTabBarProps,
+  MaterialTopTabNavigationOptions,
+  MaterialTopTabNavigationProp,
+  MaterialTopTabScreenProps,
+} from './types';