React Native absolute positioning horizontal centre

Question

It seems that with position:absolute in use an element cannot be centred using justifyContent or alignItems. There's a workaround to use marginLeft but does not display the same for all devices even using dimensions to detect height and width of device.

  bottom: {
    position: 'absolute',
    justifyContent: 'center',
    alignItems: 'center',
    top: height*0.93,
    marginLeft: width*0.18,
  },
  bottomNav: {
    flexDirection: 'row',
  },

Does your element has static width or dynamic? – Ivan Chernykh May 19 '16 at 08:22 — Ivan Chernykh, May 19 '16 at 08:22

score 293 · Accepted Answer · edited Jul 13 '18 at 14:23

293

Wrap the child you want centered in a View and make the View absolute.

<View style={{position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center'}}>
  <Text>Centered text</Text>
</View>

edited Jul 13 '18 at 14:23

David Schumann

9,116
6
56
78

answered Dec 06 '16 at 20:36

Stephen Horvath

3,848
2
20
28

30

Very useful. There's a nice shortcut for those style params hanging off of `StyleSheet` object: `...StyleSheet.absoluteFillObject`. see https://github.com/facebook/react-native/blob/master/Libraries/StyleSheet/StyleSheet.js#L29 – wkw Mar 04 '17 at 19:35
2

Doesn't this make the `View` take up ALL clickable space on the screen? E.g if I had a component underneath this absolutely positioned `View`, I wouldn't be able to register clicks on it. – James111 Jan 16 '18 at 04:49
11

@James111 It looks like you can add `pointerEvents='box-none'` to pass the touches through the view: https://github.com/facebook/react-native/issues/12360 – Stephen Horvath Jan 17 '18 at 10:30
This method recovers the entire image if the text has a background color :/ – DevMultiTech Sep 26 '18 at 08:10
@codewise yep, there is a new way to do it, check out my answer – David Noreña Jan 02 '19 at 14:13
I used this approach to put a ```LoadIndicator``` on top of a component. I also added ```backgroundColor: '#000000AA'``` to the style of the wrapping ```View```. That way, you get a nice grayed look while things are loading. – LGenzelis Nov 27 '19 at 15:46

David Noreña · Answer 2 · 2019-01-22T18:58:30.687

89

If you want to center one element itself you could use alignSelf:

logoImg: {
    position: 'absolute',
    alignSelf: 'center',
    bottom: '-5%'
}

This is an example (Note the logo parent is a view with position: relative)

edited Jan 22 '19 at 18:58

answered Jul 17 '18 at 21:39

David Noreña

2,908
23
41

1

alignSelf didn't work for me (it did nothing, in fact). Could you add a little bit more context to the code? – johnny kehr Apr 08 '19 at 22:51
1

You need the parent to be display: 'flex' @wilc0 – Travis Delly Sep 19 '19 at 19:06
also works with: ` Centered text ` – Charitha Goonewardena Feb 03 '21 at 03:17
1

alignSelf worked fine for me, bottom: -5 was not needed. – Lalit Sharma Feb 09 '21 at 16:37
the -5 its because as the image posted as an example, I wanted my circle to be "floating between both layouts :) @LalitSharma – David Noreña Feb 09 '21 at 19:21

score 13 · Answer 3 · edited Jul 13 '18 at 14:23

13

You can center absolute items by providing the left property with the width of the device divided by two and subtracting out half of the element you'd like to center's width.

For example, your style might look something like this.

bottom: {
    position: 'absolute',
    left: (Dimensions.get('window').width / 2) - 25,
    top: height*0.93,
}

edited Jul 13 '18 at 14:23

David Schumann

9,116
6
56
78

answered Feb 12 '17 at 00:27

Corey

638
7
10

1

this only works if you know the elements width beforehand – Adamski Dec 20 '17 at 12:31
1

If you don't know the element doesn't have a known width you can use onLayout to get the elements width `measure(layout) { const { width } = layout; this.setState({ width: width }) } ... { this.measure(event.nativeEvent.layout) }} ... ` – Corey Dec 20 '17 at 21:18

score 8 · Answer 4 · answered May 17 '19 at 04:32

8

create a full-width View with alignItems: "center" then insert desired children inside.

import React from "react";
import {View} from "react-native";

export default class AbsoluteComponent extends React.Component {
  render(){
    return(
     <View style={{position: "absolute", left: 0, right: 0, alignItems: "center"}}>
      {this.props.children}
     </View>    
    )
  }
}

you can add properties like bottom: 30 for bottom aligned component.

answered May 17 '19 at 04:32

masbossun

151
3
4

This has to be accepted as the correct answer, this works for pretty much every situation. – aprilmintacpineda Nov 17 '20 at 09:30

score 2 · Answer 5 · edited Apr 14 '19 at 22:05

2

It's very simple really. Use percentage for width and left properties. For example:

logo : {
  position: 'absolute',
  top : 50,
  left: '30%',
  zIndex: 1,
  width: '40%',
  height: 150,
}

Whatever width is, left equals (100% - width)/2

edited Apr 14 '19 at 22:05

Carlos Cavero

2,604
5
15
31

answered Apr 14 '19 at 19:12

user11360198

21
1

Mahdi Bashirpour · Answer 6 · 2019-10-30T13:18:57.720

2

<View style={{...StyleSheet.absoluteFillObject, justifyContent: 'center', alignItems: 'center'}}>
  <Text>CENTERD TEXT</Text>
</View>

And add this

import {StyleSheet} from 'react-native';

edited Oct 30 '19 at 13:18

answered Oct 30 '19 at 12:48

Mahdi Bashirpour

9,916
5
70
101

Short, code-only answers are often frowned upon on Stack Overflow. In order to avoid being flagged as 'low quality', consider adding some explanatory text. – Adrian Mole Oct 30 '19 at 13:06

score 1 · Answer 7 · edited Jul 13 '18 at 14:23

1

You can try the code

<View
    style={{
      alignItems: 'center',
      justifyContent: 'center'
    }}
  >
    <View
      style={{
        position: 'absolute',
        margin: 'auto',
        width: 50,
        height: 50
      }}
    />
  </View>

edited Jul 13 '18 at 14:23

David Schumann

9,116
6
56
78

answered Jul 10 '18 at 16:53

Eris Mabu

91
1
3

Haha. This is working for me, However, we need add ` style={{ alignItems: 'center', justifyContent: 'center', flexDirection: 'row' }} ` – babie Aug 29 '19 at 08:27

score 0 · Answer 8 · answered Mar 11 '21 at 01:32

Well, I would use this way to center absolute Views

  <View style={{ position: 'absolute', left: '50%', marginLeft: -22 }}>
           <View style={{ position: 'absolute', width: 44, height: 44}}>
             <Ionicons name="close" color="#4775f2" size={32} />
           </View>
   </View>

Notice that In the View which is wrapping the Icon container I'm using left: 50% and the marginLeft is special because you need to put exactly the middle width of the child an turn it negative which in this case is 44 as you can see above, and that's it

React Native absolute positioning horizontal centre

8 Answers8

Linked