Image inside marker callout is cut React Native

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'),

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 adjusted 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;