reactnative-map-view zoom

    0

    0

    The code example renders a map of a location that the user is located at. A marker located at that location has the coordinates of the user's current location.

    The mapView component renders a map of user's current location. The marker at the user's current location is rendered with latitude and longitude values that correspond to the user's current location.

    The style property of the mapView component sets the style of the marker. The style can be set to a string that contains concatenated style properties of the markers, as in the example code. Alternatively, the style property can be set to an object that contains key/value pairs to specify the style of the marker. The style property of the mapView component is set to an object that has the following properties:

    width: "100%",

    borderRadius: 10,

    flex: 1,

    borderRadius: 20,

    The provider property of the mapView component is set to google . This specifies that the mapView component renders the map using the Google Maps API.

    showsUserLocation: false is set to false . The showsUserLocation property indicates whether the user's location is displayed on the map.

    loadingEnabled: true

    Library: react-native

    <MapView
        ref={mapRef}
        initialRegion={{
        longitude: userInfo.location.coordinates[0],
        latitude: userInfo.location.coordinates[1],
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
        }}
        style={{
        width: "100%",
        borderRadius: 10,
        flex: 1,
        borderRadius: 20,
        // height: 100,
        }}
        userInterfaceStyle={{}}
        provider="google"
        showsUserLocation={false}
        loadingEnabled={true}
        customMapStyle={mapStyle}
        onMapLoaded={() => {
        mapRef?.current?.getCamera().then((cam) => {
        cam.zoom -= 10;
        mapRef?.current?.animateCamera(cam);
        });
    
        console.log(mapRef.current);
        }}
      >
        <Marker
        coordinate={{
        latitude: initialMapLoc.latitude,
        longitude: initialMapLoc.longitude,
        }}
        >
        <Image source={personIcon} style={{ width: 30, height: 30 }} />
        </Marker>
    Codiga Logo
    Codiga Hub
    • Rulesets
    • Playground
    • Snippets
    • Cookbooks
    soc-2 icon

    We are SOC-2 Compliance Certified

    G2 high performer medal

    Codiga – All rights reserved 2022.