diff --git a/README.md b/README.md index e09ff1f..10a0255 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 d90cf7a..aa8d5f5 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 9e24486..4a3a6a7 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 4c96c1e..db4818c 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, |}>;