Lightbox

React Native supports the concept of a “modal” but there is a limitation that the device’s Back button cannot be captured by a modal. One of the primary functions of the back button would be to close any modal, so I looked for an alternative solutions.

In order for the lightbox to be positioned absolutely on the whole screen (and not be scrolling with the content), it has to be rendered outside of the individual pages. The solution is to render the lightbox at the very highest level of the application, in the App.jsx component.

Since the actual rendering of the lightbox is separated from the code that controls the lightbox, two components are involved: the <Lightbox> “component” that is used on the application page to “render” the lightbox, and the <LightboxImplementation> component, which is rendered at the root level and does the actual rendering.

The <Lightbox> that the application uses is actually a dummy component that receives the lightbox props and its content (children), and places these in the LightboxStore. It returns an empty fragment, enough to fool React into thinking that it is an actual component. The <Lightbox> also registers a Back button handler to close the lightbox when the Back button is pressed.

The <LightboxImplementation> listens to the LightboxStore and renders the actual lightbox and its content, based on what it finds in the store.