Browse Source

Add tabBarTranslucent style option in tabsStyle (#999)

Add tabBarTranslucent style option in tabsStyle
Suwandi Halim 7 years ago
parent
commit
c13b829b97
2 changed files with 10 additions and 2 deletions
  1. 4
    2
      docs/styling-the-tab-bar.md
  2. 6
    0
      ios/RCCTabBarController.m

+ 4
- 2
docs/styling-the-tab-bar.md View File

18
   tabBarButtonColor: '#ffff00', // change the color of the tab icons and text (also unselected)
18
   tabBarButtonColor: '#ffff00', // change the color of the tab icons and text (also unselected)
19
   tabBarSelectedButtonColor: '#ff9900', // change the color of the selected tab icon and text (only selected)
19
   tabBarSelectedButtonColor: '#ff9900', // change the color of the selected tab icon and text (only selected)
20
   tabBarBackgroundColor: '#551A8B' // change the background color of the tab bar
20
   tabBarBackgroundColor: '#551A8B' // change the background color of the tab bar
21
+  tabBarTranslucent: false // change the translucent of the tab bar to false
21
   tabBarTextFontFamily: 'Avenir-Medium' //change the tab font family
22
   tabBarTextFontFamily: 'Avenir-Medium' //change the tab font family
22
 }
23
 }
23
 ```
24
 ```
29
   appStyle: {
30
   appStyle: {
30
     tabBarBackgroundColor: '#0f2362',
31
     tabBarBackgroundColor: '#0f2362',
31
     tabBarButtonColor: '#ffffff',
32
     tabBarButtonColor: '#ffffff',
32
-    tabBarSelectedButtonColor: '#63d7cc'
33
+    tabBarSelectedButtonColor: '#63d7cc',
34
+    tabBarTranslucent: false,
33
     tabFontFamily: 'Avenir-Medium.ttf'  // for asset file or use existing font family name
35
     tabFontFamily: 'Avenir-Medium.ttf'  // for asset file or use existing font family name
34
   },
36
   },
35
 ...
37
 ...
36
 }
38
 }
37
 ```
39
 ```
38
 
40
 
39
-All supported styles are defined [here](https://github.com/wix/react-native-controllers#styling-tab-bar). There's also an example project there showcasing all the different styles.
41
+All supported styles are defined [here](https://github.com/wix/react-native-controllers#styling-tab-bar). There's also an example project there showcasing all the different styles.

+ 6
- 0
ios/RCCTabBarController.m View File

97
       UIColor *color = tabBarBackgroundColor != (id)[NSNull null] ? [RCTConvert UIColor:tabBarBackgroundColor] : nil;
97
       UIColor *color = tabBarBackgroundColor != (id)[NSNull null] ? [RCTConvert UIColor:tabBarBackgroundColor] : nil;
98
       self.tabBar.barTintColor = color;
98
       self.tabBar.barTintColor = color;
99
     }
99
     }
100
+
101
+    NSString *tabBarTranslucent = tabsStyle[@"tabBarTranslucent"];
102
+    if (tabBarTranslucent)
103
+    {
104
+      self.tabBar.translucent = [tabBarTranslucent boolValue] ? YES : NO;
105
+    }
100
   }
106
   }
101
   
107
   
102
   NSMutableArray *viewControllers = [NSMutableArray array];
108
   NSMutableArray *viewControllers = [NSMutableArray array];