Add animation to Segmented Button icons

src/components/SegmentedButtons/SegmentedButtonItem.tsx

@@ -20,6 +20,7 @@ import {
   getSegmentedButtonDensityPadding,
 } from './utils';
 import { useInternalTheme } from '../../core/theming';
+import CrossFadeIcon from '../CrossFadeIcon';
 import type { IconSource } from '../Icon';
 import Icon from '../Icon';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
@@ -34,6 +35,10 @@ export type Props = {
    * Icon to display for the `SegmentedButtonItem`.
    */
   icon?: IconSource;
+  /**
+   * Whether an icon change is animated.
+   */
+  animated?: boolean;
   /**
    * @supported Available in v5.x with theme version 3
    * Custom color for unchecked Text and Icon.
@@ -106,6 +111,7 @@ export type Props = {
 
 const SegmentedButtonItem = ({
   checked,
+  animated = false,
   accessibilityLabel,
   disabled,
   style,
@@ -202,7 +208,7 @@ const SegmentedButtonItem = ({
       : theme.fonts.labelLarge),
     color: textColor,
   };
-
+  const IconComponent = animated ? CrossFadeIcon : Icon;
   return (
     <View style={[buttonStyle, styles.button, style]}>
       <TouchableRipple
@@ -229,7 +235,11 @@ const SegmentedButtonItem = ({
           ) : null}
           {showIcon ? (
             <Animated.View testID={`${testID}-icon`} style={iconStyle}>
-              <Icon source={icon} size={iconSize} color={textColor} />
+              <IconComponent
+                color={textColor}
+                source={icon ? icon : 'progress-question'}
+                size={iconSize}
+              />
             </Animated.View>
           ) : null}
           <Text

src/components/SegmentedButtons/SegmentedButtons.tsx

@@ -79,6 +79,7 @@ export type Props = {
    * Density is applied to the height, to allow usage in denser UIs
    */
   density?: 'regular' | 'small' | 'medium' | 'high';
+  animated?: boolean;
   style?: StyleProp<ViewStyle>;
   theme?: ThemeProp;
 } & ConditionalValue;
@@ -132,6 +133,7 @@ const SegmentedButtons = ({
   buttons,
   multiSelect,
   density,
+  animated,
   style,
   theme: themeOverrides,
 }: Props) => {
@@ -172,6 +174,7 @@ const SegmentedButtons = ({
             {...item}
             key={i}
             checked={checked}
+            animated={animated}
             segment={segment}
             density={density}
             onPress={onPress}