ReactNative: how to center text?

From headline' style remove height, justifyContent and alignItems. It will center the text vertically. Add textAlign: 'center' and it will center the text horizontally.

  headline: {    textAlign: 'center', // <-- the magic    fontWeight: 'bold',    fontSize: 18,    marginTop: 0,    width: 200,    backgroundColor: 'yellow',  }

Already answered but I'd like to add a bit more on the topic and different ways to do it depending on your use case.

You can add adjustsFontSizeToFit={true} (currently undocumented) to Text Component to auto adjust the size inside a parent node.

  <Text adjustsFontSizeToFit={true} numberOfLines={1}>Hiiiz</Text>

You can also add the following in your Text Component:

<Text style={{textAlignVertical: "center",textAlign: "center",}}>Hiiiz</Text>

Or you can add the following into the parent of the Text component:

<View style={{flex:1,justifyContent: "center",alignItems: "center"}}>     <Text>Hiiiz</Text></View>

or both

 <View style={{flex:1,justifyContent: "center",alignItems: "center"}}>     <Text style={{textAlignVertical: "center",textAlign: "center",}}>Hiiiz</Text></View>

or all three

 <View style={{flex:1,justifyContent: "center",alignItems: "center"}}>     <Text adjustsFontSizeToFit={true}            numberOfLines={1}            style={{textAlignVertical: "center",textAlign: "center",}}>Hiiiz</Text></View>

It all depends on what you're doing. You can also checkout my full blog post on the topic

https://medium.com/@vygaio/how-to-auto-adjust-text-font-size-to-fit-into-a-nodes-width-in-react-native-9f7d1d68305b

textAlignVertical: "center"

is the real magic.