Question 269606 in React native Question posted in
The official React Native documentation can be found here.

Image inside marker callout is cut React Native

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

imagecut

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

2

Answers


  1. Chosen as BEST ANSWER
    0

    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

    final outcome


  2. 0

    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>
)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search