Add segmentStyle prop to SegmentedControl (#2563)

* Add segmentStyle prop to SegmentedControl

* renaming

* renaming #2

Author: lidord-wix

demo/src/screens/componentScreens/SegmentedControlScreen.tsx

@@ -14,7 +14,7 @@ const segments = {
     },
     {label: 'Short'}
   ],
-  forth: [{label: 'With'}, {label: 'Custom'}, {label: 'Colors'}],
+  forth: [{label: 'With'}, {label: 'Custom'}, {label: 'Style'}],
   fifth: [{label: 'Full'}, {label: 'Width'}],
   sixth: [{label: 'Full'}, {label: 'Width'}, {label: 'With'}, {label: 'A'}, {label: 'Very Long Segment'}]
 };
@@ -49,6 +49,8 @@ const SegmentedControlScreen = () => {
             backgroundColor={Colors.$backgroundInverted}
             activeBackgroundColor={Colors.$backgroundNeutralIdle}
             inactiveColor={Colors.$textDisabled}
+            style={styles.customStyle}
+            segmentsStyle={styles.customSegmentsStyle}
           />
         </View>
         <SegmentedControl
@@ -70,6 +72,13 @@ const SegmentedControlScreen = () => {
 const styles = StyleSheet.create({
   container: {
     marginTop: 20
+  },
+  customStyle: {
+    height: 50,
+    width: 300
+  },
+  customSegmentsStyle: {
+    height: 50
   }
 });
 

src/components/segmentedControl/index.tsx

@@ -13,15 +13,15 @@ import Reanimated, {
 import {Colors, BorderRadiuses, Spacings} from '../../style';
 import {Constants, asBaseComponent} from '../../commons/new';
 import View from '../view';
-import Segment, {SegmentedControlItemProps as SegmentProps} from './segment';
+import Segment, {SegmentedControlItemProps} from './segment';
 
 const BORDER_WIDTH = 1;
 const TIMING_CONFIG: WithTimingConfig = {
   duration: 300,
   easing: Easing.bezier(0.33, 1, 0.68, 1)
 };
 
-export type SegmentedControlItemProps = SegmentProps;
+export {SegmentedControlItemProps};
 export type SegmentedControlProps = {
   /**
    * Array on segments.
@@ -71,6 +71,10 @@ export type SegmentedControlProps = {
    * Trailing throttle time of changing index in ms.
    */
   throttleTime?: number;
+  /**
+   * Additional style for the segment
+   */
+  segmentsStyle?: StyleProp<ViewStyle>;
   /**
    * Additional spacing styles for the container
    */
@@ -98,6 +102,7 @@ const SegmentedControl = (props: SegmentedControlProps) => {
     outlineColor = activeColor,
     outlineWidth = BORDER_WIDTH,
     throttleTime = 0,
+    segmentsStyle: segmentsStyleProp,
     testID
   } = props;
   const animatedSelectedIndex = useSharedValue(initialIndex);
@@ -164,6 +169,7 @@ const SegmentedControl = (props: SegmentedControlProps) => {
           selectedIndex={animatedSelectedIndex}
           activeColor={activeColor}
           inactiveColor={inactiveColor}
+          style={segmentsStyleProp}
           {...segments?.[index]}
           testID={testID}
         />

src/components/segmentedControl/segment.tsx

@@ -1,5 +1,5 @@
 import React, {useCallback, useMemo} from 'react';
-import {LayoutChangeEvent, ImageSourcePropType, ImageStyle, StyleProp} from 'react-native';
+import {LayoutChangeEvent, ImageSourcePropType, ImageStyle, StyleProp, ViewStyle} from 'react-native';
 import Reanimated, {useAnimatedStyle} from 'react-native-reanimated';
 import {Spacings, Typography} from '../../style';
 import {asBaseComponent} from '../../commons/new';
@@ -49,6 +49,10 @@ export type SegmentProps = SegmentedControlItemProps & {
    * onLayout function.
    */
   onLayout?: (index: number, event: LayoutChangeEvent) => void;
+  /**
+   * Additional style for the segment.
+   */
+  style?: StyleProp<ViewStyle>;
   testID?: string;
 };
 
@@ -67,6 +71,7 @@ const Segment = React.memo((props: SegmentProps) => {
     inactiveColor,
     index,
     iconOnRight,
+    style,
     testID
   } = props;
 
@@ -80,7 +85,9 @@ const Segment = React.memo((props: SegmentProps) => {
     return {tintColor};
   });
 
-  const segmentStyle = useMemo(() => ({paddingHorizontal: Spacings.s3, paddingVertical: Spacings.s2}), []);
+  const segmentStyle = useMemo(() => {
+    return [{paddingHorizontal: Spacings.s3, paddingVertical: Spacings.s2}, style];
+  }, [style]);
 
   const renderIcon = useCallback(() => {
     return iconSource && <Reanimated.Image source={iconSource} style={[animatedIconStyle, iconStyle]}/>;

src/components/segmentedControl/segmentedControl.api.json

@@ -16,6 +16,7 @@
     {"name": "outlineWidth", "type": "number", "description": "The width of the active segment outline"},
     {"name": "iconOnRight", "type": "boolean", "description": "Should the icon be on right of the label"},
     {"name": "throttleTime", "type": "number", "description": "Trailing throttle time of changing index in ms."},
+    {"name": "segmentsStyle", "type": "ViewStyle", "description": "Additional style for the segments"},
     {"name": "containerStyle", "type": "ViewStyle", "description": "Additional spacing styles for the container"},
     {"name": "style", "type": "ViewStyle", "description": "Custom style to inner container"},
     {"name": "testID", "type": "string", "description": "Component test id"}