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.
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.
In the screen, we use the custom
MyView component instead of native
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.