feat: pass current opacity to renderIcon prop in CrossFadeIcon

src/types.tsx

@@ -141,6 +141,7 @@ export type BottomTabBarProps = BottomTabBarOptions & {
   renderIcon: (props: {
     route: NavigationRoute;
     focused: boolean;
+    currentOpacity: number;
     tintColor?: string;
     horizontal?: boolean;
   }) => React.ReactNode;
@@ -211,6 +212,7 @@ export type NavigationCommonTabOptions = {
     | React.ReactNode
     | ((props: {
         focused: boolean;
+        currentOpacity?: number;
         tintColor?: string;
         horizontal?: boolean;
       }) => React.ReactNode);

src/utils/createTabNavigator.tsx

@@ -34,6 +34,7 @@ type ExtraProps<Config extends {}> = {
 export type RenderIconProps = {
   route: NavigationRoute;
   focused: boolean;
+  currentOpacity?: number;
   tintColor?: string;
   horizontal?: boolean;
 };
@@ -75,6 +76,7 @@ export default function createTabNavigator<
     _renderIcon = ({
       route,
       focused,
+      currentOpacity,
       tintColor,
       horizontal = false,
     }: RenderIconProps) => {
@@ -84,7 +86,12 @@ export default function createTabNavigator<
 
       if (options.tabBarIcon) {
         return typeof options.tabBarIcon === 'function'
-          ? options.tabBarIcon({ focused, tintColor, horizontal })
+          ? options.tabBarIcon({
+              focused,
+              tintColor,
+              currentOpacity,
+              horizontal,
+            })
           : options.tabBarIcon;
       }
 

src/views/CrossFadeIcon.tsx

@@ -13,6 +13,7 @@ type Props = {
   renderIcon: (props: {
     route: NavigationRoute;
     focused: boolean;
+    currentOpacity: number;
     tintColor?: string;
     horizontal?: boolean;
   }) => React.ReactNode;
@@ -40,6 +41,7 @@ export default class TabBarIcon extends React.Component<Props> {
           {renderIcon({
             route,
             focused: true,
+            currentOpacity: activeOpacity,
             horizontal,
             tintColor: activeTintColor,
           })}
@@ -48,6 +50,7 @@ export default class TabBarIcon extends React.Component<Props> {
           {renderIcon({
             route,
             focused: false,
+            currentOpacity: inactiveOpacity,
             horizontal,
             tintColor: inactiveTintColor,
           })}