3

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!

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
Bryan
  • 623
  • 1
  • 6
  • 23
  • 1
    Check out this Snack, it seems to work for me https://snack.expo.io/rkrLCbvLN . If this is not what you're looking for let me know. – Bruno Eduardo Mar 01 '19 at 19:56
  • @BrunoEduardo That worked great! I see now how I screwed up the textAlign: "center" on my initial text container. I've been relying on the linter to catch those a lot of the time and I guess it missed that. Thanks for the help! – Bryan Mar 01 '19 at 20:09
  • I'll add it as an answer then, for future readers. – Bruno Eduardo Mar 01 '19 at 20:26
  • 1
    @Bryan if you find it's wider than desired [working, with the double brackets], consider making a narrower text box or adding a bit of padding/margin to the style. Easy mistake to make.. – Rachel Gallen Mar 01 '19 at 21:01
  • @RachelGallen Thanks, I think I have the right width for this, but I'll certainly keep that in mind or the future – Bryan Mar 04 '19 at 14:53

1 Answers1

5

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.

Bruno Eduardo
  • 1,313
  • 9
  • 16