Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Border can't be applied to <Text> in nested <Text> component

See original GitHub issue

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

Issue Analytics

State:
Created 7 years ago
Reactions:3
Comments:20 (4 by maintainers)

Top GitHub Comments

5reactions

rogchapcommented, Mar 17, 2018

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

5reactions

chitezhcommented, Apr 15, 2017

Any fix for this yet?

Top Results From Across the Web

react native - How to add border to nested text component?

I tried to just add borderWidth and borderColor etc. They work by themselves but not in nested text component. <Text style={styles.text}> <Text> ...

Text Override doesn't work on nested variants with interactive ...

So this is what I have: A Toggle element variant with states for enabled, hover, and active states. I set the interaction on...

Richer styling options for nested <Text> | Voters - React Native

This makes it difficult to style rich text applications where tokens, links, mentions, symbols, or inline sprites need to be styled inside. <Text>....

How to Add Text in Borders Using Basic HTML Elements

Only the top border of each <fieldset> element is kept visible while the remaining edges are transparent since the text of the <legend>...

Rich text element overview - Webflow University

Please note that styling these nested tags will affect elements in any RTE with the same class applied, or any child elements of...