From c913dfcb35b82c6c0780f63f738a190eac7ddfe3 Mon Sep 17 00:00:00 2001 From: Gegham Zakaryan Date: Sat, 21 May 2022 03:59:13 +0400 Subject: [PATCH 1/4] feat: Allow the slider component to be styled Signed-off-by: Gegham Zakaryan --- README.md | 9 +++++++++ index.d.ts | 5 +++++ js/SegmentedControl.js | 2 ++ js/types.js | 5 +++++ 4 files changed, 21 insertions(+) diff --git a/README.md b/README.md index b5592c81..cd5bcdf9 100644 --- a/README.md +++ b/README.md @@ -234,6 +234,15 @@ An object container Extends [ViewStyles](https://reactnative.dev/docs/view-style-props) +### `sliderStyle` + +(Android and Web only) Styles the slider component (Animated.View) +| 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 ? diff --git a/index.d.ts b/index.d.ts index b9144779..5027bb93 100644 --- a/index.d.ts +++ b/index.d.ts @@ -110,6 +110,11 @@ export interface SegmentedControlProps extends ViewProps { * Touchable style properties for Segmented Control Tab */ tabStyle?: ViewStyle; + + /** + * Style properties for the Animated.View component + */ + sliderStyle?: ViewStyle; } /** diff --git a/js/SegmentedControl.js b/js/SegmentedControl.js index d82ecb5f..0ac4d634 100644 --- a/js/SegmentedControl.js +++ b/js/SegmentedControl.js @@ -36,6 +36,7 @@ const SegmentedControl = ({ fontStyle, activeFontStyle, appearance, + sliderStyle, }: SegmentedControlProps): React.Node => { const colorSchemeHook = useColorScheme(); const colorScheme = appearance || colorSchemeHook; @@ -117,6 +118,7 @@ const SegmentedControl = ({ ; From 35684096893292716e78c2ad78d0d6b8b8c51f9d Mon Sep 17 00:00:00 2001 From: Gegham Zakaryan Date: Sat, 21 May 2022 03:59:13 +0400 Subject: [PATCH 2/4] feat: Allow the slider component to be styled Signed-off-by: Gegham Zakaryan --- README.md | 9 +++++++++ index.d.ts | 5 +++++ js/SegmentedControl.js | 19 ++++++++++++++++++- js/types.js | 3 +++ 4 files changed, 35 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index e09ff1fb..10a0255a 100644 --- a/README.md +++ b/README.md @@ -241,6 +241,15 @@ An object container Extends [ViewStyles](https://reactnative.dev/docs/view-style-props) +### `sliderStyle` + +(Android and Web only) Styles the slider component (Animated.View) +| 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 ? diff --git a/index.d.ts b/index.d.ts index d90cf7a7..aa8d5f54 100644 --- a/index.d.ts +++ b/index.d.ts @@ -111,6 +111,11 @@ export interface SegmentedControlProps extends ViewProps { * Touchable style properties for Segmented Control Tab */ tabStyle?: ViewStyle; + + /** + * Style properties for the Animated.View component + */ + sliderStyle?: ViewStyle; } /** diff --git a/js/SegmentedControl.js b/js/SegmentedControl.js index 9e244869..55cd6be1 100644 --- a/js/SegmentedControl.js +++ b/js/SegmentedControl.js @@ -38,6 +38,7 @@ const SegmentedControl = ({ appearance, accessibilityHintSeperator = 'out of', testIDS, + sliderStyle, }: SegmentedControlProps): React.Node => { const colorSchemeHook = useColorScheme(); const colorScheme = appearance || colorSchemeHook; @@ -100,7 +101,8 @@ const SegmentedControl = ({ nativeEvent: { layout: {width}, }, - }) => updateSegmentWidth(width)}> + }) => updateSegmentWidth(width)} + > {!backgroundColor && !tintColor && ( ) : null} @@ -148,6 +151,20 @@ const SegmentedControl = ({ ); })} + {selectedIndex != null && segmentWidth ? ( + + ) : null} ); }; diff --git a/js/types.js b/js/types.js index 4c96c1ef..2a751daf 100644 --- a/js/types.js +++ b/js/types.js @@ -112,4 +112,7 @@ export type SegmentedControlProps = $ReadOnly<{| * array testID to each segment button */ testIDS: $ReadOnlyArray, + * Style properties for the slider component (Animated.View) + */ + sliderStyle?: ViewStyle, |}>; From 9a3dde40084ce4b3f1a19f5a1ce381e38ea3b70e Mon Sep 17 00:00:00 2001 From: Jesse Katsumata Date: Wed, 11 Dec 2024 10:33:00 +0900 Subject: [PATCH 3/4] fix: lint --- js/SegmentedControl.js | 3 +-- js/types.js | 3 ++- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/js/SegmentedControl.js b/js/SegmentedControl.js index 55cd6be1..73e9e1d7 100644 --- a/js/SegmentedControl.js +++ b/js/SegmentedControl.js @@ -101,8 +101,7 @@ const SegmentedControl = ({ nativeEvent: { layout: {width}, }, - }) => updateSegmentWidth(width)} - > + }) => updateSegmentWidth(width)}> {!backgroundColor && !tintColor && ( , + /** * Style properties for the slider component (Animated.View) */ - sliderStyle?: ViewStyle, + sliderStyle?: ViewStyle, |}>; From 7253e0e4af428b4a41fed7498ee0087766cccaa7 Mon Sep 17 00:00:00 2001 From: Jesse Katsumata Date: Wed, 11 Dec 2024 10:33:53 +0900 Subject: [PATCH 4/4] fix: remove unnecessary code --- js/SegmentedControl.js | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/js/SegmentedControl.js b/js/SegmentedControl.js index 73e9e1d7..4a3a6a7e 100644 --- a/js/SegmentedControl.js +++ b/js/SegmentedControl.js @@ -150,20 +150,6 @@ const SegmentedControl = ({ ); })} - {selectedIndex != null && segmentWidth ? ( - - ) : null} ); };