@react-navigation/material-top-tabs 6.3.1 → 6.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/commonjs/types.js.map +1 -1
- package/lib/commonjs/views/MaterialTopTabBar.js +4 -1
- package/lib/commonjs/views/MaterialTopTabBar.js.map +1 -1
- package/lib/module/types.js.map +1 -1
- package/lib/module/views/MaterialTopTabBar.js +4 -1
- package/lib/module/views/MaterialTopTabBar.js.map +1 -1
- package/lib/typescript/src/types.d.ts +5 -0
- package/package.json +4 -4
- package/src/types.tsx +10 -1
- package/src/views/MaterialTopTabBar.tsx +9 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["types.tsx"],"sourcesContent":["import type {\n Descriptor,\n NavigationHelpers,\n NavigationProp,\n ParamListBase,\n Route,\n RouteProp,\n TabActionHelpers,\n TabNavigationState,\n} from '@react-navigation/native';\nimport type React from 'react';\nimport type { StyleProp, TextStyle, ViewStyle } from 'react-native';\nimport type {\n SceneRendererProps,\n TabBar,\n TabViewProps,\n} from 'react-native-tab-view';\n\nexport type MaterialTopTabNavigationEventMap = {\n /**\n * Event which fires on tapping on the tab in the tab bar.\n */\n tabPress: { data: undefined; canPreventDefault: true };\n /**\n * Event which fires on long press on the tab in the tab bar.\n */\n tabLongPress: { data: undefined };\n /**\n * Event which fires when a swipe gesture starts, i.e. finger touches the screen.\n */\n swipeStart: { data: undefined };\n /**\n * Event which fires when a swipe gesture ends, i.e. finger leaves the screen.\n */\n swipeEnd: { data: undefined };\n};\n\nexport type MaterialTopTabNavigationHelpers = NavigationHelpers<\n ParamListBase,\n MaterialTopTabNavigationEventMap\n> &\n TabActionHelpers<ParamListBase>;\n\nexport type MaterialTopTabNavigationProp<\n ParamList extends ParamListBase,\n RouteName extends keyof ParamList = keyof ParamList,\n NavigatorID extends string | undefined = undefined\n> = NavigationProp<\n ParamList,\n RouteName,\n NavigatorID,\n TabNavigationState<ParamList>,\n MaterialTopTabNavigationOptions,\n MaterialTopTabNavigationEventMap\n> &\n TabActionHelpers<ParamList>;\n\nexport type MaterialTopTabScreenProps<\n ParamList extends ParamListBase,\n RouteName extends keyof ParamList = keyof ParamList,\n NavigatorID extends string | undefined = undefined\n> = {\n navigation: MaterialTopTabNavigationProp<ParamList, RouteName, NavigatorID>;\n route: RouteProp<ParamList, RouteName>;\n};\n\nexport type MaterialTopTabNavigationOptions = {\n /**\n * Title text for the screen.\n */\n title?: string;\n\n /**\n * Title string of a tab displayed in the tab bar\n * or a function that given { focused: boolean, color: string } returns a React.Node, to display in tab bar.\n *\n * When undefined, scene title is used. Use `tabBarShowLabel` to hide the label.\n */\n tabBarLabel?:\n | string\n | ((props: {
|
|
1
|
+
{"version":3,"names":[],"sources":["types.tsx"],"sourcesContent":["import type {\n Descriptor,\n NavigationHelpers,\n NavigationProp,\n ParamListBase,\n Route,\n RouteProp,\n TabActionHelpers,\n TabNavigationState,\n} from '@react-navigation/native';\nimport type React from 'react';\nimport type { StyleProp, TextStyle, ViewStyle } from 'react-native';\nimport type {\n SceneRendererProps,\n TabBar,\n TabViewProps,\n} from 'react-native-tab-view';\n\nexport type MaterialTopTabNavigationEventMap = {\n /**\n * Event which fires on tapping on the tab in the tab bar.\n */\n tabPress: { data: undefined; canPreventDefault: true };\n /**\n * Event which fires on long press on the tab in the tab bar.\n */\n tabLongPress: { data: undefined };\n /**\n * Event which fires when a swipe gesture starts, i.e. finger touches the screen.\n */\n swipeStart: { data: undefined };\n /**\n * Event which fires when a swipe gesture ends, i.e. finger leaves the screen.\n */\n swipeEnd: { data: undefined };\n};\n\nexport type MaterialTopTabNavigationHelpers = NavigationHelpers<\n ParamListBase,\n MaterialTopTabNavigationEventMap\n> &\n TabActionHelpers<ParamListBase>;\n\nexport type MaterialTopTabNavigationProp<\n ParamList extends ParamListBase,\n RouteName extends keyof ParamList = keyof ParamList,\n NavigatorID extends string | undefined = undefined\n> = NavigationProp<\n ParamList,\n RouteName,\n NavigatorID,\n TabNavigationState<ParamList>,\n MaterialTopTabNavigationOptions,\n MaterialTopTabNavigationEventMap\n> &\n TabActionHelpers<ParamList>;\n\nexport type MaterialTopTabScreenProps<\n ParamList extends ParamListBase,\n RouteName extends keyof ParamList = keyof ParamList,\n NavigatorID extends string | undefined = undefined\n> = {\n navigation: MaterialTopTabNavigationProp<ParamList, RouteName, NavigatorID>;\n route: RouteProp<ParamList, RouteName>;\n};\n\nexport type MaterialTopTabNavigationOptions = {\n /**\n * Title text for the screen.\n */\n title?: string;\n\n /**\n * Title string of a tab displayed in the tab bar\n * or a function that given { focused: boolean, color: string } returns a React.Node, to display in tab bar.\n *\n * When undefined, scene title is used. Use `tabBarShowLabel` to hide the label.\n */\n tabBarLabel?:\n | string\n | ((props: {\n focused: boolean;\n color: string;\n children: string;\n }) => React.ReactNode);\n\n /**\n * Accessibility label for the tab button. This is read by the screen reader when the user taps the tab.\n * It's recommended to set this if you don't have a label for the tab.\n */\n tabBarAccessibilityLabel?: string;\n\n /**\n * Whether label font should scale to respect Text Size accessibility settings.\n */\n tabBarAllowFontScaling?: boolean;\n\n /**\n * Whether the tab label should be visible. Defaults to `true`.\n */\n tabBarShowLabel?: boolean;\n\n /**\n * A function that given { focused: boolean, color: string } returns a React.Node to display in the tab bar.\n */\n tabBarIcon?: (props: { focused: boolean; color: string }) => React.ReactNode;\n\n /**\n * Whether the tab icon should be visible. Defaults to `false`.\n */\n tabBarShowIcon?: boolean;\n\n /**\n * Function that returns a React element to use as a badge for the tab.\n */\n tabBarBadge?: () => React.ReactNode;\n\n /**\n * Function that returns a React element as the tab bar indicator.\n */\n tabBarIndicator?: (\n props: Omit<\n Parameters<\n NonNullable<React.ComponentProps<typeof TabBar>['renderIndicator']>\n >[0],\n 'navigationState'\n > & { state: TabNavigationState<ParamListBase> }\n ) => React.ReactNode;\n\n /**\n * Style object for the tab bar indicator.\n */\n tabBarIndicatorStyle?: StyleProp<ViewStyle>;\n\n /**\n * Style object for the view containing the tab bar indicator.\n */\n tabBarIndicatorContainerStyle?: StyleProp<ViewStyle>;\n\n /**\n * ID to locate this tab button in tests.\n */\n tabBarTestID?: string;\n\n /**\n * Color for the icon and label in the active tab.\n */\n tabBarActiveTintColor?: string;\n\n /**\n * Color for the icon and label in the inactive tabs.\n */\n tabBarInactiveTintColor?: string;\n\n /**\n * Color for material ripple (Android >= 5.0 only).\n */\n tabBarPressColor?: string;\n\n /**\n * Opacity for pressed tab (iOS and Android < 5.0 only).\n */\n tabBarPressOpacity?: number;\n\n /**\n * Boolean indicating whether the tab bar bounces when overscrolling.\n */\n tabBarBounces?: boolean;\n\n /**\n * Boolean indicating whether to make the tab bar scrollable.\n *\n * If you set this to `true`, you should also specify a width in `tabBarItemStyle` to improve the performance of initial render.\n */\n tabBarScrollEnabled?: boolean;\n\n /**\n * Style object for the tab icon container.\n */\n tabBarIconStyle?: StyleProp<ViewStyle>;\n\n /**\n * Style object for the tab label.\n */\n tabBarLabelStyle?: StyleProp<TextStyle>;\n\n /**\n * Style object for the individual tab items.\n */\n tabBarItemStyle?: StyleProp<ViewStyle>;\n\n /**\n * Style object for the view containing the tab items.\n */\n tabBarContentContainerStyle?: StyleProp<ViewStyle>;\n\n /**\n * Style object for the the tab bar.\n */\n tabBarStyle?: StyleProp<ViewStyle>;\n\n /**\n * Gap between tabs\n */\n tabBarGap?: number;\n\n /**\n * Whether to enable swipe gestures when this screen is focused.\n * Swipe gestures are enabled by default. Passing `false` will disable swipe gestures,\n * but the user can still switch tabs by pressing the tab bar.\n */\n swipeEnabled?: boolean;\n\n /**\n * Whether to enable animations when switching between tabs by pressing on the tab bar or programmatically.\n * Switching tab via swipe gesture will still result in an animation.\n */\n animationEnabled?: boolean;\n\n /**\n * Whether this screen should be lazily rendered. When this is set to `true`,\n * the screen will be rendered as it comes into the viewport.\n * By default all screens are rendered to provide a smoother swipe experience.\n * But you might want to defer the rendering of screens out of the viewport until the user sees them.\n * To enable lazy rendering for this screen, set `lazy` to `true`.\n *\n * When you enable `lazy`, the lazy loaded screens will usually take some time to render\n * when they come into the viewport. You can use the `lazyPlaceholder` prop to customize\n * what the user sees during this short period.\n */\n lazy?: boolean;\n\n /**\n * When `lazy` is enabled, you can specify how many adjacent screens should be preloaded in advance with this prop.\n * This value defaults to `0` which means lazy pages are loaded as they come into the viewport.\n */\n lazyPreloadDistance?: number;\n\n /**\n * Function that returns a React element to render if this screen hasn't been rendered yet.\n * The `lazy` option also needs to be enabled for this to work.\n *\n * This view is usually only shown for a split second. Keep it lightweight.\n *\n * By default, this renders `null`.\n */\n lazyPlaceholder?: () => React.ReactNode;\n};\n\nexport type MaterialTopTabDescriptor = Descriptor<\n MaterialTopTabNavigationOptions,\n MaterialTopTabNavigationProp<ParamListBase>,\n RouteProp<ParamListBase>\n>;\n\nexport type MaterialTopTabDescriptorMap = Record<\n string,\n MaterialTopTabDescriptor\n>;\n\nexport type MaterialTopTabNavigationConfig = Omit<\n TabViewProps<Route<string>>,\n | 'navigationState'\n | 'onIndexChange'\n | 'onSwipeStart'\n | 'onSwipeEnd'\n | 'renderScene'\n | 'renderTabBar'\n | 'renderLazyPlaceholder'\n | 'swipeEnabled'\n | 'animationEnabled'\n | 'lazy'\n | 'lazyPreloadDistance'\n | 'lazyPlaceholder'\n> & {\n /**\n * Function that returns a React element to display as the tab bar.\n */\n tabBar?: (props: MaterialTopTabBarProps) => React.ReactNode;\n};\n\nexport type MaterialTopTabBarProps = SceneRendererProps & {\n state: TabNavigationState<ParamListBase>;\n navigation: NavigationHelpers<\n ParamListBase,\n MaterialTopTabNavigationEventMap\n >;\n descriptors: MaterialTopTabDescriptorMap;\n};\n"],"mappings":""}
|
|
@@ -50,6 +50,7 @@ function TabBarTop(_ref) {
|
|
|
50
50
|
indicatorStyle: [{
|
|
51
51
|
backgroundColor: colors.primary
|
|
52
52
|
}, focusedOptions.tabBarIndicatorStyle],
|
|
53
|
+
gap: focusedOptions.tabBarGap,
|
|
53
54
|
indicatorContainerStyle: focusedOptions.tabBarIndicatorContainerStyle,
|
|
54
55
|
contentContainerStyle: focusedOptions.tabBarContentContainerStyle,
|
|
55
56
|
style: [{
|
|
@@ -142,9 +143,11 @@ function TabBarTop(_ref) {
|
|
|
142
143
|
}, label);
|
|
143
144
|
}
|
|
144
145
|
|
|
146
|
+
const children = typeof options.tabBarLabel === 'string' ? options.tabBarLabel : options.title !== undefined ? options.title : route.name;
|
|
145
147
|
return label({
|
|
146
148
|
focused,
|
|
147
|
-
color
|
|
149
|
+
color,
|
|
150
|
+
children
|
|
148
151
|
});
|
|
149
152
|
},
|
|
150
153
|
renderBadge: _ref8 => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["TabBarTop","state","navigation","descriptors","rest","colors","useTheme","focusedOptions","routes","index","key","options","activeColor","tabBarActiveTintColor","text","inactiveColor","tabBarInactiveTintColor","Color","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","StyleSheet","create","height","width","textAlign","textTransform","fontSize","margin"],"sources":["MaterialTopTabBar.tsx"],"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"],"mappings":";;;;;;;AAAA;;AAMA;;AACA;;AACA;;AACA;;;;;;;;;;AAIe,SAASA,SAAT,OAKY;EAAA;;EAAA,IALO;IAChCC,KADgC;IAEhCC,UAFgC;IAGhCC,WAHgC;IAIhC,GAAGC;EAJ6B,CAKP;EACzB,MAAM;IAAEC;EAAF,IAAa,IAAAC,gBAAA,GAAnB;EAEA,MAAMC,cAAc,GAAGJ,WAAW,CAACF,KAAK,CAACO,MAAN,CAAaP,KAAK,CAACQ,KAAnB,EAA0BC,GAA3B,CAAX,CAA2CC,OAAlE;EAEA,MAAMC,WAAW,4BAAGL,cAAc,CAACM,qBAAlB,yEAA2CR,MAAM,CAACS,IAAnE;EACA,MAAMC,aAAa,6BACjBR,cAAc,CAACS,uBADE,2EAEjB,IAAAC,cAAA,EAAML,WAAN,EAAmBM,KAAnB,CAAyB,GAAzB,EAA8BC,GAA9B,GAAoCC,MAApC,EAFF;EAIA,oBACE,oBAAC,0BAAD,eACMhB,IADN;IAEE,eAAe,EAAEH,KAFnB;IAGE,aAAa,EAAEM,cAAc,CAACc,mBAHhC;IAIE,OAAO,EAAEd,cAAc,CAACe,aAJ1B;IAKE,WAAW,EAAEV,WALf;IAME,aAAa,EAAEG,aANjB;IAOE,UAAU,EAAER,cAAc,CAACgB,gBAP7B;IAQE,YAAY,EAAEhB,cAAc,CAACiB,kBAR/B;IASE,QAAQ,EAAEjB,cAAc,CAACkB,eAT3B;IAUE,cAAc,EAAE,CACd;MAAEC,eAAe,EAAErB,MAAM,CAACsB;IAA1B,CADc,EAEdpB,cAAc,CAACqB,oBAFD,CAVlB;IAcE,
|
|
1
|
+
{"version":3,"names":["TabBarTop","state","navigation","descriptors","rest","colors","useTheme","focusedOptions","routes","index","key","options","activeColor","tabBarActiveTintColor","text","inactiveColor","tabBarInactiveTintColor","Color","alpha","rgb","string","tabBarScrollEnabled","tabBarBounces","tabBarPressColor","tabBarPressOpacity","tabBarItemStyle","backgroundColor","primary","tabBarIndicatorStyle","tabBarGap","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","children","tabBarBadge","navigationState","tabBarIndicator","StyleSheet","create","height","width","textAlign","textTransform","fontSize","margin"],"sources":["MaterialTopTabBar.tsx"],"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 gap={focusedOptions.tabBarGap}\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 const children =\n typeof options.tabBarLabel === 'string'\n ? options.tabBarLabel\n : options.title !== undefined\n ? options.title\n : route.name;\n\n return label({ focused, color, children });\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"],"mappings":"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"}
|
package/lib/module/types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["types.tsx"],"sourcesContent":["import type {\n Descriptor,\n NavigationHelpers,\n NavigationProp,\n ParamListBase,\n Route,\n RouteProp,\n TabActionHelpers,\n TabNavigationState,\n} from '@react-navigation/native';\nimport type React from 'react';\nimport type { StyleProp, TextStyle, ViewStyle } from 'react-native';\nimport type {\n SceneRendererProps,\n TabBar,\n TabViewProps,\n} from 'react-native-tab-view';\n\nexport type MaterialTopTabNavigationEventMap = {\n /**\n * Event which fires on tapping on the tab in the tab bar.\n */\n tabPress: { data: undefined; canPreventDefault: true };\n /**\n * Event which fires on long press on the tab in the tab bar.\n */\n tabLongPress: { data: undefined };\n /**\n * Event which fires when a swipe gesture starts, i.e. finger touches the screen.\n */\n swipeStart: { data: undefined };\n /**\n * Event which fires when a swipe gesture ends, i.e. finger leaves the screen.\n */\n swipeEnd: { data: undefined };\n};\n\nexport type MaterialTopTabNavigationHelpers = NavigationHelpers<\n ParamListBase,\n MaterialTopTabNavigationEventMap\n> &\n TabActionHelpers<ParamListBase>;\n\nexport type MaterialTopTabNavigationProp<\n ParamList extends ParamListBase,\n RouteName extends keyof ParamList = keyof ParamList,\n NavigatorID extends string | undefined = undefined\n> = NavigationProp<\n ParamList,\n RouteName,\n NavigatorID,\n TabNavigationState<ParamList>,\n MaterialTopTabNavigationOptions,\n MaterialTopTabNavigationEventMap\n> &\n TabActionHelpers<ParamList>;\n\nexport type MaterialTopTabScreenProps<\n ParamList extends ParamListBase,\n RouteName extends keyof ParamList = keyof ParamList,\n NavigatorID extends string | undefined = undefined\n> = {\n navigation: MaterialTopTabNavigationProp<ParamList, RouteName, NavigatorID>;\n route: RouteProp<ParamList, RouteName>;\n};\n\nexport type MaterialTopTabNavigationOptions = {\n /**\n * Title text for the screen.\n */\n title?: string;\n\n /**\n * Title string of a tab displayed in the tab bar\n * or a function that given { focused: boolean, color: string } returns a React.Node, to display in tab bar.\n *\n * When undefined, scene title is used. Use `tabBarShowLabel` to hide the label.\n */\n tabBarLabel?:\n | string\n | ((props: {
|
|
1
|
+
{"version":3,"names":[],"sources":["types.tsx"],"sourcesContent":["import type {\n Descriptor,\n NavigationHelpers,\n NavigationProp,\n ParamListBase,\n Route,\n RouteProp,\n TabActionHelpers,\n TabNavigationState,\n} from '@react-navigation/native';\nimport type React from 'react';\nimport type { StyleProp, TextStyle, ViewStyle } from 'react-native';\nimport type {\n SceneRendererProps,\n TabBar,\n TabViewProps,\n} from 'react-native-tab-view';\n\nexport type MaterialTopTabNavigationEventMap = {\n /**\n * Event which fires on tapping on the tab in the tab bar.\n */\n tabPress: { data: undefined; canPreventDefault: true };\n /**\n * Event which fires on long press on the tab in the tab bar.\n */\n tabLongPress: { data: undefined };\n /**\n * Event which fires when a swipe gesture starts, i.e. finger touches the screen.\n */\n swipeStart: { data: undefined };\n /**\n * Event which fires when a swipe gesture ends, i.e. finger leaves the screen.\n */\n swipeEnd: { data: undefined };\n};\n\nexport type MaterialTopTabNavigationHelpers = NavigationHelpers<\n ParamListBase,\n MaterialTopTabNavigationEventMap\n> &\n TabActionHelpers<ParamListBase>;\n\nexport type MaterialTopTabNavigationProp<\n ParamList extends ParamListBase,\n RouteName extends keyof ParamList = keyof ParamList,\n NavigatorID extends string | undefined = undefined\n> = NavigationProp<\n ParamList,\n RouteName,\n NavigatorID,\n TabNavigationState<ParamList>,\n MaterialTopTabNavigationOptions,\n MaterialTopTabNavigationEventMap\n> &\n TabActionHelpers<ParamList>;\n\nexport type MaterialTopTabScreenProps<\n ParamList extends ParamListBase,\n RouteName extends keyof ParamList = keyof ParamList,\n NavigatorID extends string | undefined = undefined\n> = {\n navigation: MaterialTopTabNavigationProp<ParamList, RouteName, NavigatorID>;\n route: RouteProp<ParamList, RouteName>;\n};\n\nexport type MaterialTopTabNavigationOptions = {\n /**\n * Title text for the screen.\n */\n title?: string;\n\n /**\n * Title string of a tab displayed in the tab bar\n * or a function that given { focused: boolean, color: string } returns a React.Node, to display in tab bar.\n *\n * When undefined, scene title is used. Use `tabBarShowLabel` to hide the label.\n */\n tabBarLabel?:\n | string\n | ((props: {\n focused: boolean;\n color: string;\n children: string;\n }) => React.ReactNode);\n\n /**\n * Accessibility label for the tab button. This is read by the screen reader when the user taps the tab.\n * It's recommended to set this if you don't have a label for the tab.\n */\n tabBarAccessibilityLabel?: string;\n\n /**\n * Whether label font should scale to respect Text Size accessibility settings.\n */\n tabBarAllowFontScaling?: boolean;\n\n /**\n * Whether the tab label should be visible. Defaults to `true`.\n */\n tabBarShowLabel?: boolean;\n\n /**\n * A function that given { focused: boolean, color: string } returns a React.Node to display in the tab bar.\n */\n tabBarIcon?: (props: { focused: boolean; color: string }) => React.ReactNode;\n\n /**\n * Whether the tab icon should be visible. Defaults to `false`.\n */\n tabBarShowIcon?: boolean;\n\n /**\n * Function that returns a React element to use as a badge for the tab.\n */\n tabBarBadge?: () => React.ReactNode;\n\n /**\n * Function that returns a React element as the tab bar indicator.\n */\n tabBarIndicator?: (\n props: Omit<\n Parameters<\n NonNullable<React.ComponentProps<typeof TabBar>['renderIndicator']>\n >[0],\n 'navigationState'\n > & { state: TabNavigationState<ParamListBase> }\n ) => React.ReactNode;\n\n /**\n * Style object for the tab bar indicator.\n */\n tabBarIndicatorStyle?: StyleProp<ViewStyle>;\n\n /**\n * Style object for the view containing the tab bar indicator.\n */\n tabBarIndicatorContainerStyle?: StyleProp<ViewStyle>;\n\n /**\n * ID to locate this tab button in tests.\n */\n tabBarTestID?: string;\n\n /**\n * Color for the icon and label in the active tab.\n */\n tabBarActiveTintColor?: string;\n\n /**\n * Color for the icon and label in the inactive tabs.\n */\n tabBarInactiveTintColor?: string;\n\n /**\n * Color for material ripple (Android >= 5.0 only).\n */\n tabBarPressColor?: string;\n\n /**\n * Opacity for pressed tab (iOS and Android < 5.0 only).\n */\n tabBarPressOpacity?: number;\n\n /**\n * Boolean indicating whether the tab bar bounces when overscrolling.\n */\n tabBarBounces?: boolean;\n\n /**\n * Boolean indicating whether to make the tab bar scrollable.\n *\n * If you set this to `true`, you should also specify a width in `tabBarItemStyle` to improve the performance of initial render.\n */\n tabBarScrollEnabled?: boolean;\n\n /**\n * Style object for the tab icon container.\n */\n tabBarIconStyle?: StyleProp<ViewStyle>;\n\n /**\n * Style object for the tab label.\n */\n tabBarLabelStyle?: StyleProp<TextStyle>;\n\n /**\n * Style object for the individual tab items.\n */\n tabBarItemStyle?: StyleProp<ViewStyle>;\n\n /**\n * Style object for the view containing the tab items.\n */\n tabBarContentContainerStyle?: StyleProp<ViewStyle>;\n\n /**\n * Style object for the the tab bar.\n */\n tabBarStyle?: StyleProp<ViewStyle>;\n\n /**\n * Gap between tabs\n */\n tabBarGap?: number;\n\n /**\n * Whether to enable swipe gestures when this screen is focused.\n * Swipe gestures are enabled by default. Passing `false` will disable swipe gestures,\n * but the user can still switch tabs by pressing the tab bar.\n */\n swipeEnabled?: boolean;\n\n /**\n * Whether to enable animations when switching between tabs by pressing on the tab bar or programmatically.\n * Switching tab via swipe gesture will still result in an animation.\n */\n animationEnabled?: boolean;\n\n /**\n * Whether this screen should be lazily rendered. When this is set to `true`,\n * the screen will be rendered as it comes into the viewport.\n * By default all screens are rendered to provide a smoother swipe experience.\n * But you might want to defer the rendering of screens out of the viewport until the user sees them.\n * To enable lazy rendering for this screen, set `lazy` to `true`.\n *\n * When you enable `lazy`, the lazy loaded screens will usually take some time to render\n * when they come into the viewport. You can use the `lazyPlaceholder` prop to customize\n * what the user sees during this short period.\n */\n lazy?: boolean;\n\n /**\n * When `lazy` is enabled, you can specify how many adjacent screens should be preloaded in advance with this prop.\n * This value defaults to `0` which means lazy pages are loaded as they come into the viewport.\n */\n lazyPreloadDistance?: number;\n\n /**\n * Function that returns a React element to render if this screen hasn't been rendered yet.\n * The `lazy` option also needs to be enabled for this to work.\n *\n * This view is usually only shown for a split second. Keep it lightweight.\n *\n * By default, this renders `null`.\n */\n lazyPlaceholder?: () => React.ReactNode;\n};\n\nexport type MaterialTopTabDescriptor = Descriptor<\n MaterialTopTabNavigationOptions,\n MaterialTopTabNavigationProp<ParamListBase>,\n RouteProp<ParamListBase>\n>;\n\nexport type MaterialTopTabDescriptorMap = Record<\n string,\n MaterialTopTabDescriptor\n>;\n\nexport type MaterialTopTabNavigationConfig = Omit<\n TabViewProps<Route<string>>,\n | 'navigationState'\n | 'onIndexChange'\n | 'onSwipeStart'\n | 'onSwipeEnd'\n | 'renderScene'\n | 'renderTabBar'\n | 'renderLazyPlaceholder'\n | 'swipeEnabled'\n | 'animationEnabled'\n | 'lazy'\n | 'lazyPreloadDistance'\n | 'lazyPlaceholder'\n> & {\n /**\n * Function that returns a React element to display as the tab bar.\n */\n tabBar?: (props: MaterialTopTabBarProps) => React.ReactNode;\n};\n\nexport type MaterialTopTabBarProps = SceneRendererProps & {\n state: TabNavigationState<ParamListBase>;\n navigation: NavigationHelpers<\n ParamListBase,\n MaterialTopTabNavigationEventMap\n >;\n descriptors: MaterialTopTabDescriptorMap;\n};\n"],"mappings":""}
|
|
@@ -32,6 +32,7 @@ export default function TabBarTop(_ref) {
|
|
|
32
32
|
indicatorStyle: [{
|
|
33
33
|
backgroundColor: colors.primary
|
|
34
34
|
}, focusedOptions.tabBarIndicatorStyle],
|
|
35
|
+
gap: focusedOptions.tabBarGap,
|
|
35
36
|
indicatorContainerStyle: focusedOptions.tabBarIndicatorContainerStyle,
|
|
36
37
|
contentContainerStyle: focusedOptions.tabBarContentContainerStyle,
|
|
37
38
|
style: [{
|
|
@@ -124,9 +125,11 @@ export default function TabBarTop(_ref) {
|
|
|
124
125
|
}, label);
|
|
125
126
|
}
|
|
126
127
|
|
|
128
|
+
const children = typeof options.tabBarLabel === 'string' ? options.tabBarLabel : options.title !== undefined ? options.title : route.name;
|
|
127
129
|
return label({
|
|
128
130
|
focused,
|
|
129
|
-
color
|
|
131
|
+
color,
|
|
132
|
+
children
|
|
130
133
|
});
|
|
131
134
|
},
|
|
132
135
|
renderBadge: _ref8 => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"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"],"sources":["MaterialTopTabBar.tsx"],"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"],"mappings":";;AAAA,SAIEA,QAJF,QAKO,0BALP;AAMA,OAAOC,KAAP,MAAkB,OAAlB;AACA,OAAO,KAAKC,KAAZ,MAAuB,OAAvB;AACA,SAASC,UAAT,EAAqBC,IAArB,EAA2BC,IAA3B,QAAuC,cAAvC;AACA,SAASC,MAAT,EAAiBC,eAAjB,QAAwC,uBAAxC;AAIA,eAAe,SAASC,SAAT,OAKY;EAAA;;EAAA,IALO;IAChCC,KADgC;IAEhCC,UAFgC;IAGhCC,WAHgC;IAIhC,GAAGC;EAJ6B,CAKP;EACzB,MAAM;IAAEC;EAAF,IAAab,QAAQ,EAA3B;EAEA,MAAMc,cAAc,GAAGH,WAAW,CAACF,KAAK,CAACM,MAAN,CAAaN,KAAK,CAACO,KAAnB,EAA0BC,GAA3B,CAAX,CAA2CC,OAAlE;EAEA,MAAMC,WAAW,4BAAGL,cAAc,CAACM,qBAAlB,yEAA2CP,MAAM,CAACQ,IAAnE;EACA,MAAMC,aAAa,6BACjBR,cAAc,CAACS,uBADE,2EAEjBtB,KAAK,CAACkB,WAAD,CAAL,CAAmBK,KAAnB,CAAyB,GAAzB,EAA8BC,GAA9B,GAAoCC,MAApC,EAFF;EAIA,oBACE,oBAAC,MAAD,eACMd,IADN;IAEE,eAAe,EAAEH,KAFnB;IAGE,aAAa,EAAEK,cAAc,CAACa,mBAHhC;IAIE,OAAO,EAAEb,cAAc,CAACc,aAJ1B;IAKE,WAAW,EAAET,WALf;IAME,aAAa,EAAEG,aANjB;IAOE,UAAU,EAAER,cAAc,CAACe,gBAP7B;IAQE,YAAY,EAAEf,cAAc,CAACgB,kBAR/B;IASE,QAAQ,EAAEhB,cAAc,CAACiB,eAT3B;IAUE,cAAc,EAAE,CACd;MAAEC,eAAe,EAAEnB,MAAM,CAACoB;IAA1B,CADc,EAEdnB,cAAc,CAACoB,oBAFD,CAVlB;IAcE,
|
|
1
|
+
{"version":3,"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","tabBarGap","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","children","tabBarBadge","navigationState","tabBarIndicator","create","height","width","textAlign","textTransform","fontSize","margin"],"sources":["MaterialTopTabBar.tsx"],"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 gap={focusedOptions.tabBarGap}\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 const children =\n typeof options.tabBarLabel === 'string'\n ? options.tabBarLabel\n : options.title !== undefined\n ? options.title\n : route.name;\n\n return label({ focused, color, children });\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"],"mappings":"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"}
|
|
@@ -49,6 +49,7 @@ export declare type MaterialTopTabNavigationOptions = {
|
|
|
49
49
|
tabBarLabel?: string | ((props: {
|
|
50
50
|
focused: boolean;
|
|
51
51
|
color: string;
|
|
52
|
+
children: string;
|
|
52
53
|
}) => React.ReactNode);
|
|
53
54
|
/**
|
|
54
55
|
* Accessibility label for the tab button. This is read by the screen reader when the user taps the tab.
|
|
@@ -142,6 +143,10 @@ export declare type MaterialTopTabNavigationOptions = {
|
|
|
142
143
|
* Style object for the the tab bar.
|
|
143
144
|
*/
|
|
144
145
|
tabBarStyle?: StyleProp<ViewStyle>;
|
|
146
|
+
/**
|
|
147
|
+
* Gap between tabs
|
|
148
|
+
*/
|
|
149
|
+
tabBarGap?: number;
|
|
145
150
|
/**
|
|
146
151
|
* Whether to enable swipe gestures when this screen is focused.
|
|
147
152
|
* Swipe gestures are enabled by default. Passing `false` will disable swipe gestures,
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-navigation/material-top-tabs",
|
|
3
3
|
"description": "Integration for the animated tab view component from react-native-tab-view",
|
|
4
|
-
"version": "6.
|
|
4
|
+
"version": "6.5.0",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-native-component",
|
|
7
7
|
"react-component",
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
"warn-once": "^0.1.0"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
|
-
"@react-navigation/native": "^6.0
|
|
48
|
+
"@react-navigation/native": "^6.1.0",
|
|
49
49
|
"@testing-library/react-native": "^11.5.0",
|
|
50
50
|
"@types/react": "~18.0.0",
|
|
51
51
|
"@types/react-native": "~0.69.1",
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
"react-native": "0.69.5",
|
|
55
55
|
"react-native-builder-bob": "^0.18.1",
|
|
56
56
|
"react-native-pager-view": "5.4.24",
|
|
57
|
-
"react-native-tab-view": "^3.3.
|
|
57
|
+
"react-native-tab-view": "^3.3.3",
|
|
58
58
|
"typescript": "^4.7.4"
|
|
59
59
|
},
|
|
60
60
|
"peerDependencies": {
|
|
@@ -78,5 +78,5 @@
|
|
|
78
78
|
]
|
|
79
79
|
]
|
|
80
80
|
},
|
|
81
|
-
"gitHead": "
|
|
81
|
+
"gitHead": "f7a9b1d102e5ff04ce3f726b934019ddbdd0550c"
|
|
82
82
|
}
|
package/src/types.tsx
CHANGED
|
@@ -78,7 +78,11 @@ export type MaterialTopTabNavigationOptions = {
|
|
|
78
78
|
*/
|
|
79
79
|
tabBarLabel?:
|
|
80
80
|
| string
|
|
81
|
-
| ((props: {
|
|
81
|
+
| ((props: {
|
|
82
|
+
focused: boolean;
|
|
83
|
+
color: string;
|
|
84
|
+
children: string;
|
|
85
|
+
}) => React.ReactNode);
|
|
82
86
|
|
|
83
87
|
/**
|
|
84
88
|
* Accessibility label for the tab button. This is read by the screen reader when the user taps the tab.
|
|
@@ -195,6 +199,11 @@ export type MaterialTopTabNavigationOptions = {
|
|
|
195
199
|
*/
|
|
196
200
|
tabBarStyle?: StyleProp<ViewStyle>;
|
|
197
201
|
|
|
202
|
+
/**
|
|
203
|
+
* Gap between tabs
|
|
204
|
+
*/
|
|
205
|
+
tabBarGap?: number;
|
|
206
|
+
|
|
198
207
|
/**
|
|
199
208
|
* Whether to enable swipe gestures when this screen is focused.
|
|
200
209
|
* Swipe gestures are enabled by default. Passing `false` will disable swipe gestures,
|
|
@@ -41,6 +41,7 @@ export default function TabBarTop({
|
|
|
41
41
|
{ backgroundColor: colors.primary },
|
|
42
42
|
focusedOptions.tabBarIndicatorStyle,
|
|
43
43
|
]}
|
|
44
|
+
gap={focusedOptions.tabBarGap}
|
|
44
45
|
indicatorContainerStyle={focusedOptions.tabBarIndicatorContainerStyle}
|
|
45
46
|
contentContainerStyle={focusedOptions.tabBarContentContainerStyle}
|
|
46
47
|
style={[{ backgroundColor: colors.card }, focusedOptions.tabBarStyle]}
|
|
@@ -107,7 +108,14 @@ export default function TabBarTop({
|
|
|
107
108
|
);
|
|
108
109
|
}
|
|
109
110
|
|
|
110
|
-
|
|
111
|
+
const children =
|
|
112
|
+
typeof options.tabBarLabel === 'string'
|
|
113
|
+
? options.tabBarLabel
|
|
114
|
+
: options.title !== undefined
|
|
115
|
+
? options.title
|
|
116
|
+
: route.name;
|
|
117
|
+
|
|
118
|
+
return label({ focused, color, children });
|
|
111
119
|
}}
|
|
112
120
|
renderBadge={({ route }) => {
|
|
113
121
|
const { tabBarBadge } = descriptors[route.key].options;
|