refactor: self review

Author: michalfedyna

src/components/SegmentedButtons/AnimatedOptionIcon.tsx

@@ -1,4 +1,4 @@
-import { StyleSheet } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import type { TextStyle } from 'react-native';
 
 import Animated, { useAnimatedStyle } from 'react-native-reanimated';
@@ -17,22 +17,23 @@ type Props = {
   testID?: string;
 };
 
-const AnimatedOptionIcon = ({
-  animated,
+type AnimatedIconProps = Omit<Props, 'animated'>;
+
+const AnimatedIcon = ({
   color,
   opacity,
   scale,
   source,
   testID,
-}: Props) => {
+}: AnimatedIconProps) => {
   const animatedStyle = useAnimatedStyle(() => ({
     transform: [{ scale: 1 - scale.value }],
   }));
 
   return (
     <Animated.View
       testID={testID}
-      style={[styles.icon, { opacity }, animated ? animatedStyle : undefined]}
+      style={[styles.icon, { opacity }, animatedStyle]}
     >
       <Icon
         source={source}
@@ -43,6 +44,24 @@ const AnimatedOptionIcon = ({
   );
 };
 
+const AnimatedOptionIcon = ({ animated, ...props }: Props) => {
+  if (animated) {
+    return <AnimatedIcon {...props} />;
+  }
+
+  const { color, opacity, source, testID } = props;
+
+  return (
+    <View testID={testID} style={[styles.icon, { opacity }]}>
+      <Icon
+        source={source}
+        size={SegmentedButtonTokens.iconSize}
+        color={color}
+      />
+    </View>
+  );
+};
+
 const styles = StyleSheet.create({
   icon: {
     width: SegmentedButtonTokens.iconSize,

src/components/SegmentedButtons/SegmentedButtonContent.tsx

@@ -49,7 +49,7 @@ const SegmentedButtonContent = ({
   const optionIcon = icon && (!label || !showCheckIcon) ? icon : undefined;
 
   const reduceMotion = useReduceMotion();
-  const checkmarkScale = useSharedValue(checked ? 1 : 0);
+  const checkmarkScale = useSharedValue(showCheckIcon ? 1 : 0);
 
   React.useEffect(() => {
     checkmarkScale.value = withSpring(showCheckIcon ? 1 : 0, {

src/components/SegmentedButtons/SegmentedButtonItem.tsx

@@ -163,7 +163,7 @@ const SegmentedButtonItem = ({
         testID={testID}
         background={background}
         hitSlop={hitSlop}
-        theme={theme}
+        rippleColor={theme.colors.stateLayerPressed}
         style={[
           styles.touchable,
           borderRadius,

src/components/SegmentedButtons/SegmentedButtons.tsx

@@ -135,10 +135,6 @@ const SegmentedButtons = <T extends string = string>({
   const theme = useInternalTheme(themeOverrides);
   const { direction } = useLocale();
 
-  const singleSelectedIndex = multiSelect
-    ? -1
-    : buttons.findIndex((item) => value === item.value);
-
   return (
     <View
       role={multiSelect ? 'group' : 'radiogroup'}
@@ -155,7 +151,7 @@ const SegmentedButtons = <T extends string = string>({
 
           const checked = multiSelect
             ? value.includes(itemValue)
-            : index === singleSelectedIndex;
+            : value === itemValue;
 
           const handlePress = (event: GestureResponderEvent) => {
             onItemPress?.(event);

src/components/__tests__/SegmentedButton.test.tsx

@@ -1272,6 +1272,31 @@ describe('selected check icon', () => {
     expect(screen.getByTestId('walking-check-icon')).toBeOnTheScreen();
   });
 
+  it('avoids animation setup for a static option icon', async () => {
+    const reanimated = jest.requireMock('react-native-reanimated') as {
+      useAnimatedStyle: typeof import('react-native-reanimated').useAnimatedStyle;
+      useSharedValue: typeof import('react-native-reanimated').useSharedValue;
+    };
+    const useAnimatedStyleSpy = jest.spyOn(reanimated, 'useAnimatedStyle');
+    const useSharedValueSpy = jest.spyOn(reanimated, 'useSharedValue');
+
+    try {
+      await render(
+        <SegmentedButtons
+          value="walk"
+          buttons={[{ value: 'walk', icon: 'walk' }]}
+          onValueChange={() => {}}
+        />
+      );
+
+      expect(useSharedValueSpy).toHaveBeenLastCalledWith(0);
+      expect(useAnimatedStyleSpy).not.toHaveBeenCalled();
+    } finally {
+      useAnimatedStyleSpy.mockRestore();
+      useSharedValueSpy.mockRestore();
+    }
+  });
+
   it('restores the option icon and resets its scale when selected checks are disabled', async () => {
     const reanimated = jest.requireMock('react-native-reanimated') as {
       withSpring: typeof import('react-native-reanimated').withSpring;