diff --git a/README.md b/README.md index 6c5ef0a8..c643a9f3 100644 --- a/README.md +++ b/README.md @@ -225,6 +225,41 @@ An object container - `fontFamily`: overrides font-family of selected segment text - `fontWeight`: overrides font-weight of selected segment text +### `tabStyle` + +(Android and Web only) Styles the clickable surface which is responsible to change tabs +| Type | Required | Platform | +| ------ | -------- | -------- | +| object | No | Android, Web | + +Extends [ViewStyles](https://reactnative.dev/docs/view-style-props) + +## Tips and Tricks + +### How can I increase the height of the tab ? + +For android and IOS, simply pass `prop.style`: + +```json +{ + "height": number +} +``` + +For react-native-web, additionally pass : + +```json +{ + "paddingVertical": number, + or + "height": number +} +``` + +### Adding padding makes text disappear on Android + +If padding amount exceeds the fixed height of the container, it will shrink the text. So either increase the height or reduce your padding. + ## Maintainers - [M.Haris Baig](https://github.com/harisbaig100) diff --git a/index.d.ts b/index.d.ts index 9c636c59..b9144779 100644 --- a/index.d.ts +++ b/index.d.ts @@ -8,6 +8,7 @@ import { NativeMethods, Constructor, TargetedEvent, + ViewStyle, } from 'react-native'; export interface NativeSegmentedControlIOSChangeEvent extends TargetedEvent { @@ -104,6 +105,11 @@ export interface SegmentedControlProps extends ViewProps { * Active Font style properties of the Segmented Control */ activeFontStyle?: FontStyle; + + /** + * Touchable style properties for Segmented Control Tab + */ + tabStyle?: ViewStyle; } /** diff --git a/js/SegmentedControl.js b/js/SegmentedControl.js index dd937870..d82ecb5f 100644 --- a/js/SegmentedControl.js +++ b/js/SegmentedControl.js @@ -32,6 +32,7 @@ const SegmentedControl = ({ values, tintColor, backgroundColor, + tabStyle, fontStyle, activeFontStyle, appearance, @@ -101,6 +102,7 @@ const SegmentedControl = ({ key={index} value={value} tintColor={tintColor} + tabStyle={tabStyle} fontStyle={fontStyle} activeFontStyle={activeFontStyle} appearance={colorScheme} diff --git a/js/SegmentedControlTab.js b/js/SegmentedControlTab.js index 39eeb07b..85bb622f 100644 --- a/js/SegmentedControlTab.js +++ b/js/SegmentedControlTab.js @@ -15,7 +15,7 @@ import { useColorScheme, } from 'react-native'; -import type {FontStyle} from './types'; +import type {FontStyle, ViewStyle} from './types'; type Props = $ReadOnly<{| value: string | number | Object, @@ -25,6 +25,7 @@ type Props = $ReadOnly<{| enabled: boolean, fontStyle?: FontStyle, activeFontStyle?: FontStyle, + tabStyle?: ViewStyle, appearance?: 'dark' | 'light' | null, |}>; @@ -42,6 +43,7 @@ export const SegmentedControlTab = ({ fontStyle = {}, activeFontStyle = {}, appearance, + tabStyle, }: Props): React.Node => { const colorSchemeHook = useColorScheme(); const colorScheme = appearance || colorSchemeHook; @@ -82,11 +84,11 @@ export const SegmentedControlTab = ({ return ( - + {typeof value === 'number' || typeof value === 'object' ? ( ) : isBase64(value) ? ( diff --git a/js/types.js b/js/types.js index de716f9c..3eb54fc5 100644 --- a/js/types.js +++ b/js/types.js @@ -5,6 +5,7 @@ import type {ColorValue} from 'react-native/Libraries/StyleSheet/StyleSheetTypes'; import type {SyntheticEvent} from 'react-native/Libraries/Types/CoreEventTypes'; import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes'; +import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet'; export type Event = SyntheticEvent< $ReadOnly<{| @@ -13,6 +14,8 @@ export type Event = SyntheticEvent< |}>, >; +export type ViewStyle = ViewStyleProp; + export type FontStyle = $ReadOnly<{| /** * Font Color of Segmented Control @@ -99,4 +102,9 @@ export type SegmentedControlProps = $ReadOnly<{| * it will override fontStyle for the selected segment */ activeFontStyle?: FontStyle, + + /** + * Touchable style properties for Segmented Control Tab + */ + tabStyle?: ViewStyle, |}>;