React-native: [Idea: Style] display:none and visibility:hidden

[ide]

I've been using onLayout a bit and have been thinking about these two CSS concepts in RN. Here's what each would do and how they fit into React:

display:none: the React component is rendered in the component hierarchy so it can retain state, but no shadow views are created for it. No layout calculations are performed nor are UIViews created. Asking for its measurements gives a zero rect, just like the DOM.

visibility:hidden: shadow views are created for the React component and layout is calculated, but no UIViews are created, which is how this differs from opacity:0.

I haven't measured any performance problems so these aren't hi-pri for me, but could be good to anticipate as more view optimizations are written. Display:none (or maybe visibility:hidden if layout is needed) in particular seems like a great fit for ListView cells since off-screen cells could retain component state and not incur any native overhead.

[lelandrichardson]

@ide what's the use case for needing visibility:hidden that display:none or opacity:0 wouldn't cover? I guess visibility:hidden wouldn't block touch events?

Purely curious. I've found myself wanting display:none several times. I also like that it increases parity with the web.

[magicismight]

display:none would be very useful.
In some case I had to use transfom:translate() to move the element out of screen to hide it.

[ide]

@lelandrichardson: opacity:0 would still create UIViews and acts like uiView.alpha = 0 or uiView.hidden = YES. We may want to override the hit testing so that fully transparent views still receive touches though this is not the case currently.

Meanwhile visibility:hidden would not create UIViews and would not receive touch events.

[matth3wga0]

See also https://github.com/facebook/react-native/issues/638

[ghost]

Thank you for reporting this issue and appreciate your patience. We've notified the core team for an update on this issue. We're looking for a response within the next 30 days or the issue may be closed.

[ide]

Still think this is good. For now have been making do with opacity:0 but in the long run I think we'll want this as a primitive on which optimizations can be written.

[brentvatne]

It's worth noting here that on Web and Android, fully transparent views still receive touches - iOS is the odd one out.

[JohnnieFucker]

there's only one way to implement this, just set the container view's height to 0.

[ryanmcdermott]

I would appreciate this, I've been doing something similar to others in this thread, setting width and height to 0 when I want an element to not be displayed.

[ahanriat]

Hi guys ! Any update on this since from 0.15.0, views with opacity:0 receive touch ?

[satya164]

@ahanriat Yes, they do, both on Android and iOS.

[ide]

Use pointerEvents to ignore touches. Unfortunately on Android touches don't go through overlapping absolutely positioned views though.

[ahanriat]

@satya164 & @ide Thanks ! I now use pointerEvents, and I think it's better this way ;)
I assume returning false instead of the component will do the same as a css display: none on the component itself

[ide]

The React component is still mounted when you use CSS "display: none". If you return null, the component will be unmounted and its state will be destroyed.

[mkonicek]

Hi there! This issue is being closed because it has been inactive for a while.

But don't worry, it will live on with ProductPains! Check out its new home: https://productpains.com/post/react-native/idea-style-displaynone-and-visibilityhidden

ProductPains helps the community prioritize the most important issues thanks to its voting feature.
It is easy to use - just login with GitHub.

Also, if this issue is a bug, please consider sending a PR with a fix.
We're a small team and rely on the community for bug fixes of issues that don't affect fb apps.

[codazoda]

{height: 0, opacity: 0} worked for me as an alternative to {display: none}

[Gentlee]

There is a bug on android that changing height to 0 doesn't effect real height (i used Animated.Value), so that doesn't work for me. Invisible view still intercept touches.

Moving view from screen (top: Dimensions.get('window').height) helped.

[uc-hus]

I need to add css like display:block; Any-one how help me?

[sundayhd]

You can use my module react-native-display to show/hide components.

[gre]

https://github.com/facebook/react-native/commit/4d69f4b2d1cf4f2e8265fe5758f28086f1b67500

[zainulabidin302]

I usually use the following syntax for display and hiding, I think about it as alternate syntax. It looks a little ugly but it works fairly well.
{ this.state.boolean_var ? <ComponentToHideShow /> : null }

[diogofos]

@zainulabidin302, Thank you! Simple and efficient.

[Gentlee]

@zainulabidin302 @diogofos
1) You can write shorter:
{ this.state.showComponent && <Component/> }
2) Component is unmounted if you do that way.