Estou estudando reacti native e estou tentando mostrar uma imagem em um local no mapa. Quando ajusto o width e o height da imagem, ela acaba sendo "cortada" quando fica maior que 40px. Estou usando o expo.
Componente 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;
Imagem com 40x40px:
Imagem com 60x60px