feat: Allow the slider component to be styled

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

Author: zakaryan2004

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 ?

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

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 && (
         <SegmentsSeparators
           values={values.length}
@@ -118,6 +120,7 @@ const SegmentedControl = ({
               backgroundColor:
                 tintColor || (colorScheme === 'dark' ? '#636366' : 'white'),
             },
+            sliderStyle,
           ]}
         />
       ) : null}
@@ -148,6 +151,20 @@ const SegmentedControl = ({
             );
           })}
       </View>
+      {selectedIndex != null && segmentWidth ? (
+        <Animated.View
+          style={[
+            styles.slider,
+            sliderStyle,
+            {
+              transform: [{translateX: animation}],
+              width: segmentWidth - 4,
+              backgroundColor:
+                tintColor || (colorScheme === 'dark' ? '#636366' : 'white'),
+            },
+          ]}
+        />
+      ) : null}
     </View>
   );
 };

js/types.js

@@ -112,4 +112,7 @@ export type SegmentedControlProps = $ReadOnly<{|
    * array testID to each segment button
    */
   testIDS: $ReadOnlyArray<string>,
+   * Style properties for the slider component (Animated.View)
+   */
+   sliderStyle?: ViewStyle,
 |}>;