React Native Text Component Will Not Be Inside View Component

Question

Hi, I think it should be easy, but I can't get it to work. It seems that no matter what I do, I can not get the text component to center horizontally inside the view. I tried using alignItems: center, justifyContent: center, alignSelf: center, textAlign: center ... nothing works. I can make it center vertically, but not horizontally. Why are you dear sir?

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

How can I get the text in the 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:

Answer 1

...

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

Answer 2

flexDirection:'column' :

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

Answer 3

For those who are looking for the minimum version for the simplest case:

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

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