Fix/segmented control icon spacings (#3096)

* added spacings between icon and label

* changed default object

* changed variable name

* moved variable location

Author: nitzanyiz

src/components/segmentedControl/segment.tsx

@@ -1,12 +1,14 @@
 import React, {useCallback, useMemo} from 'react';
-import {LayoutChangeEvent, ImageStyle, StyleProp, ViewStyle} from 'react-native';
+import {LayoutChangeEvent, ImageStyle, StyleProp, ViewStyle, StyleSheet} from 'react-native';
 import Reanimated, {useAnimatedStyle} from 'react-native-reanimated';
 import {Spacings, Typography} from '../../style';
 import {asBaseComponent} from '../../commons/new';
 import TouchableOpacity from '../touchableOpacity';
 import {SegmentedControlProps} from './index';
 import Icon, {IconProps} from '../icon';
 
+const ICON_SPACING = Spacings.s1;
+
 export type SegmentedControlItemProps = Pick<SegmentedControlProps, 'segmentLabelStyle'> & {
   /**
    * The label of the segment.
@@ -112,7 +114,7 @@ const Segment = React.memo((props: SegmentProps) => {
     onLayout?.(index, event);
   },
   [onLayout, index]);
-
+  const labelMargins = !!iconSource && (iconOnRight ? styles.rightMargin : styles.leftMargin);
   return (
     <TouchableOpacity
       onLayout={segmentOnLayout}
@@ -128,7 +130,7 @@ const Segment = React.memo((props: SegmentProps) => {
         <Reanimated.Text
           fsTagName={'unmasked'}
           numberOfLines={1}
-          style={[Typography.text90, segmentLabelStyle, animatedTextStyle]}
+          style={[Typography.text90, segmentLabelStyle, animatedTextStyle, labelMargins]}
         >
           {label}
         </Reanimated.Text>
@@ -138,4 +140,14 @@ const Segment = React.memo((props: SegmentProps) => {
   );
 });
 Segment.displayName = 'SegmentedControl.Segment';
+
+const styles = StyleSheet.create({
+  leftMargin: {
+    marginLeft: ICON_SPACING
+  },
+  rightMargin: {
+    marginRight: ICON_SPACING
+  }
+});
+
 export default asBaseComponent<SegmentProps>(Segment);