How to hide a component without unmounting it?

user_561309 0
Viewed 9980

I've got a list component that I would like to keep in the DOM whenever it's not needed so that the scroll position is not lost.

I've tried setting the style to {display: 'none'} but this unmounts the component. I've also tried setting { flex: 0.0001 } which kind of works but it feels like a hack (which they might optimise to "0" later on) and it creates layout glitches when the component is shown/hidden.

Any idea what would be the proper way to do this?

react-native layout
3 Answers

I have found that in recent React Native the approach with:

{ display: 'none' }

Do the works fine for me, my Tab component switches layouts without unmounting it's contents.

Tested on: RN 0.58.1, iPhone X 12.1.

Xarvalus_29846930

Try this:

<div style={{visibility: this.state.hidden ? 'hidden' : 'visible'}}>
    content
</div>
user_63038390
Related