diff --git a/src/Swiper.native.tsx b/src/Swiper.native.tsx index 65da3c1..a765866 100644 --- a/src/Swiper.native.tsx +++ b/src/Swiper.native.tsx @@ -24,6 +24,7 @@ function SwiperNative(props: SwiperProps) { showLeadingSpace, disableSwipe, tabHeaderStyle, + tabLabelStyle, } = props; const { index, goTo } = React.useContext(TabsContext); const indexRef = React.useRef(index || 0); @@ -77,6 +78,7 @@ function SwiperNative(props: SwiperProps) { uppercase, mode, tabHeaderStyle, + tabLabelStyle, }; return ( <> diff --git a/src/Swiper.tsx b/src/Swiper.tsx index 468d57f..5fb4d24 100644 --- a/src/Swiper.tsx +++ b/src/Swiper.tsx @@ -16,6 +16,7 @@ function Swiper(props: SwiperProps) { uppercase, mode, tabHeaderStyle, + tabLabelStyle, } = props; const index = useTabIndex(); @@ -39,6 +40,7 @@ function Swiper(props: SwiperProps) { uppercase, mode, tabHeaderStyle, + tabLabelStyle, }; return ( diff --git a/src/Tabs.tsx b/src/Tabs.tsx index 644d311..3be6a3f 100644 --- a/src/Tabs.tsx +++ b/src/Tabs.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import type { ViewStyle } from 'react-native'; +import type { ViewStyle, TextStyle } from 'react-native'; import { withTheme } from 'react-native-paper'; import Swiper from './Swiper'; import type { MD3LightTheme } from 'react-native-paper'; @@ -17,6 +17,7 @@ function Tabs({ showLeadingSpace = true, disableSwipe = false, tabHeaderStyle, + tabLabelStyle, ...rest }: { children: any; @@ -30,6 +31,7 @@ function Tabs({ mode?: Mode; disableSwipe?: boolean; tabHeaderStyle?: ViewStyle | undefined; + tabLabelStyle?: TextStyle | undefined; }) { const children = React.Children.toArray(rest.children).filter(Boolean); @@ -45,6 +47,7 @@ function Tabs({ mode={mode} disableSwipe={disableSwipe} tabHeaderStyle={tabHeaderStyle} + tabLabelStyle={tabLabelStyle} > {children} diff --git a/src/TabsHeader.tsx b/src/TabsHeader.tsx index 288d3a4..5eb3894 100644 --- a/src/TabsHeader.tsx +++ b/src/TabsHeader.tsx @@ -26,6 +26,7 @@ export default function TabsHeader({ uppercase, mode, tabHeaderStyle, + tabLabelStyle, children, }: SwiperRenderProps) { const { index, goTo } = React.useContext(TabsContext); @@ -214,6 +215,7 @@ export default function TabsHeader({ iconPosition={iconPosition} showTextLabel={showTextLabel} mode={mode} + tabLabelStyle={tabLabelStyle} /> ))} ; tabIndex: number; @@ -46,6 +47,7 @@ export default function TabsHeaderItem({ iconPosition?: IconPosition; showTextLabel?: boolean; mode: Mode; + tabLabelStyle?: TextStyle | undefined; }) { const baseColor = theme.colors.primary; const rippleColor = React.useMemo( @@ -151,6 +153,7 @@ export default function TabsHeaderItem({ styles.text, iconPosition === 'top' && styles.textTop, { ...theme.fonts.titleSmall, color, opacity }, + tabLabelStyle, ]} > {uppercase && !theme.isV3 diff --git a/src/utils.tsx b/src/utils.tsx index a741a41..1c5437b 100644 --- a/src/utils.tsx +++ b/src/utils.tsx @@ -26,6 +26,7 @@ export interface SwiperRenderProps { uppercase: boolean; mode: Mode; tabHeaderStyle: ViewStyle | undefined; + tabLabelStyle: TextStyle | undefined; } export interface SwiperProps { @@ -40,6 +41,7 @@ export interface SwiperProps { mode: Mode; disableSwipe?: boolean; tabHeaderStyle: ViewStyle | undefined; + tabLabelStyle: TextStyle | undefined; } export interface OffsetScrollArgs {