Chrome ref issue

[lilahz]

Hi, I'm using the package in one of my projects, and I'm having some issue I'm trying to solve for a while now.
I'm trying to create a list of Item components, to later show in a Gallery, which works fine when I'm running my web app on firefox browser.
The issue starts when trying to run on any other browser, then I get the following error message -
Uncaught Error: No valid ref provided.
You shuld use ref from render prop of Item component.
Example:
{({ ref }) =>

}
But the code suggested in the example is already in use in my code.

[irudoy]

Can you provide an isolated repro repository? It would be the best option and I could find a solution quickly.

Otherwise, I need a complete code snippet and some info. React version? Browser version which fails?
This example works well in that browser? https://dromru.github.io/react-photoswipe-gallery/?path=/story/gallery--simple

Based on the code provided earlier, you're trying to do something like this:

Object.keys(obj).map((key) => {
  // ...
  const Item = <Item>{({ ref, open }) => <img ref={ref} onClick={open} />}</Item>
  // ...
})

Can you provide exactly what you returning from the map callback?

Do you use an Item component outside of map callback somewhere?

[lilahz]

Well after couple of hours of trying all kind of things, I needed to manually wrap the Item component in Gallery component, I thought I already wrapped it since I've first create list of Item object, then rendered it inside Gallery component like this -
const somefunction = () => {
... create list of <Item>...</Item> and push it to state object
}

render () {
<Gallery>
{items_state}
</Gallery>

Apparently it's wasn't a good approach :S

If I may though ask another question. Now the gallery is working, but the zoom is acting quite weird. Once clicked the zoom button it only zooms into the center of the image, dragging the picture around is not possible, scrolling up and down the center of the picture is available though.

My code now looks like this -

After the src there is nothing except closing bracket.

Thanks for the help and fast response!

[irudoy]

Glad that you figured out what was wrong!
Did you provide the actual width and height that match the picture?
Also, you don't need to unfold the ref's current property, it accepts React ref object. But it's not related to the zoom issue, of course.

[lilahz]

Can you specify where should I provide the actual sizes? As props to the Item component? I thought those are the sizes to display the image when I click the thumbnail. If I’ll provide bigger sizes, it should somehow affect the zooming functionality?

[irudoy]

Yep, you should provide the exact size of the big image via width and height props. It's a PhotoSwipe constraint:

From the docs:

Dimensions are used for progressive loading, stretched placeholder, initial zoom-in transition, panning, zooming, caption positioning. Discussion in GitHub issue #741.

https://photoswipe.com/documentation/faq.html#image-size