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
         NavigationCommandsHandler.setBottomTabBadgeByNavigatorId(navigatorId, badge);
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
     @ReactMethod
124
     @ReactMethod
115
     public void selectBottomTabByTabIndex(Integer index) {
125
     public void selectBottomTabByTabIndex(Integer index) {
116
         NavigationCommandsHandler.selectBottomTabByTabIndex(index);
126
         NavigationCommandsHandler.selectBottomTabByTabIndex(index);

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

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
     public void showSlidingOverlay(SlidingOverlayParams params) {
353
     public void showSlidingOverlay(SlidingOverlayParams params) {
342
         if (modalController.isShowing()) {
354
         if (modalController.isShowing()) {
343
             modalController.showSlidingOverlay(params);
355
             modalController.showSlidingOverlay(params);

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

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
     public static void showSlidingOverlay(final SlidingOverlayParams params) {
432
     public static void showSlidingOverlay(final SlidingOverlayParams params) {
403
         final NavigationActivity currentActivity = NavigationActivity.currentActivity;
433
         final NavigationActivity currentActivity = NavigationActivity.currentActivity;
404
         if (currentActivity == null) {
434
         if (currentActivity == null) {

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

434
         bottomTabs.setNotification(badge, getScreenStackIndex(navigatorId));
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
     private int getScreenStackIndex(String navigatorId) throws ScreenStackNotFoundException {
445
     private int getScreenStackIndex(String navigatorId) throws ScreenStackNotFoundException {
438
         for (int i = 0; i < screenStacks.length; i++) {
446
         for (int i = 0; i < screenStacks.length; i++) {
439
             if (screenStacks[i].getNavigatorId().equals(navigatorId)) {
447
             if (screenStacks[i].getNavigatorId().equals(navigatorId)) {

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

51
         setVisibility(params.bottomTabsHidden, true);
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
     private void setTitlesDisplayState() {
62
     private void setTitlesDisplayState() {
55
         if (AppStyle.appStyle.forceTitlesDisplay) {
63
         if (AppStyle.appStyle.forceTitlesDisplay) {
56
             setTitleState(TitleState.ALWAYS_SHOW);
64
             setTitleState(TitleState.ALWAYS_SHOW);

+ 41
- 0
ios/RCCTabBarController.m View File

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
   if ([performAction isEqualToString:@"setTabBarHidden"])
305
   if ([performAction isEqualToString:@"setTabBarHidden"])
265
   {
306
   {
266
     BOOL hidden = [actionParams[@"hidden"] boolValue];
307
     BOOL hidden = [actionParams[@"hidden"] boolValue];

+ 4
- 0
src/Screen.js View File

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

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

243
       },
243
       },
244
       switchTo: function (params) {
244
       switchTo: function (params) {
245
         return RCCManager.TabBarControllerIOS(id, "switchTo", params);
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
   }
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
 function navigatorSetTitle(navigator, params) {
352
 function navigatorSetTitle(navigator, params) {
338
   newPlatformSpecific.setScreenTitleBarTitle(navigator.screenInstanceID, params.title);
353
   newPlatformSpecific.setScreenTitleBarTitle(navigator.screenInstanceID, params.title);
339
 }
354
 }
671
   dismissInAppNotification,
686
   dismissInAppNotification,
672
   navigatorSetButtons,
687
   navigatorSetButtons,
673
   navigatorSetTabBadge,
688
   navigatorSetTabBadge,
689
+  navigatorSetTabButton,
674
   navigatorSetTitle,
690
   navigatorSetTitle,
675
   navigatorSetSubtitle,
691
   navigatorSetSubtitle,
676
   navigatorSetStyle,
692
   navigatorSetStyle,

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

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
 function navigatorSwitchToTab(navigator, params) {
403
 function navigatorSwitchToTab(navigator, params) {
386
   const controllerID = navigator.navigatorID.split('_')[0];
404
   const controllerID = navigator.navigatorID.split('_')[0];
387
   if (params.tabIndex || params.tabIndex === 0) {
405
   if (params.tabIndex || params.tabIndex === 0) {
611
   navigatorToggleDrawer,
629
   navigatorToggleDrawer,
612
   navigatorToggleTabs,
630
   navigatorToggleTabs,
613
   navigatorSetTabBadge,
631
   navigatorSetTabBadge,
632
+  navigatorSetTabButton,
614
   navigatorSwitchToTab,
633
   navigatorSwitchToTab,
615
   navigatorToggleNavBar,
634
   navigatorToggleNavBar,
616
   showContextualMenu,
635
   showContextualMenu,

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

145
   NativeReactModule.setBottomTabBadgeByNavigatorId(navigatorId, badge);
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
 function showSnackbar(params) {
156
 function showSnackbar(params) {
149
   NativeReactModule.showSnackbar(params);
157
   NativeReactModule.showSnackbar(params);
150
 }
158
 }
191
   selectBottomTabByTabIndex,
199
   selectBottomTabByTabIndex,
192
   setBottomTabBadgeByNavigatorId,
200
   setBottomTabBadgeByNavigatorId,
193
   setBottomTabBadgeByIndex,
201
   setBottomTabBadgeByIndex,
202
+  setBottomTabButtonByNavigatorId,
203
+  setBottomTabButtonByIndex,
194
   showSnackbar,
204
   showSnackbar,
195
   dismissSnackbar,
205
   dismissSnackbar,
196
   showContextualMenu,
206
   showContextualMenu,