Search code examples
cssreact-nativereact-native-stylesheet

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!

Solution

  • 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.