feat: allow full configuration of tab bar hide animation

react-navigation · Jul 28, 2020 · 0b62730 · 0b62730
1 parent d979dfd
commit 0b62730
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 25 deletions.
diff --git a/packages/bottom-tabs/src/types.tsx b/packages/bottom-tabs/src/types.tsx
@@ -55,6 +55,26 @@ export type BottomTabScreenProps<
   route: RouteProp<ParamList, RouteName>;
 };
 
+export type TimingKeyboardAnimationConfig = {
+  animation: 'timing';
+  config?: Omit<
+    Partial<Animated.TimingAnimationConfig>,
+    'toValue' | 'useNativeDriver'
+  >;
+};
+
+export type SpringKeyboardAnimationConfig = {
+  animation: 'spring';
+  config?: Omit<
+    Partial<Animated.SpringAnimationConfig>,
+    'toValue' | 'useNativeDriver'
+  >;
+};
+
+export type TabBarVisibilityAnimationConfig =
+  | TimingKeyboardAnimationConfig
+  | SpringKeyboardAnimationConfig;
+
 export type BottomTabNavigationOptions = {
   /**
    * Title text for the screen.
@@ -105,14 +125,12 @@ export type BottomTabNavigationOptions = {
   tabBarVisible?: boolean;
 
   /**
-   * Milliseconds that it should take for the animation of a hidden tab bar to become visible.
+   * Animation config for showing and hiding the tab bar.
    */
-  tabBarShowAnimationDuration?: number;
-
-  /**
-   * Milliseconds that it should take for the animation of a visible tab bar to become hidden.
-   */
-  tabBarHideAnimationDuration?: number;
+  tabBarVisibilityAnimationConfig?: {
+    show?: TabBarVisibilityAnimationConfig;
+    hide?: TabBarVisibilityAnimationConfig;
+  };
 
   /**
    * Function which returns a React element to render as the tab bar button.

diff --git a/packages/bottom-tabs/src/views/BottomTabBar.tsx b/packages/bottom-tabs/src/views/BottomTabBar.tsx
@@ -62,14 +62,15 @@ export default function BottomTabBar({
   const shouldShowTabBar =
     focusedOptions.tabBarVisible !== false &&
     !(keyboardHidesTabBar && isKeyboardShown);
-  const tabBarShowAnimationDuration =
-    typeof focusedOptions.tabBarShowAnimationDuration === 'undefined'
-      ? 250
-      : focusedOptions.tabBarShowAnimationDuration;
-  const tabBarHideAnimationDuration =
-    typeof focusedOptions.tabBarHideAnimationDuration === 'undefined'
-      ? 200
-      : focusedOptions.tabBarHideAnimationDuration;
+
+  const visibilityAnimationConfigRef = React.useRef(
+    focusedOptions.tabBarVisibilityAnimationConfig
+  );
+
+  React.useEffect(() => {
+    visibilityAnimationConfigRef.current =
+      focusedOptions.tabBarVisibilityAnimationConfig;
+  });
 
   const [isTabBarHidden, setIsTabBarHidden] = React.useState(!shouldShowTabBar);
 
@@ -78,11 +79,19 @@ export default function BottomTabBar({
   );
 
   React.useEffect(() => {
+    const visibilityAnimationConfig = visibilityAnimationConfigRef.current;
+
     if (shouldShowTabBar) {
-      Animated.timing(visible, {
+      const animation =
+        visibilityAnimationConfig?.show?.animation === 'spring'
+          ? Animated.spring
+          : Animated.timing;
+
+      animation(visible, {
         toValue: 1,
-        duration: tabBarShowAnimationDuration,
         useNativeDriver,
+        duration: 250,
+        ...visibilityAnimationConfig?.show?.config,
       }).start(({ finished }) => {
         if (finished) {
           setIsTabBarHidden(false);
@@ -91,18 +100,19 @@ export default function BottomTabBar({
     } else {
       setIsTabBarHidden(true);
 
-      Animated.timing(visible, {
+      const animation =
+        visibilityAnimationConfig?.hide?.animation === 'spring'
+          ? Animated.spring
+          : Animated.timing;
+
+      animation(visible, {
         toValue: 0,
-        duration: tabBarHideAnimationDuration,
         useNativeDriver,
+        duration: 200,
+        ...visibilityAnimationConfig?.hide?.config,
       }).start();
     }
-  }, [
-    shouldShowTabBar,
-    visible,
-    tabBarShowAnimationDuration,
-    tabBarHideAnimationDuration,
-  ]);
+  }, [visible, shouldShowTabBar]);
 
   const [layout, setLayout] = React.useState({
     height: 0,