React-native: Border can't be applied to <Text> in nested <Text> component

[messense]

Description

I have a view like:

<Text>
  <Text>text 1</Text>
  <Text style={{borderWidth: 1, borderColor: '#4285f4'}}>text 2</Text>
</Text>

I want text 2 to have a border while the whole text in same line or wrap to next line if too long.

Expected result

Real result

The border didn't show up.

I tried to use View to wrap them instead of nested Text, border works fine but it can't be layouted the way we want.

Additional Information

• React Native version: 0.30
• Platform: Only tested on iOS
• Operating System: macOS

[brentvatne]

Confirmed this issue on 0.36. It looks like on Android, Text borders don't work even when not nested.

For future reference, please test with the latest React Native version always. 0.30 is at this point I believe 4 months or more old, lots can change in that time :)

[afilp]

+1

With v0.32, some style properties on nested Text do nothing. For example, I added "padding" and "margin" and nothing happens (while "color" and "background color" works).

[chitezh]

Any fix for this yet?

[rheilgm]

+1

[neilzhengzx]

+1 verssion 0.47.1 in ios. android not have this problem.

[stobasan]

The solution that worked for me was to change the outer container component to View.

<View>
      <Text style={styles.textWithBorder}>Lorem ipsum</Text>
      <Text style={styles.textWithBorder}>Foo Bar</Text>
</View>

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[tofishes]

unsolved bug in ios with 0.50 version

[sinhpn92]

i have same problem too

[rogchap]

We're trying to add borderRadius which also has no effect.

[mcarlucci]

It appears no styles work for nested <Text> except for font and font color related css attributes.

[hramos]

Nesting a Text component within a parent Text component is not supported. It just happened to work on iOS, but like Brent mentioned earlier this is not supported by Android. Going forward, iOS will no longer allow nesting Text components.

[tbergq]

We have an issue regarding this with nested text

We would want the icon and size m2 to be wrapped on the same line as One-Bedrom Apartament with Terrace

I guess the only solution for this is to nest text. But then we can no longer style the m2, so the number two appears on the bottom, the alignment of the icon is off.

Now we have

<View style={styles.container}>
      <Text style={styles.title}>{title} </Text>
      <TextIcon style={styles.icon}>&#xe0a6;</TextIcon>
      <Text style={styles.sizeText}> {roomSize}m</Text>
      <Text style={styles.supText}>2</Text>
    </View>

change to this breaks styling of styles.icon and styles.supText.

<View style={styles.container}>
      <Text>
        <Text style={styles.title}>{title} </Text>
        <TextIcon style={styles.icon}>&#xe0a6;</TextIcon>
        <Text style={styles.sizeText}> {roomSize}m</Text>
        <Text style={styles.supText}>2</Text>
      </Text>
    </View>

@hramos Any suggestions how to solve this?

[hramos]

I don't have a suggestion other than wrapping this inside a Text is not supported anymore. I know it can be frustrating for people who were depending on this behavior. It was not meant to be used in this manner and moving away from this will allow us to solve more pressing issues with layout. Thanks for your understanding.

[rogchap]

@tbergq my solution (which is not ideal, but works for small amounts of text) is to tokenize every word; I.e. .split(' ') and then wrap each word in a View. Now you can use flex-wrap to display your sentence plus any icons etc.

Please note that this will create a lot of extra Views, which may cause perf issues; but in your use case it should be fine. You could always convert your view to an image if needed.

[Spoterest]

No luck, the nested issue still exist on iOS with react-native version 0.55.

[diegolmello]

@hramos Any suggestions on how to implement markdown if nested Texts are not supported?
I'm using on my app and it's working fine, but I'm looking for border-radius for mentions.

See last message. diego.mello2 should have border radius.

Is there a better option for implementing markdown than nesting tokens on a root <Text>?
Thanks.

[BettyJJ]

Nesting a Text component within a parent Text component is not supported. It just happened to work on iOS, but like Brent mentioned earlier this is not supported by Android. Going forward, iOS will no longer allow nesting Text components.

This is not what the doc says. https://facebook.github.io/react-native/docs/text The doc even gives specific examples about nested texts and how to use them.

[BettyJJ]

Guys, I found a feature request here: https://react-native.canny.io/feature-requests/p/richer-styling-options-for-nested-text
Please vote if you also need this improved.

[diegolmello]

@BettyJJ I don't think Canny is still relevant.