React-native-navigation: Question, Customizing Tab Bar

[fuatsengul]

Question about Customization of TabBar

Hello @wixadmin thank you for this great package, I have to make an unusual TabBar styling(especially the big button in center) but I don't know even if I can with this environment. Can you guide me through please?

[akjesto]

you got the solution?

[jp928]

you may need implement react native lottie with navigator, it might be only supported by airbnb react navigation.

[akjesto]

I dont need animation effect and i only want selected specific icon image.I tried like

{
label: 'HOME',
screen: 'Home',
icon: require('../img/ic_tabbar.png'),
selectedIcon: require('../img/ic_tabbar_on.png'),
title: 'HOME',
},

But it always take selected icon color is default tint.I did not get exact color.

[jp928]

@akjesto
on IOS, you need

tabsStyle: {
        tabBarTextFontFamily: 'Avenir-Medium',
        tabBarSelectedButtonColor: THEME_COLOR.color,
        tabBarBackgroundColor: '#ffffff'
      },

[jp928]

android syntax is slightly different:

appStyle: {
        tabBarBackgroundColor: '#fff',
        tabBarButtonColor: '#000',
        navBarTextFontSize: 34,
        forceTitlesDisplay: true,
        tabFontFamily: 'Avenir-Medium',
        tabBarSelectedButtonColor: THEME_COLOR.color,
      }

[jp928]

The whole thing is something like:

Navigation.startTabBasedApp({
      ...tabs,
     tabStyle: {
        ...
    },
    appStyle: {
      ...
   }
});

[jp928]

Please reference the document for more details:
https://wix.github.io/react-native-navigation/#/

[akjesto]

@jp928 Please go through the following code

const createTabs = () => {

let tabs = [
{
label: 'HOME',
screen: 'Home',
icon: require('../img/ic_tabbar_inici.png'),
selectedIcon: require('../img/ic_tabbar_inici_on.png'),
title: 'HOME',
},
{
label: 'LIST',
screen: 'List',
icon: require('../img/ic_tabbar_inici.png'),
selectedIcon: require('../img/ic_tabbar_inici_on.png'),
title: 'LIST',
}
]
return tabs;
}

Navigation.startTabBasedApp({
tabs: createTabs(),
tabsStyle: {
// tabBarButtonColor: '#ffffff',
tabBarTextFontFamily: 'Avenir-Medium',
tabBarSelectedButtonColor: '#ff00ff',
tabBarBackgroundColor: '#ffffff'
}
});

But output is like

But my ic_tabbar_inici_on.png is like the following and i want this image when i selected the tab.

I did not get exact tab icon when i loaded. I always get blue different colors on my tab icon selected.

[jp928]

The snippit u just attached would not return a tab object contains tabsStyle property. please double check.

[jp928]

'''javascript
const createTabs = () => {

const tabs ={ [
{
label: 'HOME',
screen: 'Home',
icon: require('../img/ic_tabbar_inici.png'),
selectedIcon: require('../img/ic_tabbar_inici_on.png'),
title: 'HOME',
},
{
label: 'LIST',
screen: 'List',
icon: require('../img/ic_tabbar_inici.png'),
selectedIcon: require('../img/ic_tabbar_inici_on.png'),
title: 'LIST',
}
],
tabsStyle: {
tabBarTextFontFamily: 'Avenir-Medium',
tabBarSelectedButtonColor: '#ffffff',
tabBarBackgroundColor: '#ffffff'
}};
return tabs;
}
'mm

[akjesto]

@jp928 Please check my above comment.I updated it.

[jp928]

your code looks alright. but this library cannot change selectedIcon on Android. u can test it on IOS

[akjesto]

@jp928 , Now i checked with it in iOS only

[jp928]

@akjesto Since your selecedIcon is very similar to the origin icon. plz advise the difference. your code should work as expected, maybe u could swipe your selectedIcon with an obvious change.

[fuatsengul]

Sorry guys I've lost context. My original question is about the big button in the middle, is it possible to create by using this package?

[Ehesp]

I don't believe it currently is. @guyca any ideas regarding this?

The Android tabs are currently based on https://github.com/aurelhubert/ahbottomnavigation

[Ehesp]

I mean, you could create a single screen app and have your own implementation of this, however you're not going to have the bar persisted across screens or the "active" state tracked etc.

[PARAGJYOTI]

There's some thing you can change but its not what you are looking for . As @Ehesp says , it uses a third party library https://github.com/aurelhubert/ahbottomnavigation , but you cann't make change as it its compiled version that have .class extension instead of java .
But one thing you can do is clone the package from github and place in the main/src/com directory of react-native navigation and add your custom styles on it .

[heron2014]

Hi guys and @wixadmin,
Is there a way to have an option to customise active background color on selected tab (not only selected icon) ?

To achieve following effect (yellow active background color):

Thanks.

[PARAGJYOTI]

No , its not implemented yet as the navigation follows android Ui guidelines . Only underline color can be customized. However , of you have knowledge on java , you can tweak in in the native code.

[heron2014]

Thanks @PARAGJYOTI

[JPStrydom]

@jp928 Why is changing the selected tab icon not supported on Android when Facebook themselves do it?

[HarveyRoberts]

Any news on this ? I tried react-navigation and react-native-navigation and I think I might choose react-navigation if I can't have a custom component as a tab bar or header bar.

[amirmatin]

Has anyone got the larger middle button to work ? a solution would be much appreciated ...
@fuatsengul do you have any solution for larger middle button ?

[vigneshprabhu20]

@fuatsengul Have you got the solution for this?

[luxferoo]

I removed react-native-navigation and created a custom component who's absolute in the bottom.

[vigneshprabhu20]

@luxferoo Problem with this approach is when you push any component bottom bar is gone, you need to integrate this inside each component registered as screen!

[luxferoo]

@vigneshprabhu20 you can perform that creating a HOC and put the bar in one place

[Albert-Gao]

The upcoming Android design support lib v28 will have an interesting approach to the Bottom app bar where you can attach the FAB to the action bar which is kind of what you want:

But now I know the underneath android support using a 3rd party lib, so it's very hard to change... Still wanna mention it just in case.

[danialdezfouli]

The same issue , i dont need animation effect now
only different style for center icon.

[cshen4]

I just want to use different icons based on whether a tab is selected or not. is that possible right now? (i'm using v2)

[luxferoo]

@cshen4 yes you can with 'selectedIcon' attribute

[cshen4]

Navigation.setRoot({ root: { bottomTabs: { children: [ { stack: { children: [ { component: { name: 'ServiceInstance', options: { bottomTab: { title: 'Service', icon: require('../images/app_icon/Service_outline.png'), selectedIcon: require('../images/app_icon/Service_full.png') } } } } ] } }, { stack: { children: [ { component: { name: 'Contacts', options: { bottomTab: { title: 'Contacts', icon: require('../images/app_icon/Contacts_outline.png'), selectedIcon: require('../images/app_icon/Contacts_full.png') } } } } ] } }, { stack: { children: [ { component: { name: 'Me', options: { bottomTab: { title: 'Me', icon: require('../images/app_icon/Me_outline.png'), selectedIcon: require('../images/app_icon/Me_full.png') } } } } ] } } ], options: { backgroundColor: 'white' // tabColor: '#777777', // selectedTabColor: '#2979FF' // tabBarDisableSelectedIconTint: true } } } });
@luxferoo this is my code right now, the selectedIcon doesn't seem to work... Am I putting it in the wrong place?

[luxferoo]

@cshen4 I don't think it's a wix/react-native-navigation configuration , look at mine :

 Navigation.startTabBasedApp({
                tabs: [
                    {
                        screen: 'pipo.UserInfo',
                        label: 'Account',
                        title: 'Account',
                        icon: sources[0], 
                        selectedIcon: sources[3],
                        navigatorStyle: {
                            navBarButtonColor: 'black',
                            //navBarTextColor: mainBlue
                        }
                    }
               ]
        })

[zedtux]

I am also looking to have a bigger central button in the navigation bar. This issue seem to be related/duplicated by wix/react-native-navigation#2126.

[zedtux]

Best looking option so far : https://itnext.io/react-native-tab-bar-is-customizable-c3c37dcf711f.

I'm still looking for other options and will try the best one.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest version and report back. Thank you for your contributions.

[stale[bot]]

The issue has been closed for inactivity.

[zedtux]

Yeah sure ... nice job to close the issue because of "inactivity" ... not from us ... from the devs ! 🤦‍♂️

[chrise86]

@luxferoo the configuration posted by @cshen4 is for v2 of this package which is far more flexible.