Style for TabBarIOS or TabBarItemIOS

[jotshin]

I want to customize the outlook of the TabBarItems and have tried many different ways for this but just couldn't get it to work. There's also no discussion whether on Stack Overflow or here, so I'm here to request for help.

I tried adding style directly into TabBarIOS and TabBarItemIOS but both of they would change the outlook of the whole View. How can I do for reaching my purpose?

Thanks in advance for any help.

[corymsmith]

@josephtsng What styling are you trying to do? I added a custom tab bar that uses icon fonts and also uses tintColor and barTintColor to https://github.com/corymsmith/react-native-icons

[jotshin]

@corymsmith Thanks for your information. :) I want to adjust the icon size and TabBar size / color. My question was actually to see if Facebook has already made the TabBar styling ready and what the properties / attributes are.

It seems you implemented this feature by iOS native modules, right? I also saw that you used CSS absolute positioning, but could this be related? I know a little Objective-C but couldn't understand how the code flows completely. Any hint for what code or doc I should further study to gain better understanding on this would be very appreciated.

[tudorgergely]

@corymsmith You have a nice implementation there.

Does anyone know if it is possible to at least set the size for a custom icon (in case you want to use one)?

[leecade]

yes, need a way to Style for TabBarIOS / TabBarIOS.Item
I trid icon={require('image!icon')} not works

[cmcewen]

I ran into this problem (wanted custom icons and a different tint color) and just wanted to share a solution, which I think should maybe go into the core API.

Setting the tint color is pretty simple - just added this in the init method of RCTTabBar.m:
[self setTintColor:[UIColor redColor]];. I'd imagine adding that to the main TabBar should be pretty simple.

For custom icons, Apple recommends 25x25, 50x50, or 75x75 pixels depending on screen resolution

However, using anything larger than 25x25 pixel image on the TabBarItem results in a too large icon. Using 25x25 means the image is the right size, but looks bad on the higher res phones. To combat this, I used a 75x75 image file but resized it to 25x25 in the setIcon method in RCTTabBarItem.m

  UIImage *oldImage = [RCTConvert UIImage:_icon];
  CGSize size = CGSizeMake(25, 25);
  UIGraphicsBeginImageContextWithOptions(size, NO, 0.0f);

  //draw
  [oldImage drawInRect:CGRectMake(0.0f, 0.0f, size.width, size.height)];

  //capture resultant image
  UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
  UIGraphicsEndImageContext();

Not sure about performance here, but I think for convenience it would be nice if the tab bar could accept any image and make sure it's the right size.

[nicklockwood]

To solve the image quality problem, you should be able to name your image Foo@2x.png or Foo@3x.png but reference it as just Foo, then iOS should load the correct size and resolution automatically.

[elado]

👍 would love to see more customizable properties such as tintColor and labelless buttons.

[cmcewen]

@nicklockwood thanks - thought I had tried that but think I originally forgot to add the files. working for me now

@elado if you don't pass a title to the tab bar item it should be labelless. just submitted #961 for tintColor and barTintColor

[ReadingSteiner]

@nicklockwood thanks a lot!

[CreatorMetaSky]

@nicklockwood @cmcewen

I set the TabBarItem properties like:

icon={{uri: 'tab_icon_home'}}
selectedIcon={{uri: 'tab_icon_home_selected'}}

but finally the icon is bigger

so how to solve it ?

[CreatorMetaSky]

finally i resolve the custom tabbar issue 🎱

RCTTabBarItem.m

- (void)setIcon:(UIImage *)icon
{
  _icon = [icon imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
  if (_icon && _systemIcon != NSNotFound) {
    _systemIcon = NSNotFound;
    UITabBarItem *oldItem = _barItem;
    _barItem = [UITabBarItem new];
    _barItem.title = oldItem.title;
    _barItem.imageInsets = oldItem.imageInsets;
    _barItem.selectedImage = oldItem.selectedImage;
    _barItem.badgeValue = oldItem.badgeValue;
  }
  self.barItem.image = _icon;
}

- (void)setSelectedIcon:(UIImage *)selectedIcon
{
  if (_selectedIcon != selectedIcon) {
    _selectedIcon = selectedIcon;
    _selectedIcon = [selectedIcon imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    self.barItem.selectedImage = _selectedIcon;
  }
}