React Native Lightbox

Overview

The react-native-lightbox is a versatile library that provides a customizable lightbox component for React Native applications. It offers features such as customizable header, content, and handling of events like opening and closing the lightbox. The library supports both iOS and Android platforms.

Features

• activeProps: Optional set of props applied to the content component in lightbox mode.
• renderHeader(close): Custom header rendering instead of default with close button.
• renderContent: Option to provide custom content for the lightbox instead of default content.
• willClose: Triggered before the lightbox is closed.
• onClose: Triggered when the lightbox is closed.
• onOpen: Triggered when the lightbox is opened.
• didOpen: Triggered after the lightbox is opened.
• underlayColor: Color of touchable background, default is black.
• backgroundColor: Color of the lightbox background, default is black.
• swipeToDismiss: Enables gestures to dismiss the fullscreen mode by swiping up or down, default is true.
• springConfig: Animated.spring configuration, default is { tension: 30, friction: 7 }.

Installation

To install the react-native-lightbox, use the following steps:

npm install react-native-lightbox

Navigator Setup and Android Support

For Android support, you need to pass a reference to a Navigator since it does not have the Modal component. Check the Example project for a detailed implementation.

Summary

The react-native-lightbox library offers a customizable lightbox component with various features to enhance the user experience in React Native applications. By providing options for customizing headers, content, and handling events, developers can create engaging and interactive lightbox experiences for their users. The library supports both iOS and Android platforms, making it a versatile choice for developers looking to implement a lightbox feature in their applications.