Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Navigator: Change transition color #563

Closed
jlevine22 opened this issue Apr 1, 2015 · 8 comments
Closed

Navigator: Change transition color #563

jlevine22 opened this issue Apr 1, 2015 · 8 comments
Labels
Resolution: Locked This issue was locked by the bot.

Comments

@jlevine22
Copy link
Contributor

Is there no way to change the background color on transitions between scenes in a Navigator component? I've dug into the code and it seems like the color value is hard coded.

I've played around with adding this feature as a property on a Navigator (transitionBackgroundColor={'#FFFFFF'}). But I want to make sure this doesn't already exist before issuing a pull request.

@evanwalsh
Copy link

This would be extremely helpful. I hope this gets added!

@ide
Copy link
Contributor

ide commented Apr 3, 2015

Something to consider - should this be a property of the navigator's style?
<Navigator style={{transitionBackgroundColor: '#000'}} />

@jlevine22
Copy link
Contributor Author

Good point @ide. On second thought it would seem to make more sense that way

@ericvicenti
Copy link
Contributor

Actually, there will be challenges if you try to put it on styles. It is kind of a special prop because we can't rely on it being an object (Stylesheet converts them into numbers for safety and optimization)

If we add transitionBackgroundColor as a special case here, then people will get confused and think it is a real style prop. Also, style validations will get confused.

This is the API we want:

<Navigator style={{backgroundColor: '#000'}} />

I haven't tried, but what if the default transitioner style is 'transparent'? Does that make this work?

@jlevine22
Copy link
Contributor Author

@ericvicenti just tried and that didn't work. The transition background always ends up white.

Edit: Ooops, on second look that does actually work. I'll update my PR

@ericvicenti
Copy link
Contributor

Hmm, I wonder what is causing it to be white..

cc @vjeux , this is one of those rare cases where we actually want the 'cascade' of CSS. What should we do in these cases?

Although it is a bit funky, this would probably be the most consistent with everything else we do:

<Navigator
  style={{flex: 1}} // style for the navigator container
  transitionerStyle={{backgroundColor: 'black'}} // style applied to the scenes container
 ...

@ericvicenti
Copy link
Contributor

Oh, @jlevine22, I didn't see your edit. Great news!

vjeux pushed a commit to vjeux/react-native that referenced this issue Apr 13, 2015
Summary:
... for setting the transition background color between scenes. For issue facebook#563
Closes facebook#654
Github Author: Josh Levine <josh.levine1@gmail.com>

Test Plan: Imported from GitHub, without a `Test Plan:` line.
vjeux pushed a commit to vjeux/react-native that referenced this issue Apr 14, 2015
Summary:
... for setting the transition background color between scenes. For issue facebook#563
Closes facebook#654
Github Author: Josh Levine <josh.levine1@gmail.com>

Test Plan: Imported from GitHub, without a `Test Plan:` line.
vjeux pushed a commit to vjeux/react-native that referenced this issue Apr 15, 2015
Summary:
... for setting the transition background color between scenes. For issue facebook#563
Closes facebook#654
Github Author: Josh Levine <josh.levine1@gmail.com>

Test Plan: Imported from GitHub, without a `Test Plan:` line.
@alvaromb
Copy link
Contributor

alvaromb commented May 2, 2016

Shouldn't this be documented?

@facebook facebook locked as resolved and limited conversation to collaborators May 29, 2018
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jul 23, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests

6 participants