CODEWITHSUNDEEP
reactjsreact-nativereact-native-maps
Josef Pa
Josef Pa

Reputation: 39

React Native Maps for Web IOS and Android

What is the best react native map for all platforms, that work together?

I am using expo Tried using this: https://docs.expo.dev/versions/latest/sdk/map-view/

But when I do it breaks my whole project?

Upvotes: 1

Views: 1317

Answers (1)

Yann Borie
Yann Borie

Reputation: 54

I used "react-native-maps" as well and it worked well with Expo, both on iOS and Android. As far as I know, it's your best option with Expo.

Here's how I had it setup (Feel free to ingnore the context bit - just wanted to show the drawing capabilities as well):

import React, { useContext } from 'react';
import {Text, StyleSheet, ActivityIndicator} from 'react-native';
import MapView, { Polyline, Circle } from 'react-native-maps';
import {Context as LocationContext} from "../context/LocationContext";


const Map = () => {
    const { state: { currentLocation, locations }} = useContext(LocationContext);
    if(!currentLocation)
        return <ActivityIndicator size="large" style={styles.activityIndicator}/>;
    return <>
        <MapView 
            style={styles.map}
            initialRegion={{
                ...currentLocation.coords,
                latitudeDelta: 1,
                longitudeDelta:1,
            }}
        >
            <Circle 
                center= {currentLocation.coords}
                radius= {2000}
                color="rgba(158, 158, 255, 1.0)"
                fillColor="rgba(158, 158, 255, 0.3)"
            />
             <Polyline 
                coordinates={ locations.map((item) => item.coords )}
                lineDashPattern={[1, 0]}
            />
        </MapView>
    </>
};

const styles = StyleSheet.create({
    map:{
        height: 300,
    },
    activityIndicator:{
        marginTop: 200
    }
});

export default Map;

Upvotes: 1

Related Questions