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

  • None

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: 'http://knittingisawesome.com/wp-content/uploads/2012/12/cat-wearing-a-reindeer-hat1.jpg' }}
  />
</Lightbox>