refactor: clean up animation configs variables #572

gorhom · Aug 21, 2021 · 8e002e1 · 8e002e1
1 parent f2891a8
commit 8e002e1
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 35 deletions.
diff --git a/src/components/bottomSheet/constants.ts b/src/components/bottomSheet/constants.ts
@@ -1,16 +1,11 @@
-import Animated, { Easing } from 'react-native-reanimated';
 import {
   KEYBOARD_BEHAVIOR,
   KEYBOARD_BLUR_BEHAVIOR,
   KEYBOARD_INPUT_MODE,
   WINDOW_HEIGHT,
 } from '../../constants';
-import { exp } from '../../utilities/easingExp';
 
 // default values
-const DEFAULT_ANIMATION_EASING: Animated.EasingFunction = Easing.out(exp);
-const DEFAULT_ANIMATION_DURATION = 500;
-
 const DEFAULT_HANDLE_HEIGHT = 24;
 const DEFAULT_OVER_DRAG_RESISTANCE_FACTOR = 2.5;
 const DEFAULT_ENABLE_CONTENT_PANNING_GESTURE = true;
@@ -37,8 +32,6 @@ const INITIAL_HANDLE_HEIGHT = -999;
 const INITIAL_POSITION = WINDOW_HEIGHT;
 
 export {
-  DEFAULT_ANIMATION_EASING,
-  DEFAULT_ANIMATION_DURATION,
   DEFAULT_HANDLE_HEIGHT,
   DEFAULT_OVER_DRAG_RESISTANCE_FACTOR,
   DEFAULT_ENABLE_CONTENT_PANNING_GESTURE,

diff --git a/src/constants.ts b/src/constants.ts
@@ -1,4 +1,5 @@
 import { Dimensions, Platform } from 'react-native';
+import Animated, { Easing } from 'react-native-reanimated';
 
 const { height: WINDOW_HEIGHT, width: WINDOW_WIDTH } = Dimensions.get('window');
 
@@ -58,6 +59,26 @@ enum KEYBOARD_STATE {
   HIDDEN,
 }
 
+const ANIMATION_EASING: Animated.EasingFunction = Easing.out(Easing.exp);
+const ANIMATION_DURATION = 250;
+
+const ANIMATION_CONFIGS_IOS = {
+  damping: 500,
+  stiffness: 1000,
+  mass: 3,
+  overshootClamping: true,
+  restDisplacementThreshold: 10,
+  restSpeedThreshold: 10,
+};
+
+const ANIMATION_CONFIGS_ANDROID = {
+  duration: ANIMATION_DURATION,
+  easing: ANIMATION_EASING,
+};
+
+const ANIMATION_CONFIGS =
+  Platform.OS === 'ios' ? ANIMATION_CONFIGS_IOS : ANIMATION_CONFIGS_ANDROID;
+
 const SCROLLABLE_DECELERATION_RATE_MAPPER = {
   [SCROLLABLE_STATE.UNDETERMINED]: 0,
   [SCROLLABLE_STATE.LOCKED]: 0,
@@ -108,4 +129,7 @@ export {
   KEYBOARD_BLUR_BEHAVIOR,
   KEYBOARD_INPUT_MODE,
   KEYBOARD_DISMISS_THRESHOLD,
+  ANIMATION_CONFIGS,
+  ANIMATION_EASING,
+  ANIMATION_DURATION,
 };
diff --git a/src/hooks/useBottomSheetTimingConfigs.ts b/src/hooks/useBottomSheetTimingConfigs.ts
@@ -1,24 +1,21 @@
 import { useMemo } from 'react';
 import Animated from 'react-native-reanimated';
-import {
-  DEFAULT_ANIMATION_DURATION,
-  DEFAULT_ANIMATION_EASING,
-} from '../components/bottomSheet/constants';
+import { ANIMATION_DURATION, ANIMATION_EASING } from '../constants';
 
 /**
  * Generate timing animation configs.
  * @default
  * - easing: Easing.out(Easing.exp)
- * - duration 500
+ * - duration 250
  * @param configs overridable configs.
  */
 export const useBottomSheetTimingConfigs = (
   configs: Animated.WithTimingConfig
 ) => {
   return useMemo(() => {
     const _configs: Animated.WithTimingConfig = {
-      easing: configs.easing || DEFAULT_ANIMATION_EASING,
-      duration: configs.duration || DEFAULT_ANIMATION_DURATION,
+      easing: configs.easing || ANIMATION_EASING,
+      duration: configs.duration || ANIMATION_DURATION,
     };
 
     return _configs;

diff --git a/src/utilities/animate.ts b/src/utilities/animate.ts
@@ -1,10 +1,5 @@
-import { Platform } from 'react-native';
-import Animated, {
-  Easing,
-  withSpring,
-  withTiming,
-} from 'react-native-reanimated';
-import { ANIMATION_METHOD } from '../constants';
+import Animated, { withSpring, withTiming } from 'react-native-reanimated';
+import { ANIMATION_CONFIGS, ANIMATION_METHOD } from '../constants';
 
 interface AnimateParams {
   point: number;
@@ -22,20 +17,7 @@ export const animate = ({
   'worklet';
 
   if (!configs) {
-    configs =
-      Platform.OS === 'android'
-        ? {
-            duration: 250,
-            easing: Easing.out(Easing.exp),
-          }
-        : {
-            damping: 500,
-            stiffness: 1000,
-            mass: 3,
-            overshootClamping: true,
-            restDisplacementThreshold: 10,
-            restSpeedThreshold: 10,
-          };
+    configs = ANIMATION_CONFIGS;
   }
 
   // detect animation type