feat: Allow the slider component to be styled

Signed-off-by: Gegham Zakaryan <[email protected]>

Author: zakaryan2004

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 ?

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;
 }
 
 /**

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 = ({
         <Animated.View
           style={[
             styles.slider,
+            sliderStyle,
             {
               transform: [{translateX: animation}],
               width: segmentWidth - 4,

js/types.js

@@ -107,4 +107,9 @@ export type SegmentedControlProps = $ReadOnly<{|
    * Touchable style properties for Segmented Control Tab
    */
   tabStyle?: ViewStyle,
+
+  /**
+   * Style properties for the slider component (Animated.View)
+   */
+   sliderStyle?: ViewStyle,
 |}>;