The image displayed in marker callout is cut - react-native

Question

In my app, I want to display callout on a user clicks on the marker. I read that there are problems with displaying images in callout and a lot of people suggest placing the image in <Text> component [1,2,3]. For smaller images/icons this solution works, but I want to display one more "bigger" image, and here is an effect:
I don't know why this image has this "top margin" and why it is cut in the half. I was trying a lot of changes in the style of this Image and it's resizeMode but nothing is working. My other images in callout - like this icon on the bottom - had the same problem but adding a bigger size to the component in which there are placed help and everything looks fine. I was trying this solution on this big top image but it isn't working.
I will be grateful for any help and suggestions.
He is the Callout component code:
import { Dimensions, Image, StyleSheet, Text, View } from 'react-native'
import React, { Component } from 'react'
import { FontAwesome } from '#expo/vector-icons'
import PropTypes from 'prop-types'
import { colors } from '../constants/Colors'
const { width, height } = Dimensions.get('screen')
function getSpotDifficulty(spot) {
switch (spot.difficulty) {
case 0:
return 'DLA KAŻDEGO'
case 1:
return 'UMIARKOWANA'
case 2:
return 'DUŻA'
case 3:
return 'TYLKO DLA PROSÓW'
default:
return ' - '
}
}
function getSpotPopularity(spot) {
switch (spot.popularity) {
case 0:
return 'MALE'
case 1:
return 'SREDNIE'
case 2:
return 'DUŻE'
default:
return ' - '
}
}
const WATER_TYPE_FLAT_IC = require('../assets/images/ic_flat.png')
const WATER_TYPE_WAVE_IC = require('../assets/images/ic_wave.png')
const DIFFICULTY_EASY_IC = require('../assets/images/ic_flag_white_24.png')
const DIFFICULTY_HARD_IC = require('../assets/images/ic_flag_red_24.png')
export default class SpotMarkerCallout extends Component {
render() {
const marker = this.props.marker
const waterTypeIcon = marker.waterType === 0 ? WATER_TYPE_FLAT_IC : WATER_TYPE_WAVE_IC
const difficultyIcon = marker.waterType === 0 ? DIFFICULTY_EASY_IC : DIFFICULTY_HARD_IC
return (
<View style={styles.markerCallout}>
<Text >
<Image style={{flex: 1, height: 200}}
resizeMode={'cover'}
source={require('../assets/images/example_spot_photo.jpg')}/>
</Text>
<View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}>
<View style={styles.markerHeader}>
<Text style={styles.spotNameText}>
{marker.name}
</Text>
<View style={{ flex: 1, justifyContent: 'space-between' }}>
<View style={styles.sportsIconsContainer}>
<View style={styles.singleInfo}>
<Text style={styles.textViewForIcon}>
<Image style={styles.sportIcon}
source={marker.windsurfing ? require('../assets/images/windsurfing_icon.png') : null}/>
</Text>
</View>
<Text style={styles.textViewForIcon}>
<Image style={styles.sportIcon}
source={marker.kitesurfing ? require('../assets/images/kitesurfing_icon.png') : null}/>
</Text>
<Text style={styles.textViewForIcon}>
<Image style={styles.sportIcon}
source={marker.surfing ? require('../assets/images/surfing_icon.png') : null}/>
</Text>
</View>
<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-end' }}>
<View style={[styles.singleInfo, { marginRight: 8 }]}>
<FontAwesome name="star" color={colors.ratingColor} size={10}/>
<Text style={{ marginRight: 4, color: colors.ratingColor }}>{marker.rating}</Text>
</View>
<View style={[styles.singleInfo, { marginRight: 8 }]}>
<FontAwesome name="location-arrow" color={colors.secondaryColor} size={10}/>
<Text style={{ marginRight: 4, color: colors.secondaryColor }}>{marker.distance} km</Text>
</View>
</View>
</View>
</View>
<Text style={styles.descriptionText} numberOfLines={3} ellipsizeMode='tail'>
{marker.description}
</Text>
</View>
<View style={{ flex: 1, flexDirection: 'row', marginVertical: 8 }}>
<View style={{ flex: 1, flexDirection: 'column', marginLeft: 4, }}>
<View style={styles.singleInfo}>
<Text style={styles.infoIconTextView}>
<Image style={styles.infoIcon} source={waterTypeIcon}/>
</Text>
<Text style={styles.infoText}>{marker.waterType === 0 ? 'FLAT' : 'WAVE'}</Text>
</View>
<View style={styles.singleInfo}>
<Text style={styles.infoIconTextView}>
<Image style={styles.infoIcon} source={require('../assets/images/ic_shaka_128.png')}/>
</Text>
<Text style={styles.infoText}>{marker.schools ? ' SZKOLENIA DOSTĘPNE' : 'BRAK SZKOLEN'}</Text>
</View>
</View>
<View style={{ flex: 1, flexDirection: 'column', marginLeft: 16, }}>
<View style={styles.singleInfo}>
<Text style={styles.infoIconTextView}>
<Image style={styles.infoIcon} source={difficultyIcon}/>
</Text>
<Text style={styles.infoText}>{getSpotDifficulty(marker)}</Text>
</View>
<View style={styles.singleInfo}>
<Text style={styles.infoIconTextView}>
<Image style={styles.infoIcon} source={require('../assets/images/ic_peoples.png')}/>
</Text>
<Text style={styles.infoText}>{getSpotPopularity(marker)}</Text>
</View>
</View>
</View>
</View>
)
}
}
SpotMarkerCallout.propTypes = {
marker: PropTypes.object.isRequired,
}
const styles = StyleSheet.create({
markerCallout: {
flex: 1,
width: width * 0.8,
flexDirection: 'column',
paddingLeft: 12,
justifyContent: 'space-around',
},
markerHeader: {
flexDirection: 'row',
justifyContent: 'space-between',
},
spotNameText: {
fontSize: 22,
fontFamily: 'dosis_light',
textTransform: 'uppercase',
alignSelf: 'center',
},
sportsIconsContainer: {
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-end',
alignItems: 'center',
marginRight: 8,
},
singleInfo: {
flexDirection: 'row',
alignItems: 'center',
},
infoIcon: {
height: 18,
width: 18,
justifyContent: 'center',
alignItems: 'center',
},
infoIconTextView: {
height: 24,
justifyContent: 'center',
alignItems: 'center',
},
descriptionText: {
fontSize: 12,
color: colors.textBlackSecondaryColor,
paddingTop: 5,
},
sportIcon: {
height: 24,
width: 24,
},
textViewForIcon: {
height: 32,
},
infoText: {
fontSize: 10,
paddingLeft: 8,
justifyContent: 'center',
alignSelf: 'center',
},
})
And here is the code of usage:
<MapView.Callout onPress={() => this.props.navigation.navigate('SpotInfo', { chosenSpot: spot })}>
<TouchableHighlight>
<SpotMarkerCallout
marker={spot}/>
</TouchableHighlight>
</MapView.Callout>
</Marker>

Answer 1

i have notices you are using component change that to view
like
const newWidth = Dimensions.get('window').width
<View style={{ width: newWidth * 0.18, height: newWidth * 0.18 }}>
<Image style={{ width: newWidth * 0.18, height: newWidth * 0.18 }} source={require('your image path')} />
</View>
newWidth * 0.18 is the 18% width is the screen, change 0.18 to your desired percentage