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 { ListRowContext, getAccordionColors, getLeftStyles } from './utils';
 import { useLocale } from '../../core/locale';
 import { useInternalTheme } from '../../core/theming';
+import { useReduceMotion } from '../../theme/accessibility/ReduceMotionContext';
 import type { ThemeProp } from '../../theme/types';
 import MaterialCommunityIcon from '../MaterialCommunityIcon';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
@@ -239,6 +252,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 {
     descriptionColor,
     titleTextColor,
@@ -341,21 +410,28 @@ 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>
         </ListRowContext.Provider>
       </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>
   );
 };
@@ -405,6 +482,9 @@ const styles = StyleSheet.create({
   child: {
     paddingLeft: 40,
   },
+  expandedContent: {
+    overflow: 'hidden',
+  },
   content: {
     flex: 1,
     justifyContent: 'center',