From da0a0b1d6686ee70ae7f7c3bfe04a65a89cd63fa Mon Sep 17 00:00:00 2001 From: Mehmet Ali IZCI Date: Tue, 8 Jun 2021 11:03:50 +0200 Subject: [PATCH 1/5] feat: allow touchable to be stylable --- index.d.ts | 6 ++++++ js/SegmentedControl.ios.js | 6 +++++- js/SegmentedControl.js | 2 ++ js/SegmentedControlTab.js | 6 ++++-- js/types.js | 8 ++++++++ 5 files changed, 25 insertions(+), 3 deletions(-) diff --git a/index.d.ts b/index.d.ts index 9c636c59..8fabdb8d 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 + */ + touchableStyle?: ViewStyle; } /** diff --git a/js/SegmentedControl.ios.js b/js/SegmentedControl.ios.js index 909eba08..bebf6284 100644 --- a/js/SegmentedControl.ios.js +++ b/js/SegmentedControl.ios.js @@ -91,7 +91,11 @@ class SegmentedControlIOS extends React.Component { )} {...props} ref={forwardedRef} - style={[styles.segmentedControl, this.props.style]} + style={[ + styles.segmentedControl, + this.props.style, + this.props.touchableStyle, + ]} onChange={this._onChange} /> ); diff --git a/js/SegmentedControl.js b/js/SegmentedControl.js index dd937870..d3160b37 100644 --- a/js/SegmentedControl.js +++ b/js/SegmentedControl.js @@ -32,6 +32,7 @@ const SegmentedControl = ({ values, tintColor, backgroundColor, + touchableStyle, fontStyle, activeFontStyle, appearance, @@ -101,6 +102,7 @@ const SegmentedControl = ({ key={index} value={value} tintColor={tintColor} + touchableStyle={touchableStyle} fontStyle={fontStyle} activeFontStyle={activeFontStyle} appearance={colorScheme} diff --git a/js/SegmentedControlTab.js b/js/SegmentedControlTab.js index 39eeb07b..b29c13d7 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, + touchableStyle?: ViewStyle, appearance?: 'dark' | 'light' | null, |}>; @@ -42,6 +43,7 @@ export const SegmentedControlTab = ({ fontStyle = {}, activeFontStyle = {}, appearance, + touchableStyle, }: Props): React.Node => { const colorSchemeHook = useColorScheme(); const colorScheme = appearance || colorSchemeHook; @@ -82,7 +84,7 @@ export const SegmentedControlTab = ({ return ( diff --git a/js/types.js b/js/types.js index de716f9c..5f5751bd 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 + */ + touchableStyle?: ViewStyle, |}>; From 9abec4040f74c9038f4f0125c666eeff9879423d Mon Sep 17 00:00:00 2001 From: Mehmet Ali IZCI Date: Wed, 9 Jun 2021 12:28:38 +0200 Subject: [PATCH 2/5] Review: remove tabstyles from ios --- js/SegmentedControl.ios.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/js/SegmentedControl.ios.js b/js/SegmentedControl.ios.js index bebf6284..909eba08 100644 --- a/js/SegmentedControl.ios.js +++ b/js/SegmentedControl.ios.js @@ -91,11 +91,7 @@ class SegmentedControlIOS extends React.Component { )} {...props} ref={forwardedRef} - style={[ - styles.segmentedControl, - this.props.style, - this.props.touchableStyle, - ]} + style={[styles.segmentedControl, this.props.style]} onChange={this._onChange} /> ); From e8301a1e391170aae588ea7735c9445c7d63537e Mon Sep 17 00:00:00 2001 From: Mehmet Ali IZCI Date: Wed, 9 Jun 2021 12:28:55 +0200 Subject: [PATCH 3/5] Review: rename touchableStyle to tabStyle --- index.d.ts | 2 +- js/SegmentedControl.js | 4 ++-- js/SegmentedControlTab.js | 6 +++--- js/types.js | 2 +- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/index.d.ts b/index.d.ts index 8fabdb8d..b9144779 100644 --- a/index.d.ts +++ b/index.d.ts @@ -109,7 +109,7 @@ export interface SegmentedControlProps extends ViewProps { /** * Touchable style properties for Segmented Control Tab */ - touchableStyle?: ViewStyle; + tabStyle?: ViewStyle; } /** diff --git a/js/SegmentedControl.js b/js/SegmentedControl.js index d3160b37..d82ecb5f 100644 --- a/js/SegmentedControl.js +++ b/js/SegmentedControl.js @@ -32,7 +32,7 @@ const SegmentedControl = ({ values, tintColor, backgroundColor, - touchableStyle, + tabStyle, fontStyle, activeFontStyle, appearance, @@ -102,7 +102,7 @@ const SegmentedControl = ({ key={index} value={value} tintColor={tintColor} - touchableStyle={touchableStyle} + tabStyle={tabStyle} fontStyle={fontStyle} activeFontStyle={activeFontStyle} appearance={colorScheme} diff --git a/js/SegmentedControlTab.js b/js/SegmentedControlTab.js index b29c13d7..63657a6b 100644 --- a/js/SegmentedControlTab.js +++ b/js/SegmentedControlTab.js @@ -25,7 +25,7 @@ type Props = $ReadOnly<{| enabled: boolean, fontStyle?: FontStyle, activeFontStyle?: FontStyle, - touchableStyle?: ViewStyle, + tabStyle?: ViewStyle, appearance?: 'dark' | 'light' | null, |}>; @@ -43,7 +43,7 @@ export const SegmentedControlTab = ({ fontStyle = {}, activeFontStyle = {}, appearance, - touchableStyle, + tabStyle, }: Props): React.Node => { const colorSchemeHook = useColorScheme(); const colorScheme = appearance || colorSchemeHook; @@ -84,7 +84,7 @@ export const SegmentedControlTab = ({ return ( diff --git a/js/types.js b/js/types.js index 5f5751bd..3eb54fc5 100644 --- a/js/types.js +++ b/js/types.js @@ -106,5 +106,5 @@ export type SegmentedControlProps = $ReadOnly<{| /** * Touchable style properties for Segmented Control Tab */ - touchableStyle?: ViewStyle, + tabStyle?: ViewStyle, |}>; From db8c35fc25ae45a180d5c9f4e787e174debf439f Mon Sep 17 00:00:00 2001 From: Mehmet Ali IZCI Date: Wed, 9 Jun 2021 14:24:38 +0200 Subject: [PATCH 4/5] Include Tips and Tricks section and add the implemented style documentation --- README.md | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) 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) From dfaaa639ea0c2eac5fafd2a6fb02dc777635c3ce Mon Sep 17 00:00:00 2001 From: Mehmet Ali IZCI Date: Wed, 9 Jun 2021 14:26:02 +0200 Subject: [PATCH 5/5] Remove superflous array notation from style prop --- js/SegmentedControlTab.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/SegmentedControlTab.js b/js/SegmentedControlTab.js index 63657a6b..85bb622f 100644 --- a/js/SegmentedControlTab.js +++ b/js/SegmentedControlTab.js @@ -88,7 +88,7 @@ export const SegmentedControlTab = ({ disabled={!enabled} onPress={onSelect} accessibilityState={{selected: selected, disabled: !enabled}}> - + {typeof value === 'number' || typeof value === 'object' ? ( ) : isBase64(value) ? (