Browse Source

setStyle to style the according TabBar (#2524)

* setTabButton -> has now the property 'label' to change the label of the TabButton

* Add to documentation

* [BugFix] use i instead of 0 to check all TabItems

* setStyle -> to change bottomTabBar

* update android

* remove hass...-functions

* update iOS set TabStyle

* iOS change icon color on buttonTabColor has been changed

* iOS update style-update rutine to update each viewcontroller in a NavigationViewController
tabButtonColor improvement

* iOS add forgotten header declaration

* iOS fix c&p error

* [Android] initialize colors for an empty AppStyles-Object

* [Android] fix update style of tabbar on display screen

* [Android] revert eventbus changes
[Android] apply guyca's solution

* [Android] rn 50 compatibility

* remove comment
Daniel Lang 6 years ago
parent
commit
abdb6e90a0

+ 7
- 4
android/app/src/main/java/com/reactnativenavigation/layouts/BottomTabsLayout.java View File

16
 import com.facebook.react.bridge.Promise;
16
 import com.facebook.react.bridge.Promise;
17
 import com.facebook.react.bridge.WritableMap;
17
 import com.facebook.react.bridge.WritableMap;
18
 import com.reactnativenavigation.NavigationApplication;
18
 import com.reactnativenavigation.NavigationApplication;
19
+import com.reactnativenavigation.events.Event;
19
 import com.reactnativenavigation.events.EventBus;
20
 import com.reactnativenavigation.events.EventBus;
20
 import com.reactnativenavigation.events.ScreenChangedEvent;
21
 import com.reactnativenavigation.events.ScreenChangedEvent;
21
 import com.reactnativenavigation.params.ActivityParams;
22
 import com.reactnativenavigation.params.ActivityParams;
229
         for (int i = 0; i < bottomTabs.getItemsCount(); i++) {
230
         for (int i = 0; i < bottomTabs.getItemsCount(); i++) {
230
             screenStacks[i].updateScreenStyle(screenInstanceId, styleParams);
231
             screenStacks[i].updateScreenStyle(screenInstanceId, styleParams);
231
         }
232
         }
233
+
234
+        bottomTabs.setStyleFromScreen(this.getCurrentScreen().getStyleParams());
232
     }
235
     }
233
 
236
 
234
     @Override
237
     @Override
360
 
363
 
361
     private boolean hasBackgroundColor(StyleParams params) {
364
     private boolean hasBackgroundColor(StyleParams params) {
362
         return params.screenBackgroundColor != null &&
365
         return params.screenBackgroundColor != null &&
363
-            params.screenBackgroundColor.hasColor();
366
+                params.screenBackgroundColor.hasColor();
364
     }
367
     }
365
 
368
 
366
     private void setStyleFromScreen(StyleParams params) {
369
     private void setStyleFromScreen(StyleParams params) {
391
         performOnStack(params.getNavigatorId(), new Task<ScreenStack>() {
394
         performOnStack(params.getNavigatorId(), new Task<ScreenStack>() {
392
             @Override
395
             @Override
393
             public void run(ScreenStack stack) {
396
             public void run(ScreenStack stack) {
394
-            stack.pop(params.animateScreenTransitions, params.timestamp, new ScreenStack.OnScreenPop() {
397
+                stack.pop(params.animateScreenTransitions, params.timestamp, new ScreenStack.OnScreenPop() {
395
                     @Override
398
                     @Override
396
                     public void onScreenPopAnimationEnd() {
399
                     public void onScreenPopAnimationEnd() {
397
                         setBottomTabsStyleFromCurrentScreen();
400
                         setBottomTabsStyleFromCurrentScreen();
450
             task.run(screenStack);
453
             task.run(screenStack);
451
         } catch (ScreenStackNotFoundException e) {
454
         } catch (ScreenStackNotFoundException e) {
452
             Log.e("Navigation", "Could not perform action on stack [" + navigatorId + "]." +
455
             Log.e("Navigation", "Could not perform action on stack [" + navigatorId + "]." +
453
-                                      "This should not have happened, it probably means a navigator action" +
454
-                                      "was called from an unmounted tab.");
456
+                    "This should not have happened, it probably means a navigator action" +
457
+                    "was called from an unmounted tab.");
455
         }
458
         }
456
     }
459
     }
457
 
460
 

+ 8
- 0
android/app/src/main/java/com/reactnativenavigation/params/parsers/StyleParamsParser.java View File

131
         result.titleBarHeight = -1;
131
         result.titleBarHeight = -1;
132
         result.screenAnimationType = "slide-up";
132
         result.screenAnimationType = "slide-up";
133
         result.drawUnderStatusBar = false;
133
         result.drawUnderStatusBar = false;
134
+
135
+        result.bottomTabsColor = getDefaultBottomTabsColor();
136
+        result.bottomTabsButtonColor = getDefaultBottomTabsButtonColor();
137
+        result.selectedBottomTabsButtonColor = getDefaultSelectedBottomTabsButtonColor();
138
+
139
+        result.bottomTabBadgeTextColor = getBottomTabBadgeTextColor();
140
+        result.bottomTabBadgeBackgroundColor = getBottomTabBadgeBackgroundColor();
141
+
134
         return result;
142
         return result;
135
     }
143
     }
136
 
144
 

+ 1
- 1
android/app/src/main/java/com/reactnativenavigation/screens/Screen.java View File

216
     }
216
     }
217
 
217
 
218
     public void setTitleBarTitle(String title) {
218
     public void setTitleBarTitle(String title) {
219
-       topBar.setTitle(title, styleParams);
219
+        topBar.setTitle(title, styleParams);
220
     }
220
     }
221
 
221
 
222
     public void setTitleBarSubtitle(String subtitle) {
222
     public void setTitleBarSubtitle(String subtitle) {

+ 22
- 28
android/app/src/main/java/com/reactnativenavigation/views/BottomTabs.java View File

2
 
2
 
3
 import android.content.Context;
3
 import android.content.Context;
4
 import android.graphics.Color;
4
 import android.graphics.Color;
5
+import android.os.Bundle;
5
 import android.text.TextUtils;
6
 import android.text.TextUtils;
6
 
7
 
7
 import com.aurelhubert.ahbottomnavigation.AHBottomNavigation;
8
 import com.aurelhubert.ahbottomnavigation.AHBottomNavigation;
10
 import com.reactnativenavigation.params.AppStyle;
11
 import com.reactnativenavigation.params.AppStyle;
11
 import com.reactnativenavigation.params.ScreenParams;
12
 import com.reactnativenavigation.params.ScreenParams;
12
 import com.reactnativenavigation.params.StyleParams;
13
 import com.reactnativenavigation.params.StyleParams;
14
+import com.reactnativenavigation.params.parsers.StyleParamsParser;
13
 import com.reactnativenavigation.utils.ViewUtils;
15
 import com.reactnativenavigation.utils.ViewUtils;
14
 import com.reactnativenavigation.views.utils.Constants;
16
 import com.reactnativenavigation.views.utils.Constants;
15
 
17
 
21
 
23
 
22
     public BottomTabs(Context context) {
24
     public BottomTabs(Context context) {
23
         super(context);
25
         super(context);
26
+
24
         setForceTint(true);
27
         setForceTint(true);
25
         setId(ViewUtils.generateViewId());
28
         setId(ViewUtils.generateViewId());
26
         createVisibilityAnimator();
29
         createVisibilityAnimator();
27
-        setStyle();
30
+        setStyle(AppStyle.appStyle);
28
         setFontFamily();
31
         setFontFamily();
29
     }
32
     }
30
 
33
 
31
     public void addTabs(List<ScreenParams> params, OnTabSelectedListener onTabSelectedListener) {
34
     public void addTabs(List<ScreenParams> params, OnTabSelectedListener onTabSelectedListener) {
32
         for (ScreenParams screenParams : params) {
35
         for (ScreenParams screenParams : params) {
33
-            AHBottomNavigationItem item = new AHBottomNavigationItem(screenParams.tabLabel, screenParams.tabIcon,
34
-                    Color.GRAY);
36
+            AHBottomNavigationItem item = new AHBottomNavigationItem(screenParams.tabLabel, screenParams.tabIcon, Color.GRAY);
35
             addItem(item);
37
             addItem(item);
36
             setOnTabSelectedListener(onTabSelectedListener);
38
             setOnTabSelectedListener(onTabSelectedListener);
37
         }
39
         }
39
     }
41
     }
40
 
42
 
41
     public void setStyleFromScreen(StyleParams params) {
43
     public void setStyleFromScreen(StyleParams params) {
42
-        if (params.bottomTabsColor.hasColor()) {
43
-            setBackgroundColor(params.bottomTabsColor);
44
-        }
45
-        if (params.bottomTabsButtonColor.hasColor()) {
46
-            if (getInactiveColor() != params.bottomTabsButtonColor.getColor()) {
47
-                setInactiveColor(params.bottomTabsButtonColor.getColor());
48
-            }
49
-        }
50
-        if (params.selectedBottomTabsButtonColor.hasColor()) {
51
-            if (getAccentColor() != params.selectedBottomTabsButtonColor.getColor()) {
52
-                setAccentColor(params.selectedBottomTabsButtonColor.getColor());
53
-            }
54
-        }
44
+        this.setStyle(params);
55
 
45
 
56
         setVisibility(params.bottomTabsHidden, true);
46
         setVisibility(params.bottomTabsHidden, true);
57
     }
47
     }
132
                 Constants.BOTTOM_TABS_HEIGHT);
122
                 Constants.BOTTOM_TABS_HEIGHT);
133
     }
123
     }
134
 
124
 
135
-    private void setStyle() {
136
-        if (hasBadgeBackgroundColor()) {
125
+    private void setStyle(StyleParams params) {
126
+        if (params.bottomTabBadgeBackgroundColor.hasColor()) {
137
             setNotificationBackgroundColor(AppStyle.appStyle.bottomTabBadgeBackgroundColor.getColor());
127
             setNotificationBackgroundColor(AppStyle.appStyle.bottomTabBadgeBackgroundColor.getColor());
138
         }
128
         }
139
-        if (hasBadgeTextColor()) {
129
+        if (params.bottomTabBadgeTextColor.hasColor()) {
140
             setNotificationTextColor(AppStyle.appStyle.bottomTabBadgeTextColor.getColor());
130
             setNotificationTextColor(AppStyle.appStyle.bottomTabBadgeTextColor.getColor());
141
         }
131
         }
142
-    }
143
 
132
 
144
-    private boolean hasBadgeTextColor() {
145
-        return AppStyle.appStyle.bottomTabBadgeTextColor != null &&
146
-               AppStyle.appStyle.bottomTabBadgeTextColor.hasColor();
147
-    }
148
-
149
-    private boolean hasBadgeBackgroundColor() {
150
-        return AppStyle.appStyle.bottomTabBadgeBackgroundColor != null &&
151
-               AppStyle.appStyle.bottomTabBadgeBackgroundColor.hasColor();
133
+        if (params.bottomTabsColor.hasColor()) {
134
+            setBackgroundColor(params.bottomTabsColor);
135
+        }
136
+        if (params.bottomTabsButtonColor.hasColor()) {
137
+            if (getInactiveColor() != params.bottomTabsButtonColor.getColor()) {
138
+                setInactiveColor(params.bottomTabsButtonColor.getColor());
139
+            }
140
+        }
141
+        if (params.selectedBottomTabsButtonColor.hasColor()) {
142
+            if (getAccentColor() != params.selectedBottomTabsButtonColor.getColor()) {
143
+                setAccentColor(params.selectedBottomTabsButtonColor.getColor());
144
+            }
145
+        }
152
     }
146
     }
153
 
147
 
154
     private void setFontFamily() {
148
     private void setFontFamily() {

+ 17
- 17
ios/RCCNavigationController.m View File

339
   // setStyle
339
   // setStyle
340
   if ([performAction isEqualToString:@"setStyle"])
340
   if ([performAction isEqualToString:@"setStyle"])
341
   {
341
   {
342
-    
343
-    NSDictionary *navigatorStyle = actionParams;
344
-    
345
-    // merge the navigatorStyle of our parent
346
-    if ([self.topViewController isKindOfClass:[RCCViewController class]])
347
-    {
348
-      RCCViewController *parent = (RCCViewController*)self.topViewController;
349
-      NSMutableDictionary *mergedStyle = [NSMutableDictionary dictionaryWithDictionary:parent.navigatorStyle];
350
-      
351
-      // there are a few styles that we don't want to remember from our parent (they should be local)
352
-      [mergedStyle setValuesForKeysWithDictionary:navigatorStyle];
353
-      navigatorStyle = mergedStyle;
354
-      
355
-      parent.navigatorStyle = navigatorStyle;
356
-      
357
-      [parent setStyleOnInit];
358
-      [parent updateStyle];
342
+    for (UIViewController *viewController in self.viewControllers) {
343
+      if ([viewController isKindOfClass:[RCCViewController class]])
344
+      {
345
+        RCCViewController *rccViewController = (RCCViewController*)viewController;
346
+        
347
+        NSDictionary *navigatorStyle = [[NSDictionary alloc] initWithDictionary:actionParams copyItems:YES];
348
+        NSMutableDictionary *mergedStyle = [NSMutableDictionary dictionaryWithDictionary:rccViewController.navigatorStyle];
349
+        
350
+        // there are a few styles that we don't want to remember from our parent (they should be local)
351
+        [mergedStyle setValuesForKeysWithDictionary:navigatorStyle];
352
+        navigatorStyle = mergedStyle;
353
+        
354
+        rccViewController.navigatorStyle = navigatorStyle;
355
+        
356
+        [rccViewController setStyleOnInit];
357
+        [rccViewController updateStyle];
358
+      }
359
     }
359
     }
360
   }
360
   }
361
 }
361
 }

+ 1
- 0
ios/RCCTabBarController.h View File

5
 
5
 
6
 - (instancetype)initWithProps:(NSDictionary *)props children:(NSArray *)children globalProps:(NSDictionary*)globalProps bridge:(RCTBridge *)bridge;
6
 - (instancetype)initWithProps:(NSDictionary *)props children:(NSArray *)children globalProps:(NSDictionary*)globalProps bridge:(RCTBridge *)bridge;
7
 - (void)performAction:(NSString*)performAction actionParams:(NSDictionary*)actionParams bridge:(RCTBridge *)bridge completion:(void (^)(void))completion;
7
 - (void)performAction:(NSString*)performAction actionParams:(NSDictionary*)actionParams bridge:(RCTBridge *)bridge completion:(void (^)(void))completion;
8
++ (UIImage *)image:(UIImage*)image withColor:(UIColor *)color1;
8
 
9
 
9
 @property (nonatomic) BOOL tabBarHidden;
10
 @property (nonatomic) BOOL tabBarHidden;
10
 
11
 

+ 3
- 3
ios/RCCTabBarController.m View File

55
   return YES;
55
   return YES;
56
 }
56
 }
57
 
57
 
58
-- (UIImage *)image:(UIImage*)image withColor:(UIColor *)color1
58
++ (UIImage *)image:(UIImage*)image withColor:(UIColor *)color1
59
 {
59
 {
60
   UIGraphicsBeginImageContextWithOptions(image.size, NO, image.scale);
60
   UIGraphicsBeginImageContextWithOptions(image.size, NO, image.scale);
61
   CGContextRef context = UIGraphicsGetCurrentContext();
61
   CGContextRef context = UIGraphicsGetCurrentContext();
159
       iconImage = [RCTConvert UIImage:icon];
159
       iconImage = [RCTConvert UIImage:icon];
160
       if (buttonColor)
160
       if (buttonColor)
161
       {
161
       {
162
-        iconImage = [[self image:iconImage withColor:buttonColor] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
162
+        iconImage = [[RCCTabBarController image:iconImage withColor:buttonColor] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
163
       }
163
       }
164
     }
164
     }
165
     UIImage *iconImageSelected = nil;
165
     UIImage *iconImageSelected = nil;
327
       if (icon && icon != (id)[NSNull null])
327
       if (icon && icon != (id)[NSNull null])
328
       {
328
       {
329
         iconImage = [RCTConvert UIImage:icon];
329
         iconImage = [RCTConvert UIImage:icon];
330
-        iconImage = [[self image:iconImage withColor:self.tabBar.tintColor] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
330
+        iconImage = [[RCCTabBarController image:iconImage withColor:self.tabBar.tintColor] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
331
         viewController.tabBarItem.image = iconImage;
331
         viewController.tabBarItem.image = iconImage;
332
       }
332
       }
333
       
333
       

+ 88
- 4
ios/RCCViewController.m View File

494
     [viewController setNeedsStatusBarAppearanceUpdate];
494
     [viewController setNeedsStatusBarAppearanceUpdate];
495
   }
495
   }
496
   
496
   
497
-  NSNumber *tabBarHidden = self.navigatorStyle[@"tabBarHidden"];
498
-  BOOL tabBarHiddenBool = tabBarHidden ? [tabBarHidden boolValue] : NO;
499
-  if (tabBarHiddenBool) {
497
+  if (viewController.tabBarController && viewController.tabBarController.tabBar != (id)[NSNull null]) {
500
     UITabBar *tabBar = viewController.tabBarController.tabBar;
498
     UITabBar *tabBar = viewController.tabBarController.tabBar;
501
-    tabBar.transform = CGAffineTransformMakeTranslation(0, tabBar.frame.size.height);
499
+    
500
+    if (tabBar && tabBar != (id)[NSNull null]) {
501
+      UIColor *buttonColor = nil;
502
+      UIColor *selectedButtonColor = nil;
503
+      UIColor *labelColor = nil;
504
+      UIColor *selectedLabelColor = nil;
505
+      
506
+      NSNumber *tabBarHidden = self.navigatorStyle[@"tabBarHidden"];
507
+      BOOL tabBarHiddenBool = tabBarHidden ? [tabBarHidden boolValue] : NO;
508
+      if (tabBarHiddenBool) {
509
+        tabBar.transform = CGAffineTransformMakeTranslation(0, tabBar.frame.size.height);
510
+      }
511
+      
512
+      NSString *tabBarButtonColor = self.navigatorStyle[@"tabBarButtonColor"];
513
+      NSString *tabBarSelectedButtonColor = self.navigatorStyle[@"tabBarSelectedButtonColor"];
514
+      
515
+      if (tabBarButtonColor)
516
+      {
517
+        buttonColor = tabBarButtonColor != (id)[NSNull null] ? [RCTConvert UIColor:tabBarButtonColor] : nil;
518
+        
519
+        if (tabBarSelectedButtonColor) {
520
+          selectedButtonColor = tabBarSelectedButtonColor != (id)[NSNull null] ? [RCTConvert UIColor:tabBarSelectedButtonColor] : nil;
521
+          
522
+          tabBar.tintColor = selectedLabelColor = selectedButtonColor;
523
+          tabBar.unselectedItemTintColor = labelColor = buttonColor;
524
+        }
525
+        else {
526
+          tabBar.tintColor = labelColor = buttonColor;
527
+        }
528
+      }
529
+      else if (tabBarSelectedButtonColor) {
530
+        selectedButtonColor = tabBarSelectedButtonColor != (id)[NSNull null] ? [RCTConvert UIColor:tabBarSelectedButtonColor] : nil;
531
+        tabBar.tintColor = selectedLabelColor = selectedButtonColor;
532
+      }
533
+      
534
+      NSString *tabBarLabelColor = self.navigatorStyle[@"tabBarLabelColor"];
535
+      if(tabBarLabelColor) {
536
+        UIColor *color = tabBarLabelColor != (id)[NSNull null] ? [RCTConvert UIColor:tabBarLabelColor] : nil;
537
+        labelColor = color;
538
+      }
539
+      NSString *tabBarSelectedLabelColor = self.navigatorStyle[@"tabBarSelectedLabelColor"];
540
+      if(tabBarLabelColor) {
541
+        UIColor *color = tabBarSelectedLabelColor != (id)[NSNull null] ? [RCTConvert UIColor:tabBarSelectedLabelColor] : nil;
542
+        selectedLabelColor = color;
543
+      }
544
+      
545
+      NSString *tabBarBackgroundColor = self.navigatorStyle[@"tabBarBackgroundColor"];
546
+      if (tabBarBackgroundColor)
547
+      {
548
+        UIColor *color = tabBarBackgroundColor != (id)[NSNull null] ? [RCTConvert UIColor:tabBarBackgroundColor] : nil;
549
+        tabBar.barTintColor = color;
550
+      }
551
+      
552
+      NSNumber *tabBarTranslucent = self.navigatorStyle[@"tabBarTranslucent"];
553
+      if (tabBarTranslucent)
554
+      {
555
+        BOOL tabBarTranslucentBool = tabBarTranslucent ? [tabBarTranslucent boolValue] : NO;
556
+        tabBar.translucent = tabBarTranslucentBool;
557
+      }
558
+      
559
+      NSNumber *tabBarHideShadow = self.navigatorStyle[@"tabBarHideShadow"];
560
+      if (tabBarHideShadow)
561
+      {
562
+        BOOL tabBarHideShadowBool = tabBarHideShadow ? [tabBarHideShadow boolValue] : NO;
563
+        tabBar.clipsToBounds = tabBarHideShadowBool ? YES : NO;
564
+      }
565
+      
566
+      for (UIViewController *tabViewController in [viewController.tabBarController viewControllers]) {
567
+        NSMutableDictionary *unselectedAttributes = [RCTHelpers textAttributesFromDictionary:self.navigatorStyle withPrefix:@"tabBarText" baseFont:[UIFont systemFontOfSize:10]];
568
+        if (!unselectedAttributes[NSForegroundColorAttributeName] && labelColor) {
569
+          unselectedAttributes[NSForegroundColorAttributeName] = labelColor;
570
+        }
571
+        [tabViewController.tabBarItem setTitleTextAttributes:unselectedAttributes forState:UIControlStateNormal];
572
+        
573
+        
574
+        NSMutableDictionary *selectedAttributes = [RCTHelpers textAttributesFromDictionary:self.navigatorStyle withPrefix:@"tabBarSelectedText" baseFont:[UIFont systemFontOfSize:10]];
575
+        if (!selectedAttributes[NSForegroundColorAttributeName] && selectedLabelColor) {
576
+          selectedAttributes[NSForegroundColorAttributeName] = selectedLabelColor;
577
+        }
578
+        [tabViewController.tabBarItem setTitleTextAttributes:selectedAttributes forState:UIControlStateSelected];
579
+        
580
+        if (buttonColor)
581
+        {
582
+          tabViewController.tabBarItem.image = [[RCCTabBarController image:tabViewController.tabBarItem.image withColor:buttonColor] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
583
+        }
584
+      }
585
+    }
502
   }
586
   }
503
 
587
 
504
   NSNumber *navBarHidden = self.navigatorStyle[@"navBarHidden"];
588
   NSNumber *navBarHidden = self.navigatorStyle[@"navBarHidden"];