React-mapbox-gl: Issues with sizing of the canvas in a flexbox

[basharov]

Canvas sets some default size on load and the map looks like this:

When I resize the window, the canvas sets its size to the whole pink area, as should do from the start.

How do I fix it?

[alex3165]

Do you pass a containerStyle with a height and a width to the map? Could you reproduce the issue with https://www.webpackbin.com/bins/-KqtJN-qkLs4BPaVX0QS

[alex3165]

I will close this issue for inactivity, please open a new issue with the bug reproduced with webpackbin if it is still happening.

[dongapplyboard]

Getting the same issue, I have

containerStyle={{height: "100%", width: "100%"}}

[devnoot]

I have the same issue. I have a drawer on the left side of the map that will expand and close with a button.

When the drawer expands / contracts, the map does not resize with the container.

I have this as suggested in #372 but it does not work unless I actually resize the window.

// Create the base ReactMapbox instance
const MapboxMap = ReactMapboxGl({
    accessToken: Config.mapbox.accessToken,
    minZoom: 8,
    maxZoom: 15,
    onStyleLoad: map => map.resize()
})

EDIT: Is there a way to access the map from within React.useEffect? I'm thinking that I can just do something like

React.useEffect(() => map.resize, [drawerIsExpanded])

[austencm]

Using onStyleLoad + resize() on the map component worked for me:

<Map
  ...
  onStyleLoad={(map) => map.resize()}
>

[nandorojo]

I did something like this to avoid the flicker:

const [hasMapMounted, setMapMounted] = useState(false)

<MapBox
  containerStyle={{
    opacity: hasMapMounted ? 1 : 0,
    height: '100%',
    width: '100%'
  }}
  onStyleLoad={(map) => {
    map?.resize?.()
    setMapMounted(true)
  }}
/>

[trungnguyencmu]

I got problem with width of map when drawer collapse
I have same question with @devnoot
I found #13