Bottomtab icon change (#1133)

Change bottom tab bar button image at runtime

android/app/src/main/java/com/reactnativenavigation/bridge/NavigationReactModule.java

@@ -111,6 +111,16 @@ public class NavigationReactModule extends ReactContextBaseJavaModule {
         NavigationCommandsHandler.setBottomTabBadgeByNavigatorId(navigatorId, badge);
     }
 
+    @ReactMethod
+    public void setBottomTabButtonByIndex(Integer index, final ReadableMap params) {
+        NavigationCommandsHandler.setBottomTabButtonByIndex(index, BundleConverter.toBundle(params));
+    }
+
+    @ReactMethod
+    public void setBottomTabButtonByNavigatorId(String navigatorId, final ReadableMap params) {
+        NavigationCommandsHandler.setBottomTabButtonByNavigatorId(navigatorId, BundleConverter.toBundle(params));
+    }
+
     @ReactMethod
     public void selectBottomTabByTabIndex(Integer index) {
         NavigationCommandsHandler.selectBottomTabByTabIndex(index);

android/app/src/main/java/com/reactnativenavigation/controllers/NavigationActivity.java

@@ -338,6 +338,18 @@ public class NavigationActivity extends AppCompatActivity implements DefaultHard
         }
     }
 
+    public void setBottomTabButtonByIndex(Integer index, ScreenParams params) {
+        if (layout instanceof BottomTabsLayout) {
+            ((BottomTabsLayout) layout).setBottomTabButtonByIndex(index, params);
+        }
+    }
+
+    public void setBottomTabButtonByNavigatorId(String navigatorId, ScreenParams params) {
+        if (layout instanceof BottomTabsLayout) {
+            ((BottomTabsLayout) layout).setBottomTabButtonByNavigatorId(navigatorId, params);
+        }
+    }
+
     public void showSlidingOverlay(SlidingOverlayParams params) {
         if (modalController.isShowing()) {
             modalController.showSlidingOverlay(params);

android/app/src/main/java/com/reactnativenavigation/controllers/NavigationCommandsHandler.java

@@ -399,6 +399,36 @@ public class NavigationCommandsHandler {
         });
     }
 
+    public static void setBottomTabButtonByIndex(final Integer index, final Bundle screenParams) {
+        final NavigationActivity currentActivity = NavigationActivity.currentActivity;
+        if (currentActivity == null) {
+            return;
+        }
+
+        final ScreenParams params = ScreenParamsParser.parse(screenParams);
+        NavigationApplication.instance.runOnMainThread(new Runnable() {
+            @Override
+            public void run() {
+                currentActivity.setBottomTabButtonByIndex(index, params);
+            }
+        });
+    }
+
+    public static void setBottomTabButtonByNavigatorId(final String navigatorId, final Bundle screenParams) {
+        final NavigationActivity currentActivity = NavigationActivity.currentActivity;
+        if (currentActivity == null) {
+            return;
+        }
+
+        final ScreenParams params = ScreenParamsParser.parse(screenParams);
+        NavigationApplication.instance.runOnMainThread(new Runnable() {
+            @Override
+            public void run() {
+                currentActivity.setBottomTabButtonByNavigatorId(navigatorId, params);
+            }
+        });
+    }
+
     public static void showSlidingOverlay(final SlidingOverlayParams params) {
         final NavigationActivity currentActivity = NavigationActivity.currentActivity;
         if (currentActivity == null) {

android/app/src/main/java/com/reactnativenavigation/layouts/BottomTabsLayout.java

@@ -434,6 +434,14 @@ public class BottomTabsLayout extends BaseLayout implements AHBottomNavigation.O
         bottomTabs.setNotification(badge, getScreenStackIndex(navigatorId));
     }
 
+    public void setBottomTabButtonByIndex(Integer index, ScreenParams params) {
+        bottomTabs.setTabButton(params, index);
+    }
+
+    public void setBottomTabButtonByNavigatorId(String navigatorId, ScreenParams params) {
+        bottomTabs.setTabButton(params, getScreenStackIndex(navigatorId));
+    }
+
     private int getScreenStackIndex(String navigatorId) throws ScreenStackNotFoundException {
         for (int i = 0; i < screenStacks.length; i++) {
             if (screenStacks[i].getNavigatorId().equals(navigatorId)) {

android/app/src/main/java/com/reactnativenavigation/views/BottomTabs.java

@@ -51,6 +51,14 @@ public class BottomTabs extends AHBottomNavigation {
         setVisibility(params.bottomTabsHidden, true);
     }
 
+    public void setTabButton(ScreenParams params, Integer index) {
+        if (params.tabIcon != null) {
+            AHBottomNavigationItem item = this.getItem(index);
+            item.setDrawable(params.tabIcon);
+            refresh();
+        }
+    }
+
     private void setTitlesDisplayState() {
         if (AppStyle.appStyle.forceTitlesDisplay) {
             setTitleState(TitleState.ALWAYS_SHOW);

ios/RCCTabBarController.m

@@ -261,6 +261,47 @@
     }
   }
   
+  if ([performAction isEqualToString:@"setTabButton"])
+  {
+    UIViewController *viewController = nil;
+    NSNumber *tabIndex = actionParams[@"tabIndex"];
+    if (tabIndex)
+    {
+      int i = (int)[tabIndex integerValue];
+      
+      if ([self.viewControllers count] > i)
+      {
+        viewController = [self.viewControllers objectAtIndex:i];
+      }
+    }
+    NSString *contentId = actionParams[@"contentId"];
+    NSString *contentType = actionParams[@"contentType"];
+    if (contentId && contentType)
+    {
+      viewController = [[RCCManager sharedInstance] getControllerWithId:contentId componentType:contentType];
+    }
+    
+    if (viewController)
+    {
+      UIImage *iconImage = nil;
+      id icon = actionParams[@"icon"];
+      if (icon && icon != (id)[NSNull null])
+      {
+        iconImage = [RCTConvert UIImage:icon];
+        iconImage = [[self image:iconImage withColor:self.tabBar.tintColor] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
+        viewController.tabBarItem.image = iconImage;
+      
+      }
+      UIImage *iconImageSelected = nil;
+      id selectedIcon = actionParams[@"selectedIcon"];
+      if (selectedIcon && selectedIcon != (id)[NSNull null])
+      {
+        iconImageSelected = [RCTConvert UIImage:selectedIcon];
+        viewController.tabBarItem.selectedImage = iconImageSelected;
+      }
+    }
+  }
+  
   if ([performAction isEqualToString:@"setTabBarHidden"])
   {
     BOOL hidden = [actionParams[@"hidden"] boolValue];

src/Screen.js

@@ -108,6 +108,10 @@ class Navigator {
     return platformSpecific.navigatorSetTabBadge(this, params);
   }
 
+  setTabButton(params = {}) {
+    return platformSpecific.navigatorSetTabButton(this, params);
+  }
+
   switchToTab(params = {}) {
     return platformSpecific.navigatorSwitchToTab(this, params);
   }

src/deprecated/controllers/index.js

@@ -243,6 +243,10 @@ var Controllers = {
       },
       switchTo: function (params) {
         return RCCManager.TabBarControllerIOS(id, "switchTo", params);
+      },
+      setTabButton: function (params) {
+        _processProperties(params);
+        return RCCManager.TabBarControllerIOS(id, "setTabButton", params);
       }
     };
   },

src/deprecated/platformSpecificDeprecated.android.js

@@ -334,6 +334,21 @@ function navigatorSetTabBadge(navigator, params) {
   }
 }
 
+function navigatorSetTabButton(navigator, params) {
+  if (params.icon) {
+    const icon = resolveAssetSource(params.icon);
+    if (icon) {
+      params.icon = icon.uri;
+    }
+  }
+  params.navigationParams = {};
+  if (params.tabIndex >= 0) {
+    newPlatformSpecific.setBottomTabButtonByIndex(params.tabIndex, params);
+  } else {
+    newPlatformSpecific.setBottomTabButtonByNavigatorId(navigator.navigatorID, params);
+  }
+}
+
 function navigatorSetTitle(navigator, params) {
   newPlatformSpecific.setScreenTitleBarTitle(navigator.screenInstanceID, params.title);
 }
@@ -671,6 +686,7 @@ export default {
   dismissInAppNotification,
   navigatorSetButtons,
   navigatorSetTabBadge,
+  navigatorSetTabButton,
   navigatorSetTitle,
   navigatorSetSubtitle,
   navigatorSetStyle,

src/deprecated/platformSpecificDeprecated.ios.js

@@ -382,6 +382,24 @@ function navigatorSetTabBadge(navigator, params) {
   }
 }
 
+function navigatorSetTabButton(navigator, params) {
+  const controllerID = navigator.navigatorID.split('_')[0];
+  if (params.tabIndex || params.tabIndex === 0) {
+    Controllers.TabBarControllerIOS(controllerID + '_tabs').setTabButton({
+      tabIndex: params.tabIndex,
+      icon: params.icon,
+      selectedIcon: params.selectedIcon
+    });
+  } else {
+    Controllers.TabBarControllerIOS(controllerID + '_tabs').setTabButton({
+      contentId: navigator.navigatorID,
+      contentType: 'NavigationControllerIOS',
+      icon: params.icon,
+      selectedIcon: params.selectedIcon
+    });
+  }
+}
+
 function navigatorSwitchToTab(navigator, params) {
   const controllerID = navigator.navigatorID.split('_')[0];
   if (params.tabIndex || params.tabIndex === 0) {
@@ -611,6 +629,7 @@ export default {
   navigatorToggleDrawer,
   navigatorToggleTabs,
   navigatorSetTabBadge,
+  navigatorSetTabButton,
   navigatorSwitchToTab,
   navigatorToggleNavBar,
   showContextualMenu,

src/platformSpecific.android.js

@@ -145,6 +145,14 @@ function setBottomTabBadgeByNavigatorId(navigatorId, badge) {
   NativeReactModule.setBottomTabBadgeByNavigatorId(navigatorId, badge);
 }
 
+function setBottomTabButtonByIndex(index, params) {
+  NativeReactModule.setBottomTabButtonByIndex(index, params);
+}
+
+function setBottomTabButtonByNavigatorId(navigatorId, params) {
+  NativeReactModule.setBottomTabButtonByNavigatorId(navigatorId, params);
+}
+
 function showSnackbar(params) {
   NativeReactModule.showSnackbar(params);
 }
@@ -191,6 +199,8 @@ module.exports = {
   selectBottomTabByTabIndex,
   setBottomTabBadgeByNavigatorId,
   setBottomTabBadgeByIndex,
+  setBottomTabButtonByNavigatorId,
+  setBottomTabButtonByIndex,
   showSnackbar,
   dismissSnackbar,
   showContextualMenu,