CODEWITHSUNDEEP
react-nativemapboxrnmapbox-maps
maliktintilinic
maliktintilinic

Reputation: 1

React Native Mapbox compassImage

I am working on React Native project in which i added map from rnmapbox. Everything works fine except the custom compass image, what am I doing wrong?

There aren't many exapmles regarding this case, so if anyone had done this I'd be more than grateful for your help.

import React, {useState, useEffect} from 'react';
    import {
    useWindowDimensions,
    StyleSheet,
    View,
    PermissionsAndroid,
    Platform,
    ImageSourcePropType,
    } from 'react-native';
    import Mapbox from '@rnmapbox/maps';
    Mapbox.setAccessToken(
    'myAccessToken',
    );
    Mapbox.setTelemetryEnabled(false);

    const images = {
    compass: require('../../assets/icons/compass.png'),
    };

    const Map: React.FC = () => {
    const [stateLng, setLng] = useState(10.4402);
    const [stateLat, setLat] = useState(10.5081);
    const [destinationCoords, setDestinationCoords] = useState<[number, number]>([
    10.4402, 10.5081,
    ]);

    return (
    <View style={styles.container}>
      <Mapbox.MapView
        style={styles.map}
        compassEnabled={true}
        compassImage="compass"
        scrollEnabled={true}
        rotateEnabled={true}
        scaleBarEnabled={false}
        gestureSettings={{
          doubleTapToZoomInEnabled: true,
          doubleTouchToZoomOutEnabled: true,
          pinchPanEnabled: true,
          pinchZoomEnabled: true,
        }}>
        <Mapbox.Camera
          centerCoordinate={[stateLng, stateLat]}
          zoomLevel={17}
          animationMode={'flyTo'}
          animationDuration={6000}
        />
        <Mapbox.Images images={images} />
        <Mapbox.PointAnnotation
          id="destinationPoint"
          coordinate={destinationCoords}>
        </Mapbox.PointAnnotation>
        <Mapbox.UserLocation
          animated={true}
          androidRenderMode={'gps'}
          showsUserHeadingIndicator={true}
        />
      </Mapbox.MapView>
    </View>
    );
    };

    export default Map;

    const styles = StyleSheet.create({
    container: {
      width: '100%',
    },
    map: {
      flex: 1,
    },
    });

Upvotes: -1

Views: 96

Answers (1)

Paul Sorenson
Paul Sorenson

Reputation: 1

Yeah agreed the examples are a little lacking but with this hint (https://github.com/rnmapbox/maps-docs/blob/bc9822503485e50866dec3bff6cfa40fba0bdd9e/docs/components/Images.md)

Keys are names - see iconImage expressions

I got it working like below

const images = { 
  compass: {
    image: require('../../assets/icons/compass.png')
  }
};

Upvotes: 0

Related Questions