feat: animate List.Accordion expand and collapse

Author: adam-sajko

src/components/List/ListAccordion.tsx

@@ -12,12 +12,25 @@ import type {
   ViewStyle,
 } from 'react-native';
 
+import Animated, {
+  Easing,
+  ReduceMotion,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import type {
+  EntryAnimationsValues,
+  ExitAnimationsValues,
+} from 'react-native-reanimated';
+
 import { ListAccordionGroupContext } from './ListAccordionGroup';
 import { ListTokens } from './tokens';
 import type { ListChildProps, Style } from './utils';
 import { getLeftStyles } from './utils';
 import { useLocale } from '../../core/locale';
 import { useInternalTheme } from '../../core/theming';
+import { useReduceMotion } from '../../theme/accessibility/ReduceMotionContext';
 import type { ThemeProp } from '../../types';
 import MaterialCommunityIcon from '../MaterialCommunityIcon';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
@@ -249,6 +262,62 @@ const ListAccordion = ({
     ? groupContext.expandedId === id
     : expandedInternal;
 
+  const reduceMotion = useReduceMotion();
+  const reanimatedReduceMotion = reduceMotion
+    ? ReduceMotion.Always
+    : ReduceMotion.Never;
+
+  const timingConfig = React.useMemo(
+    () => ({
+      duration: theme.motion.duration.medium2,
+      easing: Easing.bezier(...theme.motion.easing.emphasized),
+      reduceMotion: reanimatedReduceMotion,
+    }),
+    [
+      theme.motion.duration.medium2,
+      theme.motion.easing.emphasized,
+      reanimatedReduceMotion,
+    ]
+  );
+
+  const chevronProgress = useSharedValue(isExpanded ? 1 : 0);
+
+  React.useEffect(() => {
+    chevronProgress.value = withTiming(isExpanded ? 1 : 0, timingConfig);
+  }, [isExpanded, chevronProgress, timingConfig]);
+
+  const chevronStyle = useAnimatedStyle(() => ({
+    transform: [{ rotate: `${chevronProgress.value * 180}deg` }],
+  }));
+
+  const expandAnimation = React.useCallback(
+    (values: EntryAnimationsValues) => {
+      'worklet';
+      return {
+        initialValues: { height: 0, opacity: 0 },
+        animations: {
+          height: withTiming(values.targetHeight, timingConfig),
+          opacity: withTiming(1, timingConfig),
+        },
+      };
+    },
+    [timingConfig]
+  );
+
+  const collapseAnimation = React.useCallback(
+    (values: ExitAnimationsValues) => {
+      'worklet';
+      return {
+        initialValues: { height: values.currentHeight, opacity: 1 },
+        animations: {
+          height: withTiming(0, timingConfig),
+          opacity: withTiming(0, timingConfig),
+        },
+      };
+    },
+    [timingConfig]
+  );
+
   const selectedContentColor = theme.colors[ListTokens.selectedContentColor];
   const titleTextColor = selected
     ? selectedContentColor
@@ -342,20 +411,27 @@ const ListAccordion = ({
                   isExpanded: isExpanded,
                 })
               ) : (
-                <MaterialCommunityIcon
-                  name={isExpanded ? 'chevron-up' : 'chevron-down'}
-                  color={trailingIconColor}
-                  size={24}
-                  direction={direction}
-                />
+                <Animated.View style={chevronStyle}>
+                  <MaterialCommunityIcon
+                    name="chevron-down"
+                    color={trailingIconColor}
+                    size={24}
+                    direction={direction}
+                  />
+                </Animated.View>
               )}
             </View>
           </View>
         </TouchableRipple>
       </View>
 
-      {isExpanded
-        ? React.Children.map(children, (child) => {
+      {isExpanded ? (
+        <Animated.View
+          entering={expandAnimation}
+          exiting={collapseAnimation}
+          style={styles.expandedContent}
+        >
+          {React.Children.map(children, (child) => {
             if (
               left &&
               React.isValidElement<ListChildProps>(child) &&
@@ -369,8 +445,9 @@ const ListAccordion = ({
             }
 
             return child;
-          })
-        : null}
+          })}
+        </Animated.View>
+      ) : null}
     </View>
   );
 };
@@ -403,6 +480,9 @@ const styles = StyleSheet.create({
   child: {
     paddingLeft: 40,
   },
+  expandedContent: {
+    overflow: 'hidden',
+  },
   content: {
     flex: 1,
     justifyContent: 'center',