From e8054ccc52e9d218c0d9968b5112543717025e87 Mon Sep 17 00:00:00 2001 From: Jesse Katsumata Date: Wed, 11 Dec 2024 10:36:51 +0900 Subject: [PATCH 1/2] feat: Allow the slider component to be styled (#900) * feat: Allow the slider component to be styled Signed-off-by: Gegham Zakaryan * feat: Allow the slider component to be styled Signed-off-by: Gegham Zakaryan * fix: lint * fix: remove unnecessary code --------- Signed-off-by: Gegham Zakaryan Co-authored-by: Gegham Zakaryan --- README.md | 9 +++++++++ index.d.ts | 5 +++++ js/SegmentedControl.js | 2 ++ js/types.js | 4 ++++ 4 files changed, 20 insertions(+) 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..4a3a6a7e 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; @@ -118,6 +119,7 @@ const SegmentedControl = ({ backgroundColor: tintColor || (colorScheme === 'dark' ? '#636366' : 'white'), }, + sliderStyle, ]} /> ) : null} diff --git a/js/types.js b/js/types.js index 4c96c1ef..db4818cb 100644 --- a/js/types.js +++ b/js/types.js @@ -112,4 +112,8 @@ export type SegmentedControlProps = $ReadOnly<{| * array testID to each segment button */ testIDS: $ReadOnlyArray, + /** + * Style properties for the slider component (Animated.View) + */ + sliderStyle?: ViewStyle, |}>; From 3de734266a14aaafe33c9bfe461e60d847ca27f9 Mon Sep 17 00:00:00 2001 From: Jesse Katsumata Date: Wed, 11 Dec 2024 10:38:10 +0900 Subject: [PATCH 2/2] 2.5.7 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 1252c561..3e262e39 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@react-native-segmented-control/segmented-control", - "version": "2.5.6", + "version": "2.5.7", "description": "React Native SegmentedControlIOS library", "main": "js/index.js", "types": "index.d.ts",