feat(animation): speed up animation config

Author: minheq

src/components/Drawer/Drawer.tsx

@@ -3,6 +3,7 @@ import { View } from 'react-native';
 import { animated, useSpring } from 'react-spring/native.cjs';
 import { DeepPartial } from 'ts-essentials';
 
+import { springDefaultConfig } from '../../constants/Animation';
 import { useTheme } from '../../theme';
 import { mergeStyles, ReplaceReturnType } from '../../utils/mergeStyles';
 import { Modal } from '../Modal';
@@ -51,6 +52,7 @@ export const Drawer = (props: DrawerProps) => {
 
   const animation = useSpring({
     [position]: offset,
+    config: springDefaultConfig,
     from: { [position]: -600 },
     reset: true,
   });

src/components/Modal/ModalBase.web.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { animated, useSpring } from 'react-spring/web.cjs';
 
+import { springDefaultConfig } from '../../constants/Animation';
 import { useElement, useFreezeBody } from '../Helpers';
 import { ModalBaseProps } from './ModalBase';
 
@@ -69,6 +70,8 @@ export const ModalBase = (props: ModalBaseProps): React.ReactPortal | null => {
       if (!visible) setIsInView(false);
     },
 
+    config: springDefaultConfig,
+
     opacity: animationType === 'fade' ? (visible ? 1 : 0) : 1,
     y: animationType === 'slide' ? (visible ? 0 : 100) : 0,
   });

src/components/Progress/Progress.tsx

@@ -3,6 +3,7 @@ import { Platform, View } from 'react-native';
 import { animated, useSpring } from 'react-spring/native.cjs';
 import { DeepPartial } from 'ts-essentials';
 
+import { springDefaultConfig } from '../../constants/Animation';
 import { useTheme } from '../../theme';
 import { mergeStyles, ReplaceReturnType } from '../../utils/mergeStyles';
 import {
@@ -32,6 +33,7 @@ export const Progress = (props: ProgressProps) => {
 
   const boundPercent = Math.max(Math.min(percent, 100), 0);
   const { width } = useSpring({
+    config: springDefaultConfig,
     from: { width: boundPercent },
     width: boundPercent,
   });

src/components/Switch/Switch.tsx

@@ -8,6 +8,7 @@ import {
 import { animated, useSpring } from 'react-spring/native.cjs';
 import { DeepPartial } from 'ts-essentials';
 
+import { springDefaultConfig } from '../../constants/Animation';
 import { Icon } from '../../icons';
 import { useTheme } from '../../theme';
 import { mergeStyles, ReplaceReturnType } from '../../utils/mergeStyles';
@@ -53,6 +54,8 @@ export const Switch = (props: SwitchProps) => {
   } = mergeStyles(getSwitchStyles, getStyles)(theme);
 
   const { backgroundColor, circleColor, circlePosition } = useSpring({
+    config: springDefaultConfig,
+
     backgroundColor: isSwitchedOn ? backgroundColorOn : backgroundColorOff,
     circleColor: isSwitchedOn ? circleColorOn : circleColorOff,
     circlePosition: isSwitchedOn

src/components/Toast/Toast.tsx

@@ -3,6 +3,7 @@ import { View } from 'react-native';
 import { animated, useSpring } from 'react-spring/native.cjs';
 import { Omit } from 'ts-essentials';
 
+import { springDefaultConfig } from '../../constants/Animation';
 import { Alert, AlertProps } from '../Alert';
 
 const AnimatedView = animated(View);
@@ -37,6 +38,8 @@ export const Toast = (props: ToastProps) => {
   } = props;
 
   const style = useSpring({
+    config: springDefaultConfig,
+
     from: { translateY: -500 },
     onRest: () => onRemove(),
     to: async next => {

src/constants/Animation.ts

@@ -0,0 +1,4 @@
+export const springDefaultConfig = {
+  friction: 40,
+  tension: 400,
+};