React Native - Can't place icon on top of image

Question

I'm trying to place an icon over an image, but all it's doing is pushing the image down the page.

Here's what it currently looks like:

I'm trying to place the blue back arrow on top of that image as you can see.

Here's what my markup looks like:

<ScrollView style={ styles.container }>
  <View style={ styles.coverImageContainer }>
    <Image
      style={ styles.coverImage }
      source={ require('./img.jpg') }
    >
      <View>
        <Ionicons name="ios-arrow-back" color="#4F8EF7" size={25} />
      </View>
    </Image>
  </View>
  ...

And here are my styles:

container: {
  backgroundColor: '#f9f9f9',
  flex: 1,
},

coverImageContainer: {
  backgroundColor: '#000',
},

coverImage: {
  width: null,
  height: 170,
  resizeMode: 'cover',
  opacity: 0.7,
  flex: 1,
},

What am I doing wrong?

If I get rid of the icon, the image displays how I want it to, but I would like the back button icon on top of it too. Here's what it looks like without the icon:

Answer 1

Position Icon component absolutely.

<Ionicons name="ios-arrow-back" color="#4F8EF7" size={25} style={{ position: 'absolute', top: 30, left: 10 }} />