ReactNative: how to center text?

Question

How to center Text in ReactNative both in horizontal and vertical?

I have an example application in rnplay.org where justifyContent=\"center\" and

Answer 1

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

Answer 2

textAlignVertical: "center"

is the real magic.

Answer 3

Set these styles to image component: { textAlignVertical: "center", textAlign: "center" }

Answer 4

In addition to the use cases mentioned in the other answers:

To center text in the specific use case of a BottomTabNavigator, remember to set showIcon to false (even if you don't have icons in the TabNavigator). Otherwise the text will be pushed toward bottom of Tab.

For example:

const TabNavigator = createBottomTabNavigator({
  Home: HomeScreen,
  Settings: SettingsScreen
}, {
  tabBarOptions: {
    activeTintColor: 'white',
    inactiveTintColor: 'black',
    showIcon: false, //do this
    labelStyle: {
      fontSize: 20,
      textAlign: 'center',
    },
    tabStyle: {
      backgroundColor: 'grey',
      marginTop: 0,
      textAlign: 'center',
      justifyContent: 'center',
      textAlignVertical: "center"
    }
  }