SegmentedControl icon wrapper component change (#3084)

* SegmentedControl icon wrapper component change

* revert playground screen

Author: adids1221

src/components/segmentedControl/segment.tsx

@@ -1,10 +1,11 @@
 import React, {useCallback, useMemo} from 'react';
-import {LayoutChangeEvent, ImageSourcePropType, ImageStyle, StyleProp, ViewStyle} from 'react-native';
+import {LayoutChangeEvent, ImageStyle, StyleProp, ViewStyle} 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';
 
 export type SegmentedControlItemProps = Pick<SegmentedControlProps, 'segmentLabelStyle'> & {
   /**
@@ -14,7 +15,7 @@ export type SegmentedControlItemProps = Pick<SegmentedControlProps, 'segmentLabe
   /**
    * An icon for the segment.
    */
-  iconSource?: ImageSourcePropType;
+  iconSource?: IconProps['source'];
   /**
    * An icon for the segment.
    */
@@ -82,6 +83,8 @@ const Segment = React.memo((props: SegmentProps) => {
     iconTintColor
   } = props;
 
+  const AnimatedUIIcon = Reanimated.createAnimatedComponent(Icon);
+
   const animatedTextStyle = useAnimatedStyle(() => {
     const color = selectedIndex?.value === index ? activeColor : inactiveColor;
     return {color};
@@ -97,8 +100,7 @@ const Segment = React.memo((props: SegmentProps) => {
   }, [style]);
 
   const renderIcon = useCallback(() => {
-    return iconSource && <Reanimated.Image source={iconSource} style={[animatedIconStyle, iconStyle]}/>;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    return iconSource && <AnimatedUIIcon source={iconSource} style={[animatedIconStyle, iconStyle]}/>;
   }, [iconSource, iconStyle]);
 
   const onSegmentPress = useCallback(() => {

webDemo/src/App.tsx

@@ -18,14 +18,7 @@ import AnimatedImage from 'react-native-ui-lib/AnimatedImage';
 import Avatar from 'react-native-ui-lib/Avatar';
 import Drawer from 'react-native-ui-lib/Drawer';
 
-import {
-  Colors,
-  Spacings,
-  Typography,
-  Assets,
-  Text,
-  Incubator
-} from 'react-native-ui-lib';
+import {Colors, Spacings, Typography, Assets, Text, Incubator, SegmentedControl} from 'react-native-ui-lib';
 
 import Picker from './examples/Picker';
 import RadioGroup from './examples/RadioButtonGroup';
@@ -235,6 +228,20 @@ const itemsToRender: ItemToRender[] = [
       );
     }
   },
+  {
+    title: 'SegmentedControl',
+    FC: () => {
+      const segments = [
+        {label: '1'},
+        {label: '2'},
+        {label: '3'},
+        {label: '4', iconSource: Assets.icons.search, iconOnRight: true},
+        {label: '5'}
+      ];
+
+      return <SegmentedControl segments={segments} />;
+    }
+  },
   {
     title: 'Switch',
     FC: () => {