Style the BottomTabs/TabBar at runtime

[brunolemos]

Is there a way to change the tabbar style after the app being initialized?

Steps to Reproduce / Code Snippets / Screenshots

• Navigation.startTabBasedApp
• Use tabsStyle to set some dark colors
• Change app theme from dark to light
• How to change the tab bar style now?

---

Environment

• React Native Navigation version: 2.0.0-experimental.141
• React Native version: 0.37.0
• Platform(s) (iOS, Android, or both?): iOS
• Device info (Simulator/Device? OS version? Debug/Release?): iPhone 6 Simulator iOS 10

[brunolemos]

Unfortunately this prevents this lib from being used on apps that support themes, for example.

[guyca]

Hey @brunolemos
Our guideline is that if something is possible and used in native - we should support it too. Dynamic styles should be supported, I hope it will make it for one of the next milestones.

Just my personal take of this:
I previously worked on an native app that supported themes and style customization. We decided to implement this feature in two phases:

1. Save the updated theme configuration in store (SharedPreferences, since it was native Android) and use some kind of StyleResolver whenever we needed to supply style params when the app was created. Each time the theme changed - we notified the user that the app needs to be restarted in order for the changed to take place.

2. Support dynamic styles. User changes theme -> see result immediately.

At the end, Phase one worked fine, no users complained and we never had any incentive to work on the dynamic themes feature. A year or so after that the company closed down and the app faded 😄

I suggest, you try out what worked for us and notify the user the app needs to be restarted. then restart it programmatically by calling your startSingleScreenApp or startTabBasedApp

[brunolemos]

@guyca Thanks for your suggestion, but I'm already on phase 2.

I care a lot about User Experience, so a smooth theme transition like twitter does is really cool. After opening this issue I started using another tab lib (the one from exponent) that I could do it.

I just wish this one also supported it, because I would prefer to use it instead.

[MrLoh]

@brunolemos I have the same problem. I'm currently using react-navigation for the stack router and a custom bottom tab implementation. But the performance is unacceptable so I was thinking of switching to this library but I need styling support. How are you solving the problem today. What stack router are you using?

[brunolemos]

react-navigation too :(
But I'll probably get back to wix on the next project

[MrLoh]

@brunolemos Are you also having problems with react-navigation performance?

[brunolemos]

I managed to fix most of the performance issues (it was caused by unnecessary rerenders, tweaks on my redux selectors made huge diff) but yes I'm not satisfied with a javascript navigator performance and ux

[MrLoh]

As a workaround you can simply hide the bottomtababr on every screen and build your own tab bar in js that is rendered on each screen. To handle the tab bar press actions use the deep link API. I just build this and it works quite fine.

[danielang]

Currently I have the same problem. I am writing a newsreader app with theme switching capabilities.
I've used react-navigation, but the performance is very poor...

I've found a solution to change the TabBar-theme at runtime for android:
BottomTabsLayout.java:223

@Override
public void updateScreenStyle(String screenInstanceId, Bundle styleParams) {
    for (int i = 0; i < bottomTabs.getItemsCount(); i++) {
        screenStacks[i].updateScreenStyle(screenInstanceId, styleParams);
    }

    // buttomtabs style update here
    StyleParams parsedStyleParams = new StyleParamsParser(styleParams).parse();
    bottomTabs.setStyleFromScreen(parsedStyleParams);
}

This code will update the bottom tabbar for each individual screen when you call:

this.props.navigator.setStyle({
    tabBarButtonColor: '#ff0000',
    tabBarBackgroundColor: '#0d0d0d'
});

I'll try to find a way for iOS... but I am very new to Objective C and I find the Syntax needs getting used to 😄

[danielang]

Ok... here is the iOS version for basic layout customization at runtime:
RCCViewController.m:471

UITabBar *tabBar = viewController.tabBarController.tabBar;
  
NSNumber *tabBarHidden = self.navigatorStyle[@"tabBarHidden"];
BOOL tabBarHiddenBool = tabBarHidden ? [tabBarHidden boolValue] : NO;
if (tabBarHiddenBool) {
  // UITabBar *tabBar = viewController.tabBarController.tabBar;
  tabBar.transform = CGAffineTransformMakeTranslation(0, tabBar.frame.size.height);
}

// Custom Implementation begins here
NSString *tabBarButtonColor = self.navigatorStyle[@"tabBarButtonColor"];
if (tabBarButtonColor)
{
  UIColor *color = tabBarButtonColor != (id)[NSNull null] ? [RCTConvert UIColor:tabBarButtonColor] : nil;
  tabBar.tintColor = color;
}
NSString *tabBarSelectedButtonColor = self.navigatorStyle[@"tabBarSelectedButtonColor"];
if (tabBarSelectedButtonColor)
{
  UIColor *color = tabBarSelectedButtonColor != (id)[NSNull null] ? [RCTConvert UIColor:tabBarSelectedButtonColor] : nil;
  tabBar.tintColor = color;
}
NSString *tabBarBackgroundColor = self.navigatorStyle[@"tabBarBackgroundColor"];
if (tabBarBackgroundColor)
{
  UIColor *color = tabBarBackgroundColor != (id)[NSNull null] ? [RCTConvert UIColor:tabBarBackgroundColor] : nil;
  tabBar.barTintColor = color;
}
// Custom Implementation ends here

@brunolemos & @guyca should I continue the development?
For better support there must be more changes of cause 😉

[brunolemos]

@danielang looks great! what more changes do you mean?

[danielang]

This is just a 'hack' that works...
Perhaps wix will do a good integration by themselves.

In version 1.1.260 the implementation has already been changed for iOS - RCCViewController.m:703

// Custom Implementation
UITabBar *tabBar = self.tabBarController.tabBar;
  
NSString *tabBarButtonColor = self.navigatorStyle[@"tabBarButtonColor"];
if (tabBarButtonColor)
{
  UIColor *color = tabBarButtonColor != (id)[NSNull null] ? [RCTConvert UIColor:tabBarButtonColor] : nil;
  tabBar.tintColor = color;
}
NSString *tabBarSelectedButtonColor = self.navigatorStyle[@"tabBarSelectedButtonColor"];
if (tabBarSelectedButtonColor)
{
  UIColor *color = tabBarSelectedButtonColor != (id)[NSNull null] ? [RCTConvert UIColor:tabBarSelectedButtonColor] : nil;
  tabBar.tintColor = color;
}
NSString *tabBarBackgroundColor = self.navigatorStyle[@"tabBarBackgroundColor"];
if (tabBarBackgroundColor)
{
  UIColor *color = tabBarBackgroundColor != (id)[NSNull null] ? [RCTConvert UIColor:tabBarBackgroundColor] : nil;
  tabBar.barTintColor = color;
}

Also it would be great if every parameter could be changed.

[danielang]

If #2224 will be accepted/merged, this issue should be solved.

[arryanggaputra]

@danielang cool