From 9877f8a31900a79548cd9439babcbea223978119 Mon Sep 17 00:00:00 2001 From: Rudolph Date: Tue, 8 Aug 2023 15:52:45 +0200 Subject: [PATCH 1/4] Test commit --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 03ccbb8..3ed4d80 100644 --- a/README.md +++ b/README.md @@ -30,6 +30,7 @@ Web demo: [reactnativepapertabs.com](http://reactnativepapertabs.com/) ## About us +Test commit We want developers to be able to build software faster using modern tools like GraphQL, Golang and React Native. Give us a follow on Twitter: From 8ffa9947333ba755957b6f9cfb7098cea4e13bbf Mon Sep 17 00:00:00 2001 From: Rudolph Date: Tue, 8 Aug 2023 15:57:43 +0200 Subject: [PATCH 2/4] undo test Commit --- README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/README.md b/README.md index 3ed4d80..03ccbb8 100644 --- a/README.md +++ b/README.md @@ -30,7 +30,6 @@ Web demo: [reactnativepapertabs.com](http://reactnativepapertabs.com/) ## About us -Test commit We want developers to be able to build software faster using modern tools like GraphQL, Golang and React Native. Give us a follow on Twitter: From 736bc4202cef5c289eee027db10267a8c062c567 Mon Sep 17 00:00:00 2001 From: Rudolph Date: Thu, 10 Aug 2023 14:14:10 +0200 Subject: [PATCH 3/4] feat: add support for styling the tab label --- src/Swiper.native.tsx | 2 ++ src/Swiper.tsx | 2 ++ src/Tabs.tsx | 3 +++ src/TabsHeader.tsx | 2 ++ src/TabsHeaderItem.tsx | 5 ++++- src/utils.tsx | 2 ++ 6 files changed, 15 insertions(+), 1 deletion(-) 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..34a9ea0 100644 --- a/src/Tabs.tsx +++ b/src/Tabs.tsx @@ -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?: ViewStyle | 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?: ViewStyle | 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..74878cf 100644 --- a/src/utils.tsx +++ b/src/utils.tsx @@ -26,6 +26,7 @@ export interface SwiperRenderProps { uppercase: boolean; mode: Mode; tabHeaderStyle: ViewStyle | undefined; + tabLabelStyle: ViewStyle | undefined; } export interface SwiperProps { @@ -40,6 +41,7 @@ export interface SwiperProps { mode: Mode; disableSwipe?: boolean; tabHeaderStyle: ViewStyle | undefined; + tabLabelStyle: ViewStyle | undefined; } export interface OffsetScrollArgs { From 09883edecfa9ba09d1a4a69e232aebd78e039b2b Mon Sep 17 00:00:00 2001 From: Rudolph Date: Fri, 11 Aug 2023 10:36:40 +0200 Subject: [PATCH 4/4] fix: correct tabLabelStyle type --- src/Tabs.tsx | 4 ++-- src/TabsHeaderItem.tsx | 4 ++-- src/utils.tsx | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/Tabs.tsx b/src/Tabs.tsx index 34a9ea0..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'; @@ -31,7 +31,7 @@ function Tabs({ mode?: Mode; disableSwipe?: boolean; tabHeaderStyle?: ViewStyle | undefined; - tabLabelStyle?: ViewStyle | undefined; + tabLabelStyle?: TextStyle | undefined; }) { const children = React.Children.toArray(rest.children).filter(Boolean); diff --git a/src/TabsHeaderItem.tsx b/src/TabsHeaderItem.tsx index 65c3bd8..7227c2d 100644 --- a/src/TabsHeaderItem.tsx +++ b/src/TabsHeaderItem.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { Animated, StyleSheet, View, Platform } from 'react-native'; -import type { LayoutChangeEvent, TextProps, ViewStyle } from 'react-native'; +import type { LayoutChangeEvent, TextProps, TextStyle } from 'react-native'; import { Badge, Text, TouchableRipple } from 'react-native-paper'; import type { MD3LightTheme } from 'react-native-paper'; import type { ReactElement } from 'react'; @@ -47,7 +47,7 @@ export default function TabsHeaderItem({ iconPosition?: IconPosition; showTextLabel?: boolean; mode: Mode; - tabLabelStyle?: ViewStyle | undefined; + tabLabelStyle?: TextStyle | undefined; }) { const baseColor = theme.colors.primary; const rippleColor = React.useMemo( diff --git a/src/utils.tsx b/src/utils.tsx index 74878cf..1c5437b 100644 --- a/src/utils.tsx +++ b/src/utils.tsx @@ -26,7 +26,7 @@ export interface SwiperRenderProps { uppercase: boolean; mode: Mode; tabHeaderStyle: ViewStyle | undefined; - tabLabelStyle: ViewStyle | undefined; + tabLabelStyle: TextStyle | undefined; } export interface SwiperProps { @@ -41,7 +41,7 @@ export interface SwiperProps { mode: Mode; disableSwipe?: boolean; tabHeaderStyle: ViewStyle | undefined; - tabLabelStyle: ViewStyle | undefined; + tabLabelStyle: TextStyle | undefined; } export interface OffsetScrollArgs {