CODEWITHSUNDEEP
react-nativegoogle-maps-markerscallouts
Kasun Dissanayake
Kasun Dissanayake

Reputation: 5

Image does not show in my react-native-maps call out component. It only shows an empty rectangle?

I want to add Images to my call out component in react-native-maps-markers. But it only shows empty rectangles. How can I fix this? Without putting image component inside a Text component. Because then its harder to align images.

    return (
        <View style={styles.container} >
        <MapView
         
         Provider= {PROVIDER_GOOGLE}
         ref={map => this._map = map}
         showsUserLocation={true}
         style={styles.map}
         initialRegion={this.state.initialPosition}
         customMapStyle={mapStyle}>

            {
                this.state.coordinates.map((marker, index) => (
                    <Marker
                    key={marker.name}
                    ref={ref => this.state.markers[index] = ref}
                    //onPress={() => this.onMarkerPressed(marker, index)}
                    coordinate={{latitude: marker.latitude, longitude: marker.longitude}}
                    title={'Safe Parking'}>
                    
                    <Image 
                    source={require('../icons/park.jpg')}
                    style={styles.icon}/>
                    <Callout>
                        <Image 
                        source={marker.image}
                        style={styles.image}
                        />  
                    </Callout>        
                    </Marker>
                ))
            }

       </MapView>
       
       </View>
    );
}
};

Upvotes: 0

Views: 412

Answers (1)

BloodyMonkey
BloodyMonkey

Reputation: 1634

Have you set an height and width to your image ?

If yes, try to import your image instead of require like

import parkIcon from '../icons/park.jpg'

<Image source={parkIcon}

Upvotes: 0

Related Questions