Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

github.com/oblador/react-native-lightbox

Package Overview
Dependencies
Alerts
File Explorer
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

github.com/oblador/react-native-lightbox

  • v0.8.1
  • Source
  • Go
  • Socket score

Version published
Created
Source

react-native-lightbox

Installation

yarn add react-native-lightbox

Usage

navigator property is optional but recommended on iOS, see next section for Navigator configuration.

import Lightbox from 'react-native-lightbox';

const LightboxView ({ navigator }) => (
  <Lightbox navigator={navigator}>
    <Image
      style={{ height: 300 }}
      source={{ uri: 'http://knittingisawesome.com/wp-content/uploads/2012/12/cat-wearing-a-reindeer-hat1.jpg' }}
    />
  </Lightbox>
);

Navigator setup/Android support

For android support you must pass a reference to a Navigator since it does not yet have the Modal component and is not on the official todo list. See the Example project for a complete example.

const renderScene = (route, navigator) => {
  const Component = route.component;

  return (
    <Component navigator={navigator} route={route} {...route.passProps} />
  );
};

const MyApp = () => (
  <Navigator
    ref="navigator"
    style={{ flex: 1 }}
    renderScene={renderScene}
    initialRoute={{
      component: LightboxView,
    }}
  />
);

Properties

PropTypeDescription
activePropsobjectOptional set of props applied to the content component when in lightbox mode. Usable for applying custom styles or higher resolution image source.
renderHeader(close)functionCustom header instead of default with X button
renderContentfunctionCustom lightbox content instead of default child content
willClosefunctionTriggered before lightbox is closed
onClosefunctionTriggered when lightbox is closed
onOpenfunctionTriggered when lightbox is opened
didOpenfunctionTriggered after lightbox is opened
underlayColorstringColor of touchable background, defaults to black
backgroundColorstringColor of lightbox background, defaults to black
swipeToDismissboolEnables gestures to dismiss the fullscreen mode by swiping up or down, defaults to true.
springConfigobjectAnimated.spring configuration, defaults to { tension: 30, friction: 7 }.

Demo

Demo

Example

Check full example in the Example folder.

License

MIT License. © Joel Arvidsson

FAQs

Package last updated on 15 Dec 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc