react-native: Border can't be applied to in nested component
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
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Reactions: 3
- Comments: 20 (4 by maintainers)
@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 aView. 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.
Any fix for this yet?
No luck, the nested issue still exist on iOS with react-native version 0.55.
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.
i have same problem too