React-native-navigation: [V2][iOS] BottomTabs Navigator with Stacks - mergeOptions BottomTab style changes do not apply
Issue Description
Had a check to see if this issue had already been reported (one seems similar: #4413 ) Apologies if it is a duplicate.
My root navigator is tab-based using BottomTabs, where each tab each has a stack of screens (as I need to push to them).
The problem I am having is that I wish to adjust the styling of the tabs based on app events (i.e. night mode colour scheme changing) and even something like adjusting the tab text or icon.
However, none of these changes seem to apply when I use mergeOptions() for the relevant tab IDs. Only the badge and badgeColour properties actually apply. Below is the code I am using to try override a BottomTab style:
Navigation.mergeOptions('ST.DashboardScreen', {
bottomTab: {
text: "Override Text",
badge: '123',
badgeColor: 'blue',
textColor: 'green',
selectedTextColor: 'yellow',
}
});
Here is my navigator:
// // Logged In Flow
Navigation.setRoot({
root: {
bottomTabs: {
id: 'ST.LoggedInTabBarID',
children: [
{
stack: {
children: [
{
component: {
name: "ST.DashboardScreen",
id: "ST.DashboardScreen",
passProps: {},
options: {
layout: {
orientation: ['landscape']
},
topBar: {
visible: true,
animate: true,
hideOnScroll: true,
drawBehind: false,
title: {
text: 'Dashboard'
},
backButton: {
visible: true
},
largeTitle: {
visible: true
}
},
}
}
}
],
options: {
bottomTab: {
text: "Dashboard",
testID: "DASHBOARD_TAB_BAR_BUTTON",
textColor: 'black',
selectedTextColor: 'orange'
}
}
}
},
{
stack: {
children: [
{
component: {
name: "ST.SitesScreen",
passProps: {},
children: [
{
component: {
name: "ST.SelectedSiteScreen",
passProps: {}
}
},
{
component: {
name: "ST.ServiceSetupScreen",
passProps: {}
}
},
{
component: {
name: "ST.ServiceManagerScreen",
passProps: {}
}
}
],
options: {
layout: {
orientation: ['landscape']
},
topBar: {
visible: true,
animate: true,
hideOnScroll: true,
drawBehind: false,
title: {
text: 'Sites'
},
backButton: {
visible: true
},
largeTitle: {
visible: true
}
},
}
}
}
],
options: {
bottomTab: {
text: "Sites",
testID: "SITES_TAB_BAR_BUTTON",
textColor: 'black',
selectedTextColor: 'orange'
}
}
}
},
{
stack: {
children: [
{
component: {
name: "ST.MyCommunicatorsScreen",
passProps: {},
options: {
layout: {
orientation: ['landscape']
},
topBar: {
visible: true,
animate: true,
hideOnScroll: true,
drawBehind: false,
title: {
text: 'My Communicators'
},
backButton: {
visible: true
},
largeTitle: {
visible: true
}
},
}
}
}
],
options: {
bottomTab: {
text: "My Communicators",
testID: "MY_COMMUNICATORS_TAB_BAR_BUTTON",
textColor: 'black',
selectedTextColor: 'orange'
}
}
}
}
]
}
}
});
Is this down to user error (apologies if so), or a possible bug?
Steps to Reproduce / Code Snippets / Screenshots
- Set the Navigation root to use BottomTabs, where each tab component is a stack of nested screens
- Try use mergeOptions on the specific screen ID to adjust the BottomTab styles (i.e text, textColor, selectedTextColor, iconColor, selectedIconColor).
- Notice how only badge and badgeColor apply
Environment
- React Native Navigation version:
2.2.0 - React Native version:
0.57.7 - Platform(s) (iOS, Android, or both?):
iOS - Device info (Simulator/Device? OS version? Debug/Release?): Debug and Release on iOS 12.0 and 12.1 iPad Pro simulators (10.5, 11, 12.9 Gen 1 and 12.9 Gen 2)
rsispal
All 17 comments
+1 reproducible
stokesbga
on 10 Dec 2018
@stokesbga glad it's not just me. Hoping someone can take a look at this soon.
rsispal
on 13 Dec 2018
So my issue was having bottomtabs (with stacks as each tab) inside of a stack navigator.
Every time you push a stack, there will always be a top bar with a back button. If you push another stack navigator, there will be two headers, and both will be affected by mergeOptions. The way around this is to really watch how often you call mergeoptions and which components you use static options() with. Dont push a bunch of stacks inside of eachother without first marking everything you WONT use in all stacks as visible: false. So in your case, make sure bottomTabs is false in every options object besides the single sibling to bottomTabs -> children
You can also set Id's for the stacks you wish to change, while (theoretically) not effecting any other stacks.
stokesbga
on 17 Dec 2018
Im not pushing a new stack when I am requesting to make the UI changes via mergeOptions() though, they are still on the root, as I switch to one of three different navigators based on app state (logged in, logged out, mode-xyz)
Even when the stacks have no children the changes still do not apply. In contrast to your instance the bottomTabs is the root, with the stack inside - not the stacks containing bottomTabs.
rsispal
on 28 Dec 2018
I am facing the same issue.
Updating bottomTabs style for an older version (2.0.2580) was working for me.
Currently, I am testing version 2.5.2.
lchapoy
on 15 Jan 2019
same issue, any workround on this ?
hehex9
on 22 Jan 2019
Unfortunately not @hehex9. I am still encountering this issue on the latest version (2.7.1). Not even sure if many people will look at this given how far down the list of issues this has become!
rsispal
on 22 Jan 2019
Seems to have not been implemented on iOS after roughly reading the code.
It should be stated on the document then 馃 (btw mergeOptions is hard, already found some inconsistencies about mergeOptions in iOS and Android).
hehex9
on 29 Jan 2019
@rsispal Here is my workaround.
It works for me, but I'm not sure if this solves all the problems of mergeOptions with bottomTab.
(due to my lack of knowledge of objc and rnn, I may not be able to submit a pr currently, sorry about that)
hehex9
on 31 Jan 2019
@hehex9 Thanks for your share, I applied your change to my code, and the problem still persist :/
magrinj
on 1 Feb 2019
Hello everyone, I made a PR to fix this issue #4683 ! :)
Hoping that's will work for everyone !
magrinj
on 4 Feb 2019
Hey @magrinj, I can confirm your fixes work for text, icon and selectedIcon! In parallel I have been trying to get textColor, selectedTextColor, iconColor and selectedIconColor working.
I've also tried applying my changes to lib/ios/RNNBasePresenter.m, it works but only for the current tab. Not figured out where to target the entire tab bar as of yet. Might open another issue.
rsispal
on 7 Feb 2019
Hi all, any solutions for android?
anikh1993
on 18 Feb 2019
It's already working fine for android
manuhook
on 18 Feb 2019
I am having problem with merging a stack options (badge specifically). I use stack id. It's working on iOS but not on android.
anikh1993
on 18 Feb 2019
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 Detox and report back. Thank you for your contributions.
![stale[bot] picture](https://avatars.githubusercontent.com/in/1724?v=4&s=40)
stale[bot]
on 20 Mar 2019
The issue has been closed for inactivity.
stale[bot]
on 27 Mar 2019
Related issues
no23reason
路
3Comments
tmaly1980
路
3Comments
nbolender
路
3Comments
bjacog
路
3Comments
yayanartha
路
3Comments
Most helpful comment
I am having problem with merging a stack options (badge specifically). I use stack id. It's working on iOS but not on android.