CODEWITHSUNDEEP
cssreact-nativereact-native-stylesheet
Bryan
Bryan

Reputation: 633

React Native -- how to horizontally center two Text components when expecting them to wrap to a second line?

This post is very close but I do have a different situation: How to Horizontally Center React Native Flexbox Text that Wraps across Multiple Lines

I am trying to style my text like this: enter image description here and in order to get the two different text styles to wrap to a second line like that I read I had to wrap the two of them in a <Text> container like so:

<Text style={textAlign="center"}>
   <Text style={[ {color: colors.mustardYellow, fontSize: 30, textAlign:"center"}, textStyles.Bold]}>Hey! </Text>
   <Text style={[ {color: colors.white, fontWeight: "100", fontSize: 30, textAlign:"center"}]}>How are you feeling today?</Text>
</Text>

This worked and lets the second text components wrap under the first one. HOWEVER, it refuses to center itself horizontally on the second line. I tried adding another container around the greater <text> component container but did not find any success there either. The only way I was able to make it work was with creating 3 separate text components, one for the yellow text, a second for "How are you" on the first line and a final one for the "feeling today?" on the second line which I was able to center horizontally. This is an awful way to do things and I'm sure there is a right way but for the life of me I cannot find it.

Any help would be greatly appreciated!

Upvotes: 3

Views: 1317

Answers (1)

Bruno Eduardo
Bruno Eduardo

Reputation: 1393

On your first Text tag your style prop sould be style={{textAlign: "center"}} instead of style={textAlign="center"}.

Here's an Expo Snack with working code.

Upvotes: 5

Related Questions