4

How to align close button icon on top right corner of ImageBackground component in react-native

Code: 

<ImageBackground 
  source={require('../images/AppIntro/1.png')} 
  style={{ width: '100%', height: 150 }} 
>
  <TouchableOpacity>
    <Icon name="md-close" style={styles.closeButton} />
  </TouchableOpacity>
</ImageBackground>

Edit: i am trying to create a modal(pop up) which will be displayed on button click, so absolute position may not work.

Vinit Kadam
  • 1,019
  • 1
  • 8
  • 8
  • 1
    Have you had a look at the docs for applying styles - https://facebook.github.io/react-native/docs/style.html and the docs for flex box - https://facebook.github.io/react-native/docs/flexbox.html ? That would be the best place to look to learn how to do what you are asking. – Rob Walker Feb 02 '18 at 21:28

3 Answers3

6
<View>
    <Image
       source={require('../images/AppIntro/1.png')} 
       style={{ 
           width: '100%', 
           height: 150 
       }}/>
    <Icon 
       name="md-close" 
       style={{
           position: 'absolute',
           left: 0,
           right: 0,
           top: 0,
           bottom: 0
        }}/>
</View>

The above code snipped will put your icon on top on the image horizontally and vertically centered of the image. You can adjust the top, left, right, and bottom and move it anywhere on top the of the image.

Saajan
  • 670
  • 1
  • 9
  • 20
Hisham Mubarak
  • 1,559
  • 3
  • 22
  • 28
  • Actually I am trying to create a modal(pop up) so position: absolute may not work in my case. Although i think i can just align the close button on the bottom center which which will look nice as well i think. – Vinit Kadam Feb 03 '18 at 18:37
  • I have no in depth knowledge of this, but the docs on positioning says that value is relational to the next parent element, which means it depends it depends on the parent View, so will it affect if its modal or not? – Hisham Mubarak Feb 03 '18 at 18:50
  • 1
    Here, you have wrapped Image and icon inside View, If View is not there it will not work, can you please tell me the significance of outside view ? – Vasanth Jun 23 '21 at 07:18
  • The view is the parent view for both. The position:absolute value of the icon will be related to dimensions of the parent View. So if you did not provide a parent view, the icon will be at the center of the top level parent. Here, the View will be the size of the Image, then the Icon will position absolute on the View, which is effectively on the dimension of the image – Hisham Mubarak Jun 24 '21 at 18:47
3
<View>
    <Image
        source={require('../images/AppIntro/1.png')} 
        style={{ width: '100%', height: 150 }}
    />
    <Icon name="md-close" 
          style={{
                position: 'absolute',
                right: 5,
                top: 5,
          }} />
</View>

This working right side top corner..

rajeshkumar r
  • 31
  • 2
0

You need to use position: 'absolute' to align children anywhere you want with in parent. In your case you need to use top, and right along with absolute position. Consider following example:

<Parent>
  <Child style={{position: 'absolute', top: 5, right: 5}}>
    {...}
  </Child>
</Parent>

You can read more about position here

Pir Shukarullah Shah
  • 4,124
  • 2
  • 22
  • 42