CODEWITHSUNDEEP
androidhtmlcssreactjsreact-native
N Sharma
N Sharma

Reputation: 34497

Invisible View in ReactJS

I am trying to make hidden view as like android has. This occupies the space but it doesn't show to the user.

<View
    android:id="@+id/hiddenView"
    android:layout_width="30dp"
    android:layout_height="wrap_content"
    android:visibility="invisible" />

What is the way to do this in ReactJS ?

Upvotes: 1

Views: 77

Answers (2)

Mμ.
Mμ.

Reputation: 8542

You can use visibility set to hidden in the style of your html element in your react component. See example below.

function InvisibleDiv() {
  return <div style={{width: '50', height:'50', backgroundColor: 'red',visibility: 'hidden'}}></div>;
}

ReactDOM.render(<InvisibleDiv />, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Upvotes: 2

Karan Hudia
Karan Hudia

Reputation: 573

In CSS you can achieve this by setting the visibility: hidden property. Whereas to completely hide the space occupied by it as well, you should use display: none.

Upvotes: 2

Related Questions