-1
I’m studying reacti Active and I’m trying to show an image in a location on the map. When I adjust the width and height of the image, it ends up being "cut" when it is larger than 40px. I am using the expo.
Component Main.js
import React, {useState, useEffect} from 'react';
import {StyleSheet, Image} from 'react-native';
import MapView, {Marker} from 'react-native-maps';
import {requestPermissionsAsync, getCurrentPositionAsync} from 'expo-location'
function Main(){
const [currentRegion, setCurrentRegion]= useState(null);
useEffect(() => {
async function loadInitialPosition(){
const {granted} = await requestPermissionsAsync();
if (granted) {
const {coords} = await getCurrentPositionAsync({
enableHighAccuracy: true
});
const {latitude, longitude} = coords;
setCurrentRegion({
latitude,
longitude,
latitudeDelta: 0.04,
longitudeDelta: 0.04,
})
}
}
loadInitialPosition();
}, []);
if(!currentRegion){
return null;
}
return (
<MapView initialRegion={currentRegion} style={styles.map}>
<Marker coordinate={{latitude: -30.84235, longitude: -53.5582612}}>
<Image style={styles.avatar} source={{ uri: "https://avatars1.githubusercontent.com/u/50212082?s=460&v=4" }}/>
</Marker>
</MapView>
);
}
const styles = StyleSheet.create({
map:{
flex: 2
},
avatar:{
width: 60,
height: 60,
borderRadius: 4,
borderWidth: 4,
borderColor:'#fff'
}
});
export default Main;
Image with 40x40px:
Image with 60x60px
