How to hide a <View> component in React Native

By Arun David and Arun Bharhath

Our Scripbox mobile app is completely re-written with React Native to support both Android and iOS. When we started building our app, we had to hand-roll custom wrapper components to overcome React Native limitations. We would like to share some of our learnings in this journey.

The Challenge

React Native View component does not support hiding or changing visibility option by default. We wrote a custom component MyView with this in mind.

Our custom component MyView can accept a prop hide that hides the element when the prop is set to true. Otherwise, MyView renders native View component with all of its children.

Usage

In the screen, we use the custom MyView component instead of native View component.

Conclusion

There are other solutions available in the internet that recommend to set the opacity of the view to zero or setting the height of the view to zero. We prefer to unmount (not render) a component, rather than mounting and mutating the opacity or position. Given a chance, we opt for composition instead of direct state change.

We will share other such custom wrapper components that we have created to overcome some limitations of React Native in the upcoming posts.

We are unlocking engineering challenges, the kind that come frequently, and with scale. If you think these are the kind of challenges that you would love to solve, do check out our open positions.