InvalidateSize and flyToBounds do not work with ref

[thijssmudde]

• [x] All peer dependencies are installed: React, ReactDOM and Leaflet.
• [x] Using a supported version of React and ReactDOM (v15.x or v16.x).
• [x] Using the supported version of Leaflet (v1.3.x) and its corresponding CSS file is loaded.
• [x] Using the latest stable version of React-Leaflet - not v2 beta.
• [x] The issue has not already been reported.
• [x] Make sure you have followed the quick start guide for Leaflet.
• [x] Make sure you have fully read the documentation and that you understand the limitations.

Expected behavior

Opening and closing interface tab, should invalidate the map size and the polyline should be centered.

Actual behavior

invalidateSize and flyToBounds do not work on the ref object.

Steps to reproduce

Map component has a ref:

ref={(ref) => this.mapRef = ref}

componentWillReceiveProps() {
    const {flyToBounds} = this.props

    console.log(this.mapRef)

    if (flyToBounds) {
      this.mapRef.current.leafletElement.invalidateSize()
      this.mapRef.current.leafletElement.flyToBounds(this.bounds)
    }
 }

Both methods are not available

[PaulLeCam]

From your description it seems you're confusing the usage of React's createRef() and callback ref, please refer to React's docs, it's not an issue with this lib.

[thijssmudde]

Well, can you help understand why the methods invalidateSize() and flyToBounds nor setView are exposed?

Im following this as an example: https://github.com/PaulLeCam/react-leaflet/blob/master/example/components/events.js

It should be possible to access these methods, right?

[thijssmudde]

This worked because I had used StyledComponents which obstructed the use of ref:

<Map
 ref={(ref) => this.mapRef = ref}
...
/>

centerPolyline = () => {
    const {bounds} = this.state
    if (bounds) {
      this
        .mapRef
        .leafletElement
        .invalidateSize()
      this
        .mapRef
        .leafletElement
        .flyToBounds(bounds)
    }
  }