Height not being applied

[intelligence]

First and foremost, thanks for your work on this, very much appreciated!

I'm pretty new to react, have used flickity a bunch before, but with this react component I'm not getting proper height on my carousel. If I resize it will recalculate and apply correct height. Not sure if I've configured it wrongly or if it's an issue with the component. Any ideas?

import React from 'react';
import Flickity from 'react-flickity-component';

export default class fullScreenCarousel extends React.Component {

  render() {

    const flickityOptions = {
      imagesLoaded: true,
      wrapAround: true,
      fullscreen: true,
      pageDots: false,
      prevNextButtons: false,
    }

    return (
      <Flickity
        className={'carousel'} // default ''
        elementType={'div'} // default 'div'
        options={flickityOptions} // takes flickity options {}
        disableImagesLoaded={false} // default false
      >
      {this.props.images.map(({ path }, index) => (
        <div key={index} className="carousel-cell">
          <img className="carousel-image" src={path} />
        </div>
      ))}
      </Flickity>
    )
  }
}

[NathanGostelow]

bump on this, im having the same issue!

@intelligence did you figure out a solution to this?

[yaodingyd]

Can you create a reduced testcase in codesandbox?

[NathanGostelow]

i fixed the issue by passing a function through as a prop which sets State on size and passed size through to the parent component as an inline style i call the function with the ref to flickity which has the correct size (although the parent component isnt the right size initially) and call the function on mount.

this works perfectly since the issue is in first render when resize isnt being called on mount despite reloadOnUpdate being set to true.

I will try to get a test example to demonstrate my fix or PR a solution inline to this repo at some point

[CptCompiler]

Hey @NathanGostelow could you provide a codesandbox? I don't really understand how you solved this...

[yaodingyd]

Close for lack of response. If demo box provided with reduced test, issue will reopen.