Lightbox

Lightbox is Shoutem’s fork of react-native-lightbox component.
All content within Lightbox is transformable, meaning it can be pinched to zoom, panned (translated), etc.

Lightbox example

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

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>