3

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:

enter image description here

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:

enter image description here

Thomas
  • 2,356
  • 7
  • 23
  • 59

2 Answers2

12

Position Icon component absolutely.

<Ionicons name="ios-arrow-back" color="#4F8EF7" size={25} style={{ position: 'absolute', top: 30, left: 10 }} />
Andreyco
  • 22,476
  • 5
  • 61
  • 65
1

The StatusBar is always visible, even if you use position:'absolute'; zIndex: 99999 on back button, the are 2 ways:

  1. Remove status bar by adding <StatusBar hidden={true}/> inside a render
  2. Add marginTop: 22 for moving arrow a little downward
Medet Tleukabiluly
  • 11,662
  • 3
  • 34
  • 69
  • I would like the image to remain behind the status bar as it's doing in my updated question. That's part of the design, I just don't want it to be pushed down when I add an icon on top of it. Please see my updated question – Thomas Jun 21 '17 at 20:13
  • 1
    @Thomas got it, i misunderstood the question, anyway Andreyco answer should help – Medet Tleukabiluly Jun 21 '17 at 20:22