Browse Source

Bottomtab icon change (#1133)

Change bottom tab bar button image at runtime
Gevorg Gasparyan 7 years ago
parent
commit
a92ec9527f

+ 10
- 0
android/app/src/main/java/com/reactnativenavigation/bridge/NavigationReactModule.java View File

@@ -111,6 +111,16 @@ public class NavigationReactModule extends ReactContextBaseJavaModule {
111 111
         NavigationCommandsHandler.setBottomTabBadgeByNavigatorId(navigatorId, badge);
112 112
     }
113 113
 
114
+    @ReactMethod
115
+    public void setBottomTabButtonByIndex(Integer index, final ReadableMap params) {
116
+        NavigationCommandsHandler.setBottomTabButtonByIndex(index, BundleConverter.toBundle(params));
117
+    }
118
+
119
+    @ReactMethod
120
+    public void setBottomTabButtonByNavigatorId(String navigatorId, final ReadableMap params) {
121
+        NavigationCommandsHandler.setBottomTabButtonByNavigatorId(navigatorId, BundleConverter.toBundle(params));
122
+    }
123
+
114 124
     @ReactMethod
115 125
     public void selectBottomTabByTabIndex(Integer index) {
116 126
         NavigationCommandsHandler.selectBottomTabByTabIndex(index);

+ 12
- 0
android/app/src/main/java/com/reactnativenavigation/controllers/NavigationActivity.java View File

@@ -338,6 +338,18 @@ public class NavigationActivity extends AppCompatActivity implements DefaultHard
338 338
         }
339 339
     }
340 340
 
341
+    public void setBottomTabButtonByIndex(Integer index, ScreenParams params) {
342
+        if (layout instanceof BottomTabsLayout) {
343
+            ((BottomTabsLayout) layout).setBottomTabButtonByIndex(index, params);
344
+        }
345
+    }
346
+
347
+    public void setBottomTabButtonByNavigatorId(String navigatorId, ScreenParams params) {
348
+        if (layout instanceof BottomTabsLayout) {
349
+            ((BottomTabsLayout) layout).setBottomTabButtonByNavigatorId(navigatorId, params);
350
+        }
351
+    }
352
+
341 353
     public void showSlidingOverlay(SlidingOverlayParams params) {
342 354
         if (modalController.isShowing()) {
343 355
             modalController.showSlidingOverlay(params);

+ 30
- 0
android/app/src/main/java/com/reactnativenavigation/controllers/NavigationCommandsHandler.java View File

@@ -399,6 +399,36 @@ public class NavigationCommandsHandler {
399 399
         });
400 400
     }
401 401
 
402
+    public static void setBottomTabButtonByIndex(final Integer index, final Bundle screenParams) {
403
+        final NavigationActivity currentActivity = NavigationActivity.currentActivity;
404
+        if (currentActivity == null) {
405
+            return;
406
+        }
407
+
408
+        final ScreenParams params = ScreenParamsParser.parse(screenParams);
409
+        NavigationApplication.instance.runOnMainThread(new Runnable() {
410
+            @Override
411
+            public void run() {
412
+                currentActivity.setBottomTabButtonByIndex(index, params);
413
+            }
414
+        });
415
+    }
416
+
417
+    public static void setBottomTabButtonByNavigatorId(final String navigatorId, final Bundle screenParams) {
418
+        final NavigationActivity currentActivity = NavigationActivity.currentActivity;
419
+        if (currentActivity == null) {
420
+            return;
421
+        }
422
+
423
+        final ScreenParams params = ScreenParamsParser.parse(screenParams);
424
+        NavigationApplication.instance.runOnMainThread(new Runnable() {
425
+            @Override
426
+            public void run() {
427
+                currentActivity.setBottomTabButtonByNavigatorId(navigatorId, params);
428
+            }
429
+        });
430
+    }
431
+
402 432
     public static void showSlidingOverlay(final SlidingOverlayParams params) {
403 433
         final NavigationActivity currentActivity = NavigationActivity.currentActivity;
404 434
         if (currentActivity == null) {

+ 8
- 0
android/app/src/main/java/com/reactnativenavigation/layouts/BottomTabsLayout.java View File

@@ -434,6 +434,14 @@ public class BottomTabsLayout extends BaseLayout implements AHBottomNavigation.O
434 434
         bottomTabs.setNotification(badge, getScreenStackIndex(navigatorId));
435 435
     }
436 436
 
437
+    public void setBottomTabButtonByIndex(Integer index, ScreenParams params) {
438
+        bottomTabs.setTabButton(params, index);
439
+    }
440
+
441
+    public void setBottomTabButtonByNavigatorId(String navigatorId, ScreenParams params) {
442
+        bottomTabs.setTabButton(params, getScreenStackIndex(navigatorId));
443
+    }
444
+
437 445
     private int getScreenStackIndex(String navigatorId) throws ScreenStackNotFoundException {
438 446
         for (int i = 0; i < screenStacks.length; i++) {
439 447
             if (screenStacks[i].getNavigatorId().equals(navigatorId)) {

+ 8
- 0
android/app/src/main/java/com/reactnativenavigation/views/BottomTabs.java View File

@@ -51,6 +51,14 @@ public class BottomTabs extends AHBottomNavigation {
51 51
         setVisibility(params.bottomTabsHidden, true);
52 52
     }
53 53
 
54
+    public void setTabButton(ScreenParams params, Integer index) {
55
+        if (params.tabIcon != null) {
56
+            AHBottomNavigationItem item = this.getItem(index);
57
+            item.setDrawable(params.tabIcon);
58
+            refresh();
59
+        }
60
+    }
61
+
54 62
     private void setTitlesDisplayState() {
55 63
         if (AppStyle.appStyle.forceTitlesDisplay) {
56 64
             setTitleState(TitleState.ALWAYS_SHOW);

+ 41
- 0
ios/RCCTabBarController.m View File

@@ -261,6 +261,47 @@
261 261
     }
262 262
   }
263 263
   
264
+  if ([performAction isEqualToString:@"setTabButton"])
265
+  {
266
+    UIViewController *viewController = nil;
267
+    NSNumber *tabIndex = actionParams[@"tabIndex"];
268
+    if (tabIndex)
269
+    {
270
+      int i = (int)[tabIndex integerValue];
271
+      
272
+      if ([self.viewControllers count] > i)
273
+      {
274
+        viewController = [self.viewControllers objectAtIndex:i];
275
+      }
276
+    }
277
+    NSString *contentId = actionParams[@"contentId"];
278
+    NSString *contentType = actionParams[@"contentType"];
279
+    if (contentId && contentType)
280
+    {
281
+      viewController = [[RCCManager sharedInstance] getControllerWithId:contentId componentType:contentType];
282
+    }
283
+    
284
+    if (viewController)
285
+    {
286
+      UIImage *iconImage = nil;
287
+      id icon = actionParams[@"icon"];
288
+      if (icon && icon != (id)[NSNull null])
289
+      {
290
+        iconImage = [RCTConvert UIImage:icon];
291
+        iconImage = [[self image:iconImage withColor:self.tabBar.tintColor] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
292
+        viewController.tabBarItem.image = iconImage;
293
+      
294
+      }
295
+      UIImage *iconImageSelected = nil;
296
+      id selectedIcon = actionParams[@"selectedIcon"];
297
+      if (selectedIcon && selectedIcon != (id)[NSNull null])
298
+      {
299
+        iconImageSelected = [RCTConvert UIImage:selectedIcon];
300
+        viewController.tabBarItem.selectedImage = iconImageSelected;
301
+      }
302
+    }
303
+  }
304
+  
264 305
   if ([performAction isEqualToString:@"setTabBarHidden"])
265 306
   {
266 307
     BOOL hidden = [actionParams[@"hidden"] boolValue];

+ 4
- 0
src/Screen.js View File

@@ -108,6 +108,10 @@ class Navigator {
108 108
     return platformSpecific.navigatorSetTabBadge(this, params);
109 109
   }
110 110
 
111
+  setTabButton(params = {}) {
112
+    return platformSpecific.navigatorSetTabButton(this, params);
113
+  }
114
+
111 115
   switchToTab(params = {}) {
112 116
     return platformSpecific.navigatorSwitchToTab(this, params);
113 117
   }

+ 4
- 0
src/deprecated/controllers/index.js View File

@@ -243,6 +243,10 @@ var Controllers = {
243 243
       },
244 244
       switchTo: function (params) {
245 245
         return RCCManager.TabBarControllerIOS(id, "switchTo", params);
246
+      },
247
+      setTabButton: function (params) {
248
+        _processProperties(params);
249
+        return RCCManager.TabBarControllerIOS(id, "setTabButton", params);
246 250
       }
247 251
     };
248 252
   },

+ 16
- 0
src/deprecated/platformSpecificDeprecated.android.js View File

@@ -334,6 +334,21 @@ function navigatorSetTabBadge(navigator, params) {
334 334
   }
335 335
 }
336 336
 
337
+function navigatorSetTabButton(navigator, params) {
338
+  if (params.icon) {
339
+    const icon = resolveAssetSource(params.icon);
340
+    if (icon) {
341
+      params.icon = icon.uri;
342
+    }
343
+  }
344
+  params.navigationParams = {};
345
+  if (params.tabIndex >= 0) {
346
+    newPlatformSpecific.setBottomTabButtonByIndex(params.tabIndex, params);
347
+  } else {
348
+    newPlatformSpecific.setBottomTabButtonByNavigatorId(navigator.navigatorID, params);
349
+  }
350
+}
351
+
337 352
 function navigatorSetTitle(navigator, params) {
338 353
   newPlatformSpecific.setScreenTitleBarTitle(navigator.screenInstanceID, params.title);
339 354
 }
@@ -671,6 +686,7 @@ export default {
671 686
   dismissInAppNotification,
672 687
   navigatorSetButtons,
673 688
   navigatorSetTabBadge,
689
+  navigatorSetTabButton,
674 690
   navigatorSetTitle,
675 691
   navigatorSetSubtitle,
676 692
   navigatorSetStyle,

+ 19
- 0
src/deprecated/platformSpecificDeprecated.ios.js View File

@@ -382,6 +382,24 @@ function navigatorSetTabBadge(navigator, params) {
382 382
   }
383 383
 }
384 384
 
385
+function navigatorSetTabButton(navigator, params) {
386
+  const controllerID = navigator.navigatorID.split('_')[0];
387
+  if (params.tabIndex || params.tabIndex === 0) {
388
+    Controllers.TabBarControllerIOS(controllerID + '_tabs').setTabButton({
389
+      tabIndex: params.tabIndex,
390
+      icon: params.icon,
391
+      selectedIcon: params.selectedIcon
392
+    });
393
+  } else {
394
+    Controllers.TabBarControllerIOS(controllerID + '_tabs').setTabButton({
395
+      contentId: navigator.navigatorID,
396
+      contentType: 'NavigationControllerIOS',
397
+      icon: params.icon,
398
+      selectedIcon: params.selectedIcon
399
+    });
400
+  }
401
+}
402
+
385 403
 function navigatorSwitchToTab(navigator, params) {
386 404
   const controllerID = navigator.navigatorID.split('_')[0];
387 405
   if (params.tabIndex || params.tabIndex === 0) {
@@ -611,6 +629,7 @@ export default {
611 629
   navigatorToggleDrawer,
612 630
   navigatorToggleTabs,
613 631
   navigatorSetTabBadge,
632
+  navigatorSetTabButton,
614 633
   navigatorSwitchToTab,
615 634
   navigatorToggleNavBar,
616 635
   showContextualMenu,

+ 10
- 0
src/platformSpecific.android.js View File

@@ -145,6 +145,14 @@ function setBottomTabBadgeByNavigatorId(navigatorId, badge) {
145 145
   NativeReactModule.setBottomTabBadgeByNavigatorId(navigatorId, badge);
146 146
 }
147 147
 
148
+function setBottomTabButtonByIndex(index, params) {
149
+  NativeReactModule.setBottomTabButtonByIndex(index, params);
150
+}
151
+
152
+function setBottomTabButtonByNavigatorId(navigatorId, params) {
153
+  NativeReactModule.setBottomTabButtonByNavigatorId(navigatorId, params);
154
+}
155
+
148 156
 function showSnackbar(params) {
149 157
   NativeReactModule.showSnackbar(params);
150 158
 }
@@ -191,6 +199,8 @@ module.exports = {
191 199
   selectBottomTabByTabIndex,
192 200
   setBottomTabBadgeByNavigatorId,
193 201
   setBottomTabBadgeByIndex,
202
+  setBottomTabButtonByNavigatorId,
203
+  setBottomTabButtonByIndex,
194 204
   showSnackbar,
195 205
   dismissSnackbar,
196 206
   showContextualMenu,