Behnam Kamrani
Behnam Kamrani

Reputation: 885

Mapbox from @rnmapbox event handlers are not called on Web

apologies for this question as I am new to Mapbox. I wonder why none of these methods (e.g. onMapIdle, onLongPress, onTouchStart, onCameraChanged, etc) are triggered. The map is rendered properly and the marker and press maker are working. I'm on Expo sdk 51 using "mapbox-gl": "^3.4.0" and "@rnmapbox/maps": "^10.1.25". Some of them are at least working on iOS though. Thank you very much in advance.

import React, { useRef } from 'react';
import MapboxGL from '@rnmapbox/maps';
import { View, ViewProps } from 'react-native';

export default function SmallMapWeb( {
    markerCoordinates,
    markerId,
    ...props
} ) {
    const mapViewRef = useRef( null );
    // console.log( `>this works: ` );
    const handleCameraChanged = ( e ) => {
        console.log( '>handleCameraChanged e:', e );
        console.log( 'Camera changed to:', e.properties );
    };
    return (
        <MapboxGL.MapView
            ref={mapViewRef}
            style={{
                height: '500%',
                flex: 1,
            }}
            onMapIdle={() => console.log( ">>on MapIdle not working " )}
            onLongPress={() => console.log( ">>on long press not working" )}
            onWillStartLoadingMap={() => console.log( ">>onWillStartLoadingMap not working" )}
            onRegionIsChanging={() => {
                console.log( 'region is not working' );
            }}
            onTouchStart={() => {
                console.log( 'touch start not working' );
            }}
            onTouchEnd={() => {
                console.log( 'touch end not working' );
            }}
            onTouchMove={() => {
                console.log( 'touch move not working' );
            }}
            onCameraChanged={() => {
                console.log( 'camera changed not working' );
            }}
            {...props}>
            <MapboxGL.Camera
                zoomLevel={12}
                centerCoordinate={markerCoordinates}
            />
            <MapboxGL.MarkerView coordinate={markerCoordinates} id={markerId || 'Marker Id'}>
                <View style={{ alignItems: 'center', justifyContent: 'center' }}>
                    <View
                        style={{
                            height: 25,
                            width: 25,
                            backgroundColor: 'red',
                        }}
                    />
                </View>
            </MapboxGL.MarkerView>
        </MapboxGL.MapView>
    );
}

Upvotes: 0

Views: 124

Answers (0)

Related Questions