Reputation: 885
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