React Native Lightbox

screenshot of React Native Lightbox
react
react-native

Images etc in Full Screen Lightbox Popovers for React Native

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 }.

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.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

react-native
React Native

React Native is a framework for building mobile applications using React and JavaScript. It enables developers to write once and deploy to multiple platforms, including iOS, Android, and the web, while providing a native app-like experience to users.