createMaterialTopTabNavigator accepts active background colorColors in JavaScript console“Thinking in AngularJS” if I have a jQuery background?React native listview add item not workingHow to push a new scene using react-navigation?React Native TabNavigator change TabStyle to follow according to the textShadow in react native is not workingHide parent's navigation header from the nested navigatorNot able to navigate to other page in react nativeUsing tabBarOptions and tabBarComponent on react navigation but the background image is under and tab of bottom went about itIcons not displaying for React Navigation Bottom Tab Bar in v3
Can Adventure creatures always be cast from exile?
1kV DC Circuit - Insulation on ground wire?
What makes an ending "happy"?
Could this estimate of the size and mass of the Chicxulub Impactor be accurate?
If every star in the universe except the Sun were destroyed, would we die?
Who's this voice acting performer?
How to measure the statistical "distance" between two frequency distributions?
If I sell my PS4 game disc and buy a digital version, can I still access my saved game?
My Friend James
Infinitely many primes
Should I tip on the Amtrak train?
"syntax error near unexpected token" after editing .bashrc
Why did Tony's Arc Reactor do this?
extract specific cheracters from each line
What quests do you need to stop at before you make an enemy of a faction for each faction?
Why did Boris Johnson call for new elections?
Why does the seven segment display have decimal point at the right?
How do I delete cookies from a specific site?
How does the UK House of Commons think they can prolong the deadline of Brexit?
Phrase request for "work in" in the context of gyms
Dissuading my girlfriend from a scam
Fantasy Military Arms and Armor: the Dwarven Grand Armory
Examples where "thin + thin = nice and thick"
Looking for the comic book where Spider-Man was [mistakenly] addressed as Super-Man
createMaterialTopTabNavigator accepts active background color
Colors in JavaScript console“Thinking in AngularJS” if I have a jQuery background?React native listview add item not workingHow to push a new scene using react-navigation?React Native TabNavigator change TabStyle to follow according to the textShadow in react native is not workingHide parent's navigation header from the nested navigatorNot able to navigate to other page in react nativeUsing tabBarOptions and tabBarComponent on react navigation but the background image is under and tab of bottom went about itIcons not displaying for React Navigation Bottom Tab Bar in v3
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
This may not be the best place to ask this question, but I can't find a true answer anywhere else and it would surprise me if it wasn't a possibility.
I have a bottom tab navigator with four tabs across the bottom. Originally I was using createBottomTabNavigator for the bottom tab navigation. It was styled perfectly how I wanted. Like the picture below:
The problem is (as referenced in this GitHub issue: https://github.com/react-navigation/react-navigation/issues/4146 and this GitHub issue: https://github.com/react-navigation/react-navigation/issues/4236) createBottomTabNavigator no longer supports screen animations. So I did as the first issue suggested and implemented createMaterialTopTabNavigator. It styled almost perfectly. Here is what the style created:
As you can kind of see, my other styles which made the active text and active white worked, but for the active tab background color, nothing is taking effect.
Here is my relevant code:
const tabConfigs =
tabBarPosition: 'bottom',
tabBarOptions:
inactiveTintColor: '#425563',
activeTintColor: '#fff',
activeBackgroundColor: '#ff6900',
indicatorStyle:
display: 'none',
,
showIcon: true,
tabStyle:
width: '100%',
,
labelStyle:
fontSize: 11,
fontWeight: 'bold',
marginBottom: 5,
,
style:
backgroundColor: 'rgba(255, 255, 255, 0.95)',
height: 55,
width: '100%',
borderTopWidth: 0,
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
shadowColor: "#000",
shadowOffset:
width: 0,
height: 1,
,
shadowOpacity: 0.22,
shadowRadius: 2.22,
,
;
export default createMaterialTopTabNavigator(
DashboardStack,
StatusStack,
ReferralStack,
MoreStack,
,
tabConfigs
);
How can I make the background of an active tab in createMaterialTopTabNavigator orange, just like in createBottomTabNavigator?
javascript react-native react-navigation
asked Mar 28 at 5:11
Adam McGurkAdam McGurk
1486 silver badges23 bronze badges
add a comment |
This may not be the best place to ask this question, but I can't find a true answer anywhere else and it would surprise me if it wasn't a possibility.
I have a bottom tab navigator with four tabs across the bottom. Originally I was using createBottomTabNavigator for the bottom tab navigation. It was styled perfectly how I wanted. Like the picture below:
The problem is (as referenced in this GitHub issue: https://github.com/react-navigation/react-navigation/issues/4146 and this GitHub issue: https://github.com/react-navigation/react-navigation/issues/4236) createBottomTabNavigator no longer supports screen animations. So I did as the first issue suggested and implemented createMaterialTopTabNavigator. It styled almost perfectly. Here is what the style created:
As you can kind of see, my other styles which made the active text and active white worked, but for the active tab background color, nothing is taking effect.
Here is my relevant code:
const tabConfigs =
tabBarPosition: 'bottom',
tabBarOptions:
inactiveTintColor: '#425563',
activeTintColor: '#fff',
activeBackgroundColor: '#ff6900',
indicatorStyle:
display: 'none',
,
showIcon: true,
tabStyle:
width: '100%',
,
labelStyle:
fontSize: 11,
fontWeight: 'bold',
marginBottom: 5,
,
style:
backgroundColor: 'rgba(255, 255, 255, 0.95)',
height: 55,
width: '100%',
borderTopWidth: 0,
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
shadowColor: "#000",
shadowOffset:
width: 0,
height: 1,
,
shadowOpacity: 0.22,
shadowRadius: 2.22,
,
;
export default createMaterialTopTabNavigator(
DashboardStack,
StatusStack,
ReferralStack,
MoreStack,
,
tabConfigs
);
How can I make the background of an active tab in createMaterialTopTabNavigator orange, just like in createBottomTabNavigator?
javascript react-native react-navigation
asked Mar 28 at 5:11
Adam McGurkAdam McGurk
1486 silver badges23 bronze badges
why are you using top navigator now. if you were using bottom tab already you can use it as this one: reactnavigation.org/docs/en/material-bottom-tab-navigator.html according to the latest docs
– Ankush Rishi
Mar 28 at 5:20
@AnkushRishi honestly because it is what was suggested to use in that first Github issue I linked to. But looking at the docs for that, it doesnt look like I'll have the styling control I'll need anyways.
– Adam McGurk
Mar 28 at 5:23
I got you and found your error as well! changeactiveTintColorto the color you want to add. currently its white, that's why it is disappearing
– Ankush Rishi
Mar 28 at 5:25
@AnkushRishi that only changes the label color, not the background color
– Adam McGurk
Mar 28 at 5:36
add a comment |
This may not be the best place to ask this question, but I can't find a true answer anywhere else and it would surprise me if it wasn't a possibility.
I have a bottom tab navigator with four tabs across the bottom. Originally I was using createBottomTabNavigator for the bottom tab navigation. It was styled perfectly how I wanted. Like the picture below:
The problem is (as referenced in this GitHub issue: https://github.com/react-navigation/react-navigation/issues/4146 and this GitHub issue: https://github.com/react-navigation/react-navigation/issues/4236) createBottomTabNavigator no longer supports screen animations. So I did as the first issue suggested and implemented createMaterialTopTabNavigator. It styled almost perfectly. Here is what the style created:
As you can kind of see, my other styles which made the active text and active white worked, but for the active tab background color, nothing is taking effect.
Here is my relevant code:
const tabConfigs =
tabBarPosition: 'bottom',
tabBarOptions:
inactiveTintColor: '#425563',
activeTintColor: '#fff',
activeBackgroundColor: '#ff6900',
indicatorStyle:
display: 'none',
,
showIcon: true,
tabStyle:
width: '100%',
,
labelStyle:
fontSize: 11,
fontWeight: 'bold',
marginBottom: 5,
,
style:
backgroundColor: 'rgba(255, 255, 255, 0.95)',
height: 55,
width: '100%',
borderTopWidth: 0,
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
shadowColor: "#000",
shadowOffset:
width: 0,
height: 1,
,
shadowOpacity: 0.22,
shadowRadius: 2.22,
,
;
export default createMaterialTopTabNavigator(
DashboardStack,
StatusStack,
ReferralStack,
MoreStack,
,
tabConfigs
);
How can I make the background of an active tab in createMaterialTopTabNavigator orange, just like in createBottomTabNavigator?
javascript react-native react-navigation
asked Mar 28 at 5:11
Adam McGurkAdam McGurk
1486 silver badges23 bronze badges
This may not be the best place to ask this question, but I can't find a true answer anywhere else and it would surprise me if it wasn't a possibility.
I have a bottom tab navigator with four tabs across the bottom. Originally I was using createBottomTabNavigator for the bottom tab navigation. It was styled perfectly how I wanted. Like the picture below:
The problem is (as referenced in this GitHub issue: https://github.com/react-navigation/react-navigation/issues/4146 and this GitHub issue: https://github.com/react-navigation/react-navigation/issues/4236) createBottomTabNavigator no longer supports screen animations. So I did as the first issue suggested and implemented createMaterialTopTabNavigator. It styled almost perfectly. Here is what the style created:
As you can kind of see, my other styles which made the active text and active white worked, but for the active tab background color, nothing is taking effect.
Here is my relevant code:
const tabConfigs =
tabBarPosition: 'bottom',
tabBarOptions:
inactiveTintColor: '#425563',
activeTintColor: '#fff',
activeBackgroundColor: '#ff6900',
indicatorStyle:
display: 'none',
,
showIcon: true,
tabStyle:
width: '100%',
,
labelStyle:
fontSize: 11,
fontWeight: 'bold',
marginBottom: 5,
,
style:
backgroundColor: 'rgba(255, 255, 255, 0.95)',
height: 55,
width: '100%',
borderTopWidth: 0,
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
shadowColor: "#000",
shadowOffset:
width: 0,
height: 1,
,
shadowOpacity: 0.22,
shadowRadius: 2.22,
,
;
export default createMaterialTopTabNavigator(
DashboardStack,
StatusStack,
ReferralStack,
MoreStack,
,
tabConfigs
);
How can I make the background of an active tab in createMaterialTopTabNavigator orange, just like in createBottomTabNavigator?
javascript react-native react-navigation
javascript react-native react-navigation
asked Mar 28 at 5:11
Adam McGurkAdam McGurk
1486 silver badges23 bronze badges
asked Mar 28 at 5:11
Adam McGurkAdam McGurk
1486 silver badges23 bronze badges
asked Mar 28 at 5:11
Adam McGurkAdam McGurk
1486 silver badges23 bronze badges
asked Mar 28 at 5:11
Adam McGurkAdam McGurk
1486 silver badges23 bronze badges
asked Mar 28 at 5:11
Adam McGurkAdam McGurk
1486 silver badges23 bronze badges
1486 silver badges23 bronze badges
why are you using top navigator now. if you were using bottom tab already you can use it as this one: reactnavigation.org/docs/en/material-bottom-tab-navigator.html according to the latest docs
– Ankush Rishi
Mar 28 at 5:20
@AnkushRishi honestly because it is what was suggested to use in that first Github issue I linked to. But looking at the docs for that, it doesnt look like I'll have the styling control I'll need anyways.
– Adam McGurk
Mar 28 at 5:23
I got you and found your error as well! changeactiveTintColorto the color you want to add. currently its white, that's why it is disappearing
– Ankush Rishi
Mar 28 at 5:25
@AnkushRishi that only changes the label color, not the background color
– Adam McGurk
Mar 28 at 5:36
add a comment |
why are you using top navigator now. if you were using bottom tab already you can use it as this one: reactnavigation.org/docs/en/material-bottom-tab-navigator.html according to the latest docs
– Ankush Rishi
Mar 28 at 5:20
@AnkushRishi honestly because it is what was suggested to use in that first Github issue I linked to. But looking at the docs for that, it doesnt look like I'll have the styling control I'll need anyways.
– Adam McGurk
Mar 28 at 5:23
I got you and found your error as well! changeactiveTintColorto the color you want to add. currently its white, that's why it is disappearing
– Ankush Rishi
Mar 28 at 5:25
@AnkushRishi that only changes the label color, not the background color
– Adam McGurk
Mar 28 at 5:36
why are you using top navigator now. if you were using bottom tab already you can use it as this one: reactnavigation.org/docs/en/material-bottom-tab-navigator.html according to the latest docs
– Ankush Rishi
Mar 28 at 5:20
why are you using top navigator now. if you were using bottom tab already you can use it as this one: reactnavigation.org/docs/en/material-bottom-tab-navigator.html according to the latest docs
– Ankush Rishi
Mar 28 at 5:20
@AnkushRishi honestly because it is what was suggested to use in that first Github issue I linked to. But looking at the docs for that, it doesnt look like I'll have the styling control I'll need anyways.
– Adam McGurk
Mar 28 at 5:23
@AnkushRishi honestly because it is what was suggested to use in that first Github issue I linked to. But looking at the docs for that, it doesnt look like I'll have the styling control I'll need anyways.
– Adam McGurk
Mar 28 at 5:23
I got you and found your error as well! change
activeTintColor to the color you want to add. currently its white, that's why it is disappearing– Ankush Rishi
Mar 28 at 5:25
I got you and found your error as well! change
activeTintColor to the color you want to add. currently its white, that's why it is disappearing– Ankush Rishi
Mar 28 at 5:25
@AnkushRishi that only changes the label color, not the background color
– Adam McGurk
Mar 28 at 5:36
@AnkushRishi that only changes the label color, not the background color
– Adam McGurk
Mar 28 at 5:36
add a comment |
1 Answer
1
active
oldest
votes
createMaterialTopTabNavigator does not directly have a way to change the active background color, however you could use the indicator.
indicatorStyle:
height: '100%',
backgroundColor: '#ff6900'
With this method you could even add a borderRadius to it to have a circular selection!
answered Mar 28 at 19:05
zaytrixzaytrix
1,0442 silver badges10 bronze badges
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/4.0/"u003ecc by-sa 4.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55390575%2fcreatematerialtoptabnavigator-accepts-active-background-color%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
createMaterialTopTabNavigator does not directly have a way to change the active background color, however you could use the indicator.
indicatorStyle:
height: '100%',
backgroundColor: '#ff6900'
With this method you could even add a borderRadius to it to have a circular selection!
answered Mar 28 at 19:05
zaytrixzaytrix
1,0442 silver badges10 bronze badges
add a comment |
createMaterialTopTabNavigator does not directly have a way to change the active background color, however you could use the indicator.
indicatorStyle:
height: '100%',
backgroundColor: '#ff6900'
With this method you could even add a borderRadius to it to have a circular selection!
answered Mar 28 at 19:05
zaytrixzaytrix
1,0442 silver badges10 bronze badges
add a comment |
createMaterialTopTabNavigator does not directly have a way to change the active background color, however you could use the indicator.
indicatorStyle:
height: '100%',
backgroundColor: '#ff6900'
With this method you could even add a borderRadius to it to have a circular selection!
answered Mar 28 at 19:05
zaytrixzaytrix
1,0442 silver badges10 bronze badges
createMaterialTopTabNavigator does not directly have a way to change the active background color, however you could use the indicator.
indicatorStyle:
height: '100%',
backgroundColor: '#ff6900'
With this method you could even add a borderRadius to it to have a circular selection!
answered Mar 28 at 19:05
zaytrixzaytrix
1,0442 silver badges10 bronze badges
answered Mar 28 at 19:05
zaytrixzaytrix
1,0442 silver badges10 bronze badges
answered Mar 28 at 19:05
zaytrixzaytrix
1,0442 silver badges10 bronze badges
answered Mar 28 at 19:05
zaytrixzaytrix
1,0442 silver badges10 bronze badges
1,0442 silver badges10 bronze badges
add a comment |
add a comment |
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55390575%2fcreatematerialtoptabnavigator-accepts-active-background-color%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
why are you using top navigator now. if you were using bottom tab already you can use it as this one: reactnavigation.org/docs/en/material-bottom-tab-navigator.html according to the latest docs
– Ankush Rishi
Mar 28 at 5:20
@AnkushRishi honestly because it is what was suggested to use in that first Github issue I linked to. But looking at the docs for that, it doesnt look like I'll have the styling control I'll need anyways.
– Adam McGurk
Mar 28 at 5:23
I got you and found your error as well! change
activeTintColorto the color you want to add. currently its white, that's why it is disappearing– Ankush Rishi
Mar 28 at 5:25
@AnkushRishi that only changes the label color, not the background color
– Adam McGurk
Mar 28 at 5:36