Second line of the Text doesn't render in the center of the row

Question

I have problem with styling of the Text, I have two lines of the Text, the first line of the text appears correct on the center of the row, but second line of the code, is not in the center. How to fix that?

<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', flexDirection: 'row' }}>
  <Text
    style={{ marginLeft: 5, fontWeight: '500', fontFamily: 'Arial', fontSize: ratio * 14, color: '#3c3c3c' }}
    numberOfLines={2} > {title}
  </Text>
</View>

Answer 1

You need to use textAlign:'center',

   <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        flexDirection: "row"
      }}
    >
      <Text
        style={{
          textAlign:'center', //Added
          marginLeft: 5,
          fontWeight: "500",
          fontFamily: "Arial",
          fontSize: ratio * 14,
          color: "#3c3c3c"
        }}
        numberOfLines={2}
      >
        {title}
      </Text>
    </View>

Answer 2

You just need to add textAlign in Text component

style={{textAlign: 'center', marginLeft: 5, fontWeight:'500',fontFamily: 'Arial', fontSize: ratio * 14, color:'#3c3c3c'}}
                        numberOfLines={2} >

Check snack demo here : https://snack.expo.io/SJyEEwM3b

import React, { Component } from 'react';
import { Text, View } from 'react-native';


export default class App extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', flexDirection: 'row' }}>
        <Text
          style={{ textAlign: 'center', marginLeft: 5, fontWeight: '500', fontFamily: 'Arial', fontSize: 1 * 14, color: '#3c3c3c' }}
          numberOfLines={2} > some text some text some text some text some text some text some text some text
                    </Text>
      </View>
    );
  }
}