Werid bug with resize | How to access common functions?

[ollyde]

Hello, I simply want the map to be full size on the cavas, I see this is a bug here https://github.com/visgl/react-map-gl/issues/604

Anyhow, I have no idea how to access the MapBox functions like Map.resize(), any pointers?

Here's what we got so far, we fixed it but it's not ideal.

import React, { useEffect } from 'react';

import ReactMapboxGl, { Layer, Feature } from 'react-mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';


export const Map: React.FC = () => {

    const Map = ReactMapboxGl({
        trackResize: true,
        accessToken:
            config.mapboxAccessToken
    });

    useEffect(() => {
        // "Map" has no resize function. 
        // For example, how do we access Map.resize() ??
    }, [])

    return (
        <Map
            style="mapbox://styles/mapbox/streets-v9"
            containerStyle={{
                width: '100%',
                height: '100%',
            }}
            onStyleLoad={() => {
                // We need this here, otherwise the map won't load full screen. Werid bug. But we have no access to 'resize'
            }}

        >
        </Map>
    );
}

[Georift]

onStyleLoad provides map as the first parameter, see this:

<Map
  style="mapbox://styles/mapbox/streets-v11"
  containerStyle={{
    height: "100vh",
    width: "100vw"
  }}
  onStyleLoad={(map) => console.log("onStyleLoad", map, map.resize)}
>
 {...}
</Map>

However I've noticed that putting width: 100% or height: 100% doesn't work for me, but setting the container style to this does what I'm after:

<Map
  style="mapbox://styles/mapbox/streets-v9"
  containerStyle={{
    height: "100vh",
    width: "100vw"
  }}
>

[ollyde]

@Georift I'm using TypeScript what type is map?

[Georift]

@Georift I'm using TypeScript what type is map?

I am also, what version of the library are you running?