I have installed react-native-maps in my app but when i enter a MapView this is the output :
I followed the installation guide on github and entered the api key, but still does not display anything.
this is the code:
import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import MapView from 'react-native-maps';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<MapView
style={styles.map}
region={{
latitude: 41.89193,
longitude: 12.51133,
latitudeDelta: 0.015,
longitudeDelta: 0.0121,
}}
>
</MapView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
...StyleSheet.absoluteFillObject,
height: 400,
width: 400,
justifyContent: 'flex-end',
alignItems: 'center',
},
map: {
...StyleSheet.absoluteFillObject,
},
});
Does anyone know how I can solve this problem or what does it depend on?
thank's
You need to add provider to MapView:
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
....
<MapView
provider={PROVIDER_GOOGLE}
style={styles.map}
region={{
latitude: 41.89193,
longitude: 12.51133,
latitudeDelta: 0.015,
longitudeDelta: 0.0121,
}}
>
</MapView>
Related
I am using react-native-maps and the version is "react-native-maps": "1.3.2". It is not showing map on the whole screen of the emulator rather shows incomplete map like this;
This is my code. Please guide if I need to do some styling for this ?
import {ProgressSteps, ProgressStep} from 'react-native-progress-steps';
import React from 'react';
import {Text, View, StyleSheet, Dimensions} from 'react-native';
import MapView, {PROVIDER_GOOGLE} from 'react-native-maps';
const RegistrationWizard = () => {
return (
<View style={{flex: 1}}>
<ProgressSteps>
<ProgressStep label="First Step">
<View style={{alignItems: 'center'}}>
<Text>Map View</Text>
<Text>This is map</Text>
<Text>This is map</Text>
<Text>This is map</Text>
<MapView
style={styles.map}
showsMyLocationButton={true}
showsUserLocation={true}
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
/>
</View>
</ProgressStep>
<ProgressStep label="Second Step">
<View style={{alignItems: 'center'}}>
<Text>This is the content within step 2!</Text>
</View>
</ProgressStep>
<ProgressStep label="Third Step">
<View style={{alignItems: 'center'}}>
<Text>This is the content within step 3!</Text>
</View>
</ProgressStep>
</ProgressSteps>
</View>
);
};
export default RegistrationWizard;
const styles = StyleSheet.create({
map: {
...StyleSheet.absoluteFillObject,
height: Dimensions.get('window').height,
width: Dimensions.get('window').width
},
});
On Android device, you need to define the height of map parent component.
<View style={{alignItems: 'center',height:Dimensions.get('window').height * 0.7}}>
<MapView
style={styles.map}
showsMyLocationButton={true}
showsUserLocation={true}
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
/>
</View>
Demo - https://snack.expo.dev/#emmbyiringiro/a1e773
Summary
I'm using react-native-map and trying to use animateCamera and animateMarkerToCoordinate both at the same time but couldn't animate the animateCamera at all.
The working part so far
The "red circle" in the gif I've shared below, should be moving from one location to another location with animation.
I've taken advantage of this comment to be able to move marker with animation turning the code into functional component and it really worked.
Moving marker gif
My aim
I want the camera also move besides marker, so that the red circle should always be felt like it is centered in the phone screen. All this should occur when I press "animate" button below.
I've tried to do the same thing to the mapview what I've done to marker.
I've created a state
const [mapRef, setMapRef] = useState(null);
and supplied connection between <MapView> and mapRef state using the below line beginning with ref
return (
<View style={...}>
<MapView
ref= {mapRef => {setMapRef(mapRef);}}
initialRegion = {
...
}
...
/>
So when the button is pressed it goes inside this function and try to work animateCamera function
function animateMarkerAndCamera() {
let newCoordinate = {
latitude: 32.601,
longitude: 44.0172,
latitudeDelta: 0.012,
longitudeDelta: 0.012,
};
let Camera = {
...
}
if (myMarker) {
myMarker.animateMarkerToCoordinate(newCoordinate, 4000);
mapRef.animateCamera({Camera}, 4000)
}
}
By the way Camera adjusted like it is mentioned in docs
let Camera = {
center: {
latitude: newCoordinate.latitude,
longitude: newCoordinate.longitude,
},
pitch: 2,
heading: 20,
zoom: 40
}
So I'm expecting for it to animate just like it did for marker's animation, but not working.
Please tell me my fault.
Full code...
import React, {useState} from 'react'
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'
import MapView, { AnimatedRegion, MarkerAnimated } from 'react-native-maps';
const PlayScreen = (props) => {
const [myMarker, setMyMarker] = useState(null);
const [mapRef, setMapRef] = useState(null);
const [coordinate, setCoordinate] = useState(new AnimatedRegion({
latitude: 32.5983,
longitude: 44.0175,
latitudeDelta: 0.012,
longitudeDelta:0.012,
}));
function animateMarkerAndCamera() {
let newCoordinate = {
latitude: 32.601,
longitude: 44.0172,
latitudeDelta: 0.012,
longitudeDelta: 0.012,
};
if(myMarker){
myMarker.animateMarkerToCoordinate(newCoordinate,4000);
mapRef.animateCamera(newCoordinate, 4000);
}
}
return (
<View style={styles.container}>
<MapView
ref= {mapRef => {setMapRef(mapRef);}}
style={styles.map}
initialRegion={{
latitude: 32.5983,
longitude: 44.0175,
latitudeDelta: 0.012,
longitudeDelta: 0.012,
}}
>
<MarkerAnimated
ref={marker => {
setMyMarker(marker);
}}
image={require('../../../Assets/Images/curlingStone.png')}
coordinate={coordinate}
/>
</MapView>
<View style={styles.buttonContainer}>
<TouchableOpacity
onPress={() => animateMarkerAndCamera()}
style={[styles.bubble, styles.button]}
>
<Text>Animate</Text>
</TouchableOpacity>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
...StyleSheet.absoluteFillObject,
justifyContent: 'flex-end',
alignItems: 'center',
},
map: {
...StyleSheet.absoluteFillObject,
},
bubble: {
flex: 1,
backgroundColor: 'rgba(255,255,255,0.7)',
paddingHorizontal: 18,
paddingVertical: 12,
borderRadius: 20,
},
latlng: {
width: 200,
alignItems: 'stretch',
},
button: {
width: 80,
paddingHorizontal: 12,
alignItems: 'center',
marginHorizontal: 10,
},
buttonContainer: {
flexDirection: 'row',
marginVertical: 20,
backgroundColor: 'transparent',
},
});
export default PlayScreen
So, as I've explained before, I was trying to use animateCamera and animateMarkerToCoordinate together so that it could feel like my marker, the red circle, is always at the center and only the coordinates seem to be changing.
After a little research, I've found this and made mine similar to this code. Now I obtained what I wanted to achieve.Gif is here
Changes I've made were written as comments
The code is below
import {useState, useRef} from 'react'
import ... //same as before
const PlayScreen = (props) => {
const markerLatitude=32.5983
const markerLongitude=44.0175
//changed from useState to useRef
const mapRef = useRef (null);
const [myMarker, setMyMarker] = useState(null);
const [coordinate, setCoordinate] = useState(new AnimatedRegion({
latitude: markerLatitude,
longitude: markerLongitude,
latitudeDelta: 0.012,
longitudeDelta: 0.012,
}));
function animateMarkerAndCamera() {
let newCoordinate = {
latitude: 32.601,
longitude: 44.0172,
latitudeDelta: 0.012,
longitudeDelta: 0.012,
};
//camera will position itself to these coordinates.
const newCamera= {
center: {
latitude: 32.601,
longitude: 44.0172,
},
pitch: 0,
heading: 0,
//zoom: 17 --Use it when required
}
if (myMarker) {
myMarker.animateMarkerToCoordinate(newCoordinate, 4000);
//camera type, `newCamera`, used inside animateCamera
mapRef.current.animateCamera(newCamera, {duration: 4000})
}
}
return (
<View style={styles.container}>
<MapView
ref={ mapRef } //There is also change here
style={styles.map}
initialRegion={{
latitude: 32.5983,
longitude: 44.0175,
latitudeDelta: 0.012,
longitudeDelta: 0.012,
}}
//These are newly added
pitchEnabled ={false}
zoomEnabled ={false}
>
<MarkerAnimated
ref={marker => {
setMyMarker(marker);
}}
{/*any kind of image can be replaced here */}
image={require('../../../Assets/Images/curlingStone.png')}
coordinate={coordinate}
/>
</MapView>
<View style={styles.buttonContainer}>
<TouchableOpacity
onPress={() => animateMarkerAndCamera()}
style={[styles.bubble, styles.button]}
>
<Text>Animate</Text>
</TouchableOpacity>
</View>
</View>
);
}
export default PlayScreen
const styles = StyleSheet.create({ ... //same as before
In My Scenario, I have Implemented in my application Google MapView using "react-native-maps" npm package. In this package as per my requirement I have to draw a dashed circle polyline, like below mentioned image Green line should be dashed stroke style. How to change it like dashed or dotted stroke style line.
enter image description here
<Polyline
coordinates={[
{ latitude: 37.88045, longitude: -122.4324 },
{ latitude: 37.78825, longitude: -122.3903 },
]}
strokeWidth={3}
lineDashPattern={[170, 170]}
/>
You should be using <Circle/> instead of `. Here's a sample code and code snippet below. (Note: lineDashPattern is only available in iOS per doc).
import React, { Component } from 'react';
import { Text, View, StyleSheet, Dimensions } from 'react-native';
import MapView, { Marker, Circle, Polyline } from 'react-native-maps';
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
map: {
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
},
});
class MapApp extends Component {
render() {
return (
<View style={styles.container}>
<MapView style={styles.map}
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
>
<Marker
coordinate={{ latitude: 37.78825, longitude: -122.4324 }}
/>
<Circle
center={{ latitude: 37.78825, longitude: -122.4324 }}
radius={1000}
strokeWidth={3}
strokeColor="green"
lineDashPattern={[10]} />
</MapView>
</View>
);
}
}
export default MapApp;
Im trying to render a map at the current user geolocation on android device, using react-native maps.
Here is what i've got so far:
import React, { Component } from 'react';
import {
View,
StyleSheet,
Dimensions,
} from 'react-native';
import MapView from 'react-native-maps';
const {width, height} = Dimensions.get('window')
const SCREEN_HEIGHT = height
const SCREEN_WIDTH = width
const ASPECT_RATIO = width / height
const LATITUDE_DELTA = 0.0922
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO
class MapComponent extends Component {
constructor() {
super()
this.state = {
initialPosition: {
latitude: 0,
longitude: 0,
latitudeDelta: 0,
longitudeDelta: 0,
},
}
}
componentDidMount() {
navigator.geolocation.getCurrentPosition((position) => {
var lat = parseFloat(position.coords.latitude)
var long = parseFloat(position.coords.longitude)
var initialRegion = {
latitude: lat,
longitude: long,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA,
}
this.setState({initialPosition: initialRegion})
},
(error) => alert(JSON.stringify(error)),
{enableHighAccuracy: true, timeout: 20000, maximumAge: 1000});
}
renderScreen = () => {
return (
<View style={styles.container}>
<MapView
style={styles.map}
initialRegion={this.state.initialPosition}/>
</View>
);
}
render() {
return (
this.renderScreen()
);
}
}
const styles = StyleSheet.create({
container: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
justifyContent: 'flex-end',
alignItems: 'center',
},
map: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
},
});
export default MapComponent;
The map renders, but not in current device geolocation, as expected. (it renders in the middle of the ocean)
The permissions are already set at AndroidManifest.xml as:
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
After 20 seconds, i get an alert saying, "Location request timed out" "code 3"
What i'm doing wrong?
I'm not sure but there is an issue ("Geolocation timed out, code 3") which looks related
For anyone else struggling with this issue on android, try removing
the maximumAge: 2000 option parameter. This option was causing
geolocation to either timeout or crash the app.
import React, {useState, useEffect} from 'react';
import {StyleSheet, Text} from 'react-native';
import MapView, {Marker} from 'react-native-maps';
import Geolocation from '#react-native-community/geolocation';
const App = () => {
const [position, setPosition] = useState({
latitude: 10,
longitude: 10,
latitudeDelta: 0.001,
longitudeDelta: 0.001,
});
useEffect(() => {
Geolocation.getCurrentPosition((pos) => {
const crd = pos.coords;
setPosition({
latitude: crd.latitude,
longitude: crd.longitude,
latitudeDelta: 0.0421,
longitudeDelta: 0.0421,
});
}).catch((err) => {
console.log(err);
});
}, []);
return (
<MapView
style={styles.map}
initialRegion={position}
showsUserLocation={true}
showsMyLocationButton={true}
followsUserLocation={true}
showsCompass={true}
scrollEnabled={true}
zoomEnabled={true}
pitchEnabled={true}
rotateEnabled={true}>
<Marker
title='Yor are here'
description='This is a description'
coordinate={position}/>
</MapView>
);
};
const styles = StyleSheet.create({
map: {
...StyleSheet.absoluteFillObject,
},
});
export default App;
It's working perfectly in mine. Only change I made was in StyleSheet.
container: {
position: 'absolute',
height : SCREEN_HEIGHT,
width : SCREEN_WIDTH,
justifyContent: 'flex-end',
alignItems: 'center',
}
Thereafter, it renders my location. You can add marker after that to show your location.
This is what worked for me. the third option is what was creating the prob.
navigator.geolocation.getCurrentPosition() =>{
},
err => {
},
{ enableHighAccuracy: false, timeout: 20000}, //this worked for me
navigator.geolocation.getCurrentPosition() is deprecated.
Use #react-native-community/geolocation instead.
npm install #react-native-community/geolocation --save
import React, { Component } from "react";
// global.currentScreenIndex = 'Dashboard';
//Import all required component
import {
View,
Text,
StyleSheet,
TouchableOpacity,
Image,
Modal,
TouchableHighlight,
StatusBar,
FlatList,
ActivityIndicator,
Button,
NetInfo,
} from "react-native";
import MapView, { Marker } from "react-native-maps";
import Geolocation from "#react-native-community/geolocation";
const MyStatusBar = ({ backgroundColor, ...props }) => (
<View style={[styles.statusBar, { backgroundColor }]}>
<StatusBar translucent backgroundColor={backgroundColor} {...props} />
</View>
);
class Dashboard extends Component {
constructor() {
super();
this.state = {
initialPosition: {
latitude: 0,
longitude: 0,
latitudeDelta: 0,
longitudeDelta: 0,
},
};
}
componentDidMount() {
const { navigation } = this.props;
Geolocation.getCurrentPosition((info) => {
let lat = info.coords.latitude;
let long = info.coords.longitude;
console.log(lat);
console.log(long);
var initialRegion = {
latitude: lat,
longitude: long,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
};
this.setState({ initialPosition: initialRegion });
});
}
render() {
const { modalVisible } = this.state;
const { navigate } = this.props.navigation;
// const token_data = token_value();
// console.log("token_homes_2st"+token_data);
return (
<View style={styles.container}>
<MapView
style={styles.map}
initialRegion={this.state.initialPosition}
showsUserLocation={true}
/>
</View>
);
}
}
export default Dashboard;
const styles = StyleSheet.create({
container: {
justifyContent: "center",
fontWeight: "400",
color: "#000",
fontFamily:
"Inter UI,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif",
},
map: {
height: 400,
width: 400,
justifyContent: "flex-end",
alignItems: "center",
},
});
1.npm install #react-native-community/geolocation --save
2.import Geolocation from '#react-native-community/geolocation'; 3.navigator.geolocation.getCurrentPosition => Geolocation.getCurrentPosition
I am trying to get Google Maps to work in React-Native, but I'm only getting this far:
What I have so far
My code:
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';
import MapView from 'react-native-maps';
class Additional extends Component {
render() {
return (
<View style={styles.container}>
<MapView style={styles.map}
region={{
latitude: 4.895168,
longitude: 52.370216,
latitudeDelta: 0.1,
longitudeDelta: 0.1,
}}
>
<MapView.Marker
coordinate={{
latitude: 4.895168,
longitude: 52.370216
}}
title={"titel"}
description={"descriptie"}
/>
</MapView>
</View>
);
}
}
Additional.navigationOptions = {
title: 'Second Screen Title',
};
const styles = StyleSheet.create({
container: {
flex: 1,
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
justifyContent: 'flex-end',
alignItems: 'center',
},
map: {
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0
},
});
export default Additional;
I have followed this tutorial for the api key and adding google maps:
Tutorial
This is my second page, the other one page is using a weather-api.
But according to the live-debugger nothing is conflicting.
Does anyone know what's going on? Thanks!
Edit/additional information:
I have activated my API on the google-api webpage.
Edit/additional information:
My androidmanifest
I was missing a bunch of permissions:
<permission android:name="com.shop.shoppinglist.permission.MAPS_RECEIVE"
android:protectionLevel="signature"/>
<uses-permission android:name="com.shop.addtask.permission.MAPS_RECEIVE"/>
<uses-permission
android:name="com.google.android.providers.gsf.permission.READ_GSERVICES"/>