Customize animation?

[Frexuz]

Would you consider adding this feature? .damping(80).stiffness(200) feels a bit slow to me :P

Also, the Header (AnimatedPressable) doesn't have a press effect.

[kristian-nst]

diff --git node_modules/@animatereactnative/accordion/src/index.tsx node_modules/@animatereactnative/accordion/src/index.tsx
index d999bec..5c1616b 100644
--- node_modules/@animatereactnative/accordion/src/index.tsx
+++ node_modules/@animatereactnative/accordion/src/index.tsx
@@ -14,9 +14,19 @@ import Animated, {

 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);

-const AccordionContext = createContext({
+const DEFAULT_SPRING_CONFIG = {
+  damping: 80, // Higher damping reduces bounce while maintaining speed
+  stiffness: 200, // High stiffness for fast response
+} as const;
+
+const AccordionContext = createContext<{
+  isOpen: boolean;
+  accordionIsOpen: () => void;
+  springConfig: { damping: number; stiffness: number };
+}>({
   isOpen: false,
   accordionIsOpen: () => {},
+  springConfig: DEFAULT_SPRING_CONFIG,
 });

 // type AccordionProvider = ContextType<typeof AccordionContext>;
@@ -38,13 +48,19 @@ function Provider({
   isOpen: initialIsOpen,
   onChange,
   style,
+  damping = DEFAULT_SPRING_CONFIG.damping,
+  stiffness = DEFAULT_SPRING_CONFIG.stiffness,
   ...rest
 }: {
   children: React.ReactNode;
   isOpen?: boolean;
   onChange?: (value: boolean) => void;
+  damping?: number;
+  stiffness?: number;
 } & AnimatedProps<ViewProps>) {
   const [isOpen, accordionIsOpen] = useState(!!initialIsOpen);
+  const springConfig = { damping, stiffness };
+
   return (
     <AccordionContext.Provider
       value={{
@@ -55,11 +71,14 @@ function Provider({
             return !prev;
           });
         },
+        springConfig,
       }}
     >
       <Animated.View
         style={[style, { overflow: 'hidden' }]}
-        layout={LinearTransition.springify().damping(80).stiffness(200)}
+        layout={LinearTransition.springify()
+          .damping(springConfig.damping)
+          .stiffness(springConfig.stiffness)}
         {...rest}
       >
         {children}
@@ -85,13 +104,13 @@ function Icon({
   children: React.ReactNode;
   rotation?: 'clockwise' | 'counter-clockwise';
 }) {
-  const { isOpen } = useAccordion();
+  const { isOpen, springConfig } = useAccordion();
   const rotate = useDerivedValue(() => {
     return withSpring(isOpen ? (rotation === 'clockwise' ? -1 : 1) * 180 : 0, {
-      damping: 80,
-      stiffness: 200,
+      damping: springConfig.damping,
+      stiffness: springConfig.stiffness,
     });
-  }, [isOpen, rotation]);
+  }, [isOpen, rotation, springConfig.damping, springConfig.stiffness]);

   const stylez = useAnimatedStyle(() => {
     return {
@@ -106,7 +125,9 @@ function Icon({
   return (
     <Animated.View
       style={stylez}
-      layout={LinearTransition.springify().damping(80).stiffness(200)}
+      layout={LinearTransition.springify()
+        .damping(springConfig.damping)
+        .stiffness(springConfig.stiffness)}
     >
       {children}
     </Animated.View>
@@ -137,11 +158,18 @@ function Always({ children, ...rest }: AnimatedComponentProps) {
 }

 function Content({ children, style, ...rest }: AnimatedComponentProps) {
+  const { springConfig } = useAccordion();
   return (
     <Animated.View
-      entering={FadeIn.springify().damping(80).stiffness(200)}
-      exiting={FadeOut.springify().damping(80).stiffness(200)}
-      layout={LinearTransition.springify().damping(80).stiffness(200)}
+      entering={FadeIn.springify()
+        .damping(springConfig.damping)
+        .stiffness(springConfig.stiffness)}
+      exiting={FadeOut.springify()
+        .damping(springConfig.damping)
+        .stiffness(springConfig.stiffness)}
+      layout={LinearTransition.springify()
+        .damping(springConfig.damping)
+        .stiffness(springConfig.stiffness)}
       style={[style, { overflow: 'hidden' }]}
       {...rest}
     >
@@ -151,9 +179,12 @@ function Content({ children, style, ...rest }: AnimatedComponentProps) {
 }

 function Sibling({ children, ...rest }: AnimatedComponentProps) {
+  const { springConfig } = useAccordion();
   return (
     <Animated.View
-      layout={LinearTransition.springify().damping(80).stiffness(200)}
+      layout={LinearTransition.springify()
+        .damping(springConfig.damping)
+        .stiffness(springConfig.stiffness)}
       {...rest}
     >
       {children}
@@ -167,6 +198,8 @@ export const Accordion = {
    *
    * @param isOpen boolean
    * @param onChange (value: boolean) => void
+   * @param damping number - Spring damping (default: 80)
+   * @param stiffness number - Spring stiffness (default: 200)
    */
   Accordion: Provider,
   /**

patch file to configure damping and stiffness

personally i now use 100/1000 as config