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>
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>
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>
);
}
}