Image carousel modal

ImageCarousel.js

import React, { Component } from "react";
import { Screen, NavigationBar, ImageGallery, ImageGalleryOverlay } from "@shoutem/ui";

class ImageCarousel extends Component {
  constructor(props) {
    super(props);

    this.state = {
      imageIndex: this.props.imageIndex,
      images: [
        {
          "source": {
            "uri": "https://shoutem.github.io/static/getting-started/restaurant-1.jpg"
          },
          "title": "Gaspar Brasserie",
          "description": "Expect an intimate venue with the ambience of a private "
                         + "club. The mood is casual, the guests sublime."
        },
        {
          "source": {
            "uri": "https://shoutem.github.io/static/getting-started/restaurant-2.jpg"
          },
          "title": "Chalk Point Kitchen",
          "description": "Stylish restaurant serving market-to-table American fare "
                         + "in modern farmhouse digs with cellar bar."
        },
        {
          "source": {
            "uri": "https://shoutem.github.io/static/getting-started/restaurant-3.jpg"
          },
          "title": "Kyoto Amber Upper East",
          "description": "Amber Upper East is located on the corner of 80th and 3rd "
                         + "Avenue. We serve Japanese and Asian cuisines."
        }
      ]
    }

  }

  renderImageOverlay(photos) {
    return (
      <ImageGalleryOverlay
        styleName="full-screen"
        title={photos.title}
        description={photos.description}
      />
    );
  }

  render() {
    console.log(this.state)
    const { images, imageIndex } = this.state;

    return (
      <Screen>
        <NavigationBar
          title="Image Gallery"
          styleName="inline"
        />
        <ImageGallery
          data={images}
          selectedIndex={imageIndex}
          renderImageOverlay={this.renderImageOverlay}
        />
      </Screen>
    );
  }
}

export default ImageCarousel;