Failed prop type: Invalid props.style key 'textAlign' supplied to 'View'

user_8902174 0
Viewed 3609

I'm new with react-native, and I got this warning:

 Warning:Failed prop type: Invalid props.style key 'textAlign' supplied to 'View'
 Bad object:{
             "textAlign":"center",....}

what might be the problem, the app isn't crash but I just wondering how to solve this warning...

this is the code after stack trace:

 <View style={styles.botTextView}>
 .....
 botTextView: {
textAlign: 'center',
position: 'relative',
flex: 1,
top: 8,
flexDirection: 'column',
alignItems: 'center',
alignSelf: 'center',
justifyContent: 'center',
 }

Thank you

react-native reactjs javascript
1 Answers

If you check React-native documentation : https://facebook.github.io/react-native/docs/view-style-props

You will see that the view component does not have a textAlign style prop. Consider using Text component if you want to display text on a react-native app.

Edit :

Your text was centered because of those two lines:

alignItems: 'center'       //centers the View's children on the y-axis
justifyContent: 'center'   //centers the View's children on the x-axis

But if you want to center a text on the x-axis without centering other children you can try the following:

<View style={styles.botView}>
    <Text style={styles.botText}>
        //Text
    </Text>
</View>
.....
botView: {
    position: 'relative',
    flex: 1,
    top: 8,
    flexDirection: 'column',
    alignItems: 'center',
},
botText: {
    textAlign: 'center',
},
user_63158520
Related