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

Not able to create fully transparent screens #3803

Closed
dahiri-farid opened this issue Mar 20, 2018 · 5 comments

Comments

@dahiri-farid
Copy link

@dahiri-farid dahiri-farid commented Mar 20, 2018

Current Behavior

I have a stack with 3 screens. With the following cardStyle configuration
cardStyle: { backgroundColor: 'transparent', }
I would like to have all my screens transparent with a blur effect. A dynamic background view (at the base level, below the screens) will be always visible.
Actually, when I set the cardStyle background to transparent, it becomes black. I have attached a screenshot of XCODE visual debugger.
screenshot 2018-03-20 11 51 55

Expected Behavior

When I set cardStyle background to transparent, the screen background should be transparent.

How to reproduce

Create a stack of several screens (A, B, C). Set the cardStyle backgroundColor to transparent. Generate a push from A to B or C.

Your Environment

software version
react-navigation 1.5.6
react-native 0.54.0
node v8.9.4
npm or yarn 5.6.0
@brentvatne

This comment has been minimized.

Copy link
Member

@brentvatne brentvatne commented Mar 20, 2018

can you explain what you're trying to accomplish by doing this? you mentioned wanting all of the screens being transparent so you have a blur.. so you want every new screen in the stack to be blurred on top of the previous screen? are you sure a stack is the best navigator to use here if so?

@dahiri-farid

This comment has been minimized.

Copy link
Author

@dahiri-farid dahiri-farid commented Mar 22, 2018

Hello Brent. Yes basically this is what I want to achieve. I have spent some time on implementing a custom transition using a stack navigator and I have made a video of it.
So basically in my custom transition the only think that is missing is that when I push/pop child screen, the parent is not moving like in iOS. I can do that using this transition but in that case I will see half of the screen with black background. This happens because right now my dynamic content is in parent screen. The reason for that, is that if I move my dynamic content out of my stacknavigator (parent screen), it will not be visible. because of black background.

https://www.dropbox.com/s/ycfxl362bsast3s/custom-blur-transition.mov?dl=0

@brentvatne

This comment has been minimized.

Copy link
Member

@brentvatne brentvatne commented Mar 22, 2018

perhaps it's related to this?

backgroundColor: '#E9E9EF',
shadowColor: 'black',

@brentvatne

This comment has been minimized.

Copy link
Member

@brentvatne brentvatne commented Mar 22, 2018

see: #2713

@brentvatne

This comment has been minimized.

Copy link
Member

@brentvatne brentvatne commented May 7, 2018

moved to a feature request

@brentvatne brentvatne closed this May 7, 2018
@react-navigation react-navigation locked and limited conversation to collaborators May 7, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
2 participants
You can’t perform that action at this time.