Overlaying or adding a view on top of another : React Native

Question

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

Answer 1

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.