feat: Allow the slider component to be styled (#900)

* feat: Allow the slider component to be styled

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

* feat: Allow the slider component to be styled

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

* fix: lint

* fix: remove unnecessary code

---------

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

Author: Naturalclar

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;
@@ -118,6 +119,7 @@ const SegmentedControl = ({
               backgroundColor:
                 tintColor || (colorScheme === 'dark' ? '#636366' : 'white'),
             },
+            sliderStyle,
           ]}
         />
       ) : null}

js/types.js

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