Image inside marker callout is cut React Native

Question

The image inside the Callout in Map View (google map) wont display the whole image.

At first, there is no image displaying in the callout. so I change my code, putting the image inside the . Now the image is present, but I am stuck on showing the whole image to display inside the callout.

return (
    <Marker key={index} coordinate={{latitude: shops.lat, longitude: shops.lng,
    latitudeDelta: 0.007, longitudeDelta: 0.005}} image={require('../assets/images/pin1.png')}
    >
        <Callout style={{height:100, width:100}}>
        <Text>{shops.name}</Text>
        <Text className='bg-sky-100'>
            <Image style={{width:90, height:90}} source={shops.image} />  
        </Text>
        </Callout>
    </Marker>
)

this is the source for the image

image: require('../assets/images/purewater.png'),

Answer 1

This solution works for me.

<Marker key={index} coordinate={{
    latitude: parseFloat(shop.shops.latitude), longitude: parseFloat(shop.shops.longitude),
    latitudeDelta: 0.007, longitudeDelta: 0.005
}}
>
    <Image source={require('../assets/images/pin1.png')} style={{ height: 30, width: 30 }} />
    <Callout style={{ height: 150, width: 160 }}
        onPress={() => navigation.navigate('Shop', { ...shop.shops })}
        onPressOut={() => dispatch(emptyShopData())}
    >
        <Text className='bg-sky-100 h-36 w-36 flex-1 -mt-24 mx-2'>
            <Image resizeMode={'cover'} style={{ width: 150, height: 150 }} 
            src={
                shop.shops.photo !== '' ? 
                PublicBaseURL + 'uploads/' + shop.shops.user_id + '/' + shop.shops.photo
                : PublicBaseURL + 'assets/img/no-image.png'
            } />
        </Text>
        <View className='flex-row'>
            <Text className='font-bold'>{shop.shops.business_name} · </Text>
            <Text className='text-sm text-green-600'>{shop.shops.distance.toFixed(1)} km</Text>
        </View>
        <Text className='italic text-sm'>Tap for more details</Text>
    </Callout>
</Marker>

Basically it needed to be manually adjust to fit your setup. Adding styling for the <Text className='bg-sky-100 h-36 w-36 flex-1 -mt-24 mx-2'> which matches the size of the Callout. And finally, setting style for the image <Image resizeMode={'cover'} style={{ width: 150, height: 150 }} src={...}

Note: i used nativewind for styling

Legend:

h-36 w-36 -mt-24 mx-2 is equivalent to

height: 144px,
width: 144px,
margin-top: -96,
margin-left: 8px,
margin-right: 8px

Answer 2

Try to add the prop resizeMode={'contain'} to your <Image /> and replace the <Text> container by a <View>:

return (
    <Marker key={index} coordinate={{latitude: shops.lat, longitude: shops.lng,
    latitudeDelta: 0.007, longitudeDelta: 0.005}} image={require('../assets/images/pin1.png')}
    >
        <Callout style={{height:100, width:100}}>
        <Text>{shops.name}</Text>
        <View className='bg-sky-100'>
            <Image resizeMode={'contain'} style={{width:90, height:90}} source={shops.image} />  
        </View>
        </Callout>
    </Marker>
)