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.

scripbox-engineering

Engineering @ Scripbox

Scripbox Technology Blog

Written by

Learn more about how Scripbox designs, builds, and operates our systems and engineering teams

scripbox-engineering

Engineering @ Scripbox

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade