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',
},
This question is related to
position
react-native
flexbox
absolute
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
You can try the code
<View
style={{
alignItems: 'center',
justifyContent: 'center'
}}
>
<View
style={{
position: 'absolute',
margin: 'auto',
width: 50,
height: 50
}}
/>
</View>
<View style={{...StyleSheet.absoluteFillObject, justifyContent: 'center', alignItems: 'center'}}>
<Text>CENTERD TEXT</Text>
</View>
And add this
import {StyleSheet} from 'react-native';
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.
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,
}
Source: Stackoverflow.com