Issue rendering custom View component

[soodoh]

My apologies if I am missing something obvious here, but I have been trying to figure this out for a while after looking at the examples in the documentation. I tried to use the same styles as the Alternative Media custom View example from the docs. Perhaps I am missing the correct styles.

Any help would be greatly appreciated! Perhaps we can include another example in the docs with just this simple use case. I think a lot of people would want to replace the View with the sole purpose of having their own lazy-loading or something.

Steps to reproduce the behavior:

1. With code like this:

import React from 'react';
import { makeStyles, useTheme } from '@material-ui/styles';
import Carousel, { Modal, ModalGateway } from 'react-images';
import Img from 'gatsby-image';

const useStyles = makeStyles({
  container: {
    height: 'auto',
    maxHeight: '100vh',
    maxWidth: '100%',
    userSelect: 'none',
  },
  image: {
    width: '100%',
    height: 'auto',
  },
});

const View = (props) => {
  const classes = useStyles();
  const { data } = props;

  return (
    <div className={classes.container}>
      <Img fluid={data.srcSet} alt={data.caption} className={classes.image} />
    </div>
  );
};

const Lightbox = (props) => {
  const { onClose, images, currentPhoto } = props;
  const theme = useTheme();

  const modalStyles = {
    positioner: base => ({
      ...base,
      zIndex: theme.zIndex.appBar + 1,
    }),
    blanket: base => ({
      ...base,
      zIndex: theme.zIndex.appBar + 1,
    }),
  };

  return (
    <ModalGateway>
      {Number.isInteger(currentPhoto) && (
      <Modal
        allowFullscreen={false}
        onClose={onClose}
        styles={modalStyles}
      >
        <Carousel
          currentIndex={currentPhoto}
          views={images}
          components={{ View }}
        />
      </Modal>
      )}
    </ModalGateway>
  );
};

export default Lightbox;

Expected behavior: The View component should look the same as the default View (in terms of CSS), but with a new Img component instead.

Actual behavior: The Modal opens with no image rendered and the navigation buttons are directly in the center since the View has no width.

[jossmac]

Note: gatsby-image is not a drop-in replacement for <img />. It’s optimized for fixed width/height images and images that stretch the full-width of a container. Some ways you can use <img /> won’t work with gatsby-image.

From https://www.gatsbyjs.org/packages/gatsby-image/

Without looking into the source for gatsby-image I can't say what's happening exactly, but I suspect it has something to do with their optimisation path.

[soodoh]

@jossmac Thanks for your response. According to the docs, it looked like this should be working as it is optimized also for stretching into the full-width of a container, which is supplied in the example code.

I'll have to check back into the project that I was working on and see if it is just the gatsby-image implementation causing this bug, as you said.

Again, thanks!