React Native Text component will not center inside a View component

Question

Hi I think this should be simple, but I cannot get it to work. Seems like no matter what I do, I cannot get the text component to center horizontally inside the view. I have tried using alignItems:center, justifyContent:center, alignSelf:center, textAlign:center... nothing works. I can get it to center vertically, but not horizontally. Whyyyyy dear lord?

<Animated.View style={[styles.titleContainer]}>
    <Text style={styles.title}>App logo here</Text>
</Animated.View>

How can I get the text to center both vertically and horizontally?

Here is my CSS:

titleContainer: {
    flex: 1,
    marginTop:30,
    marginBottom:30,
    justifyContent:'center'
},
title:{
    color:'white',
    textAlign:'center',
    alignSelf:'center'
},

This is my result:

Solution 1

Try this... Here's a working demo

  container: {
    flex: 1,
    marginTop: 30,
    marginBottom: 30,
    justifyContent: 'center',
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 28,
    textAlign: 'center',
  },

Solution 2

For anyone looking for a minimal version for the simplest case:

<View style={styles.containerView}>
  <Text style={styles.centeredText}>I'm centered</Text>
</View>

const styles = StyleSheet.create({
  containerView: {
    justifyContent: 'center'
  }
  centeredText: {
    alignSelf: 'center'
  }
})

Align Self

Solution 3

Add justifyContent: 'center' to the container view. React native works different to react. So alignItems not working, instead justifyContent works.

Solution 4

use textAlign: 'center' property to center text

use alignSelf:'center' property to center View

<View style={{alignSelf:'center'}}>

      <Text style={{textAlign:'center'}}>I'm centered</Text>

</View>

Solution 5

set in main View style flex:1 and in Text set textAlign:'center'

View more solutions