positionreact-nativeflexboxabsolute

React Native absolute positioning horizontal centre


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',
  },

Solution

  • 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>