Lightbox

All content within Lightbox is transformable, meaning it can be pinched to zoom, panned (translated), etc.

API

Props

• activeProps: object
  • An optional set of props applied to the content component when in lightbox (open) mode. Use for applying custom styles or higher resolution image source
• renderHeader(close): function
  • A function that should return custom header instead of default with X button in the upper left corner
• renderContent: function
  • A function that should return custom Lightbox content instead of default child content
• onClose: function
  • Triggered when Lightbox is closed
• onOpen: function
  • Triggered when Lightbox is opened
• underlayColor: string
  • Defines color of touchable background, defaults to black
• backgroundColor: string
  • Defines color of Lightbox background, defaults to black
• swipeToDismiss: bool
  • Enables gestures to dismiss the fullscreen mode by swiping up or down, defaults to true
• pinchToZoom: bool
  • Enables pinch to zoom functionality on the fullscreen content, defaults to true
• springConfig: object
  • Animated.spring configuration, defaults to { tension: 30, friction: 7 }

Style names

Lightbox has no specific style names.

Style

• Supports every Style prop that the standard React Native View component supports. style is applied to outermost View container component

Example

JSX Declaration

<Lightbox>
  <Image
    style={{ height: 300 }}
    source={{ uri: 'https://shoutem.github.io/static/getting-started/restaurant-1.jpg' }}
  />
</Lightbox>