Overlaying or adding a view on top of another : React Native
12,116
First of all, you have to know some rules about react-native views disposition. On iOS overlapping views are presented in the same order specified in render method (if you have two views, the second will be the most visibile). On android, overlapping views, out of bounds, will be cutted off.
Anyway, in your case, you cannot just add an image with height and width. You have to provide the disposition of this one.
I suggest you to add some styles:
{ position: 'absolute',
bottom: 10,
right: 10,
width: 50,
height: 50 }
Using this style your image should be presented on bottom-right corner of the map.
Comments
-
shubhsin almost 2 years
I'm trying to add a
<Image>
over a<MapView>
. Should look something like this -Here is my code -
<MapView mapType='standard' style={styles.map} region={{ latitude: selectedLoc.location.latitude, longitude: selectedLoc.location.longitude, latitudeDelta: 0.005, longitudeDelta: 0.005 }} onRegionChange={() => { } } onRegionChangeComplete={() => { } } showsUserLocation={false} zoomEnabled={false} draggable={false} annotations={[{ longitude: selectedLoc.location.latitude, latitude: selectedLoc.location.longitude, title: selectedLoc.title }]} initialRegion={{ latitude: selectedLoc.location.latitude, longitude: selectedLoc.location.longitude }}> <Image style={{ width: 50, height: 50, }} resizeMode={"contain"} source={{ uri: 'https://unsplash.it/50/50/?random' }} /> </MapView>
I'm not getting any view on top from this code. Please let me know