fix: animation in bottom sheet

Author: lukewalczak

src/components/BottomNavigation/BottomNavigation.tsx

@@ -179,10 +179,6 @@ export type Props<Route extends BaseRoute> = {
    * Get badge for the tab, uses `route.badge` by default.
    */
   getBadge?: (props: { route: Route }) => boolean | number | string | undefined;
-  /**
-   * Get color for the tab, uses `route.color` by default.
-   */
-  getColor?: (props: { route: Route }) => string | undefined;
   /**
    * Get label text for the tab, uses `route.title` by default. Use `renderLabel` to replace label component.
    */
@@ -327,7 +323,6 @@ const BottomNavigation = <Route extends BaseRoute>({
   renderTouchable,
   getLabelText,
   getBadge,
-  getColor,
   getAccessibilityLabel,
   getTestID,
   activeColor,
@@ -406,7 +401,7 @@ const BottomNavigation = <Route extends BaseRoute>({
         ...navigationState.routes.map((_, i) =>
           Animated.timing(tabsPositionAnims[i], {
             toValue: i === index ? 0 : i >= index ? 1 : -1,
-            duration: shifting ? 150 * scale : 0,
+            duration: 150 * scale,
             useNativeDriver: true,
             easing: sceneAnimationEasing,
           })
@@ -426,7 +421,6 @@ const BottomNavigation = <Route extends BaseRoute>({
       });
     },
     [
-      shifting,
       navigationState.routes,
       offsetsAnims,
       scale,
@@ -579,7 +573,6 @@ const BottomNavigation = <Route extends BaseRoute>({
         renderTouchable={renderTouchable}
         getLabelText={getLabelText}
         getBadge={getBadge}
-        getColor={getColor}
         getAccessibilityLabel={getAccessibilityLabel}
         getTestID={getTestID}
         activeColor={activeColor}

src/components/BottomNavigation/BottomNavigationBar.tsx

@@ -37,10 +37,6 @@ type BaseRoute = {
   focusedIcon?: IconSource;
   unfocusedIcon?: IconSource;
   badge?: string | number | boolean;
-  /**
-   * @deprecated In v5.x works only with theme version 2.
-   */
-  color?: string;
   accessibilityLabel?: string;
   testID?: string;
   lazy?: boolean;
@@ -94,7 +90,6 @@ export type Props<Route extends BaseRoute> = {
    * - `title`: title of the route to use as the tab label
    * - `focusedIcon`:  icon to use as the focused tab icon, can be a string, an image source or a react component @renamed Renamed from 'icon' to 'focusedIcon' in v5.x
    * - `unfocusedIcon`:  icon to use as the unfocused tab icon, can be a string, an image source or a react component @supported Available in v5.x with theme version 3
-   * - `color`: color to use as background color for shifting bottom navigation @deprecatedProperty In v5.x works only with theme version 2.
    * - `badge`: badge to show on the tab icon, can be `true` to show a dot, `string` or `number` to show text.
    * - `accessibilityLabel`: accessibility label for the tab button
    * - `testID`: test id for the tab button
@@ -146,10 +141,6 @@ export type Props<Route extends BaseRoute> = {
    * Get badge for the tab, uses `route.badge` by default.
    */
   getBadge?: (props: { route: Route }) => boolean | number | string | undefined;
-  /**
-   * Get color for the tab, uses `route.color` by default.
-   */
-  getColor?: (props: { route: Route }) => string | undefined;
   /**
    * Get label text for the tab, uses `route.title` by default. Use `renderLabel` to replace label component.
    */
@@ -416,13 +407,13 @@ const BottomNavigationBar = <Route extends BaseRoute>({
       Animated.parallel([
         Animated.timing(rippleAnim, {
           toValue: 1,
-          duration: shifting ? 400 * scale : 0,
+          duration: 400 * scale,
           useNativeDriver: true,
         }),
         ...navigationState.routes.map((_, i) =>
           Animated.timing(tabsAnims[i], {
             toValue: i === index ? 1 : 0,
-            duration: shifting ? 150 * scale : 0,
+            duration: 150 * scale,
             useNativeDriver: true,
             easing: animationEasing,
           })
@@ -438,7 +429,6 @@ const BottomNavigationBar = <Route extends BaseRoute>({
     },
     [
       rippleAnim,
-      shifting,
       scale,
       navigationState.routes,
       tabsAnims,

src/react-navigation/views/MaterialBottomTabView.tsx

@@ -99,7 +99,6 @@ export default function MaterialBottomTabView({
           ? options.title
           : (route as Route<string>).name;
       }}
-      getColor={({ route }) => descriptors[route.key].options.tabBarColor}
       getBadge={({ route }) => descriptors[route.key].options.tabBarBadge}
       getAccessibilityLabel={({ route }) =>
         descriptors[route.key].options.tabBarAccessibilityLabel