Skip to content

Border can't be applied to nested <Text> components #45925

New issue
New issue
Open
Open
Border can't be applied to nested <Text> components#45925
Labels
Needs: Triage 🔍Newer Patch Available

Description

@mhuggins
mhuggins
opened on Aug 7, 2024

Description

I'm rendering several Text components wrapped inside a parent Text component, like so:

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

I'm expecting "text 2" to have a red border, rendering inline along with "text 1". However, the border is not rendered.

If I change the container from Text to View, the border renders properly. However, there are scenarios where this is not feasible (e.g.: rendering inside a TextInput.

This issue was previously opened here and, arguably, wrongfully closed. The reason it was marked as closed was:

Nesting a Text component within a parent Text component is not supported.

However, the documentation clearly states the opposite:

Nested text

Both Android and iOS allow you to display formatted text by annotating ranges of a string with specific formatting like bold or colored text (NSAttributedString on iOS, SpannableString on Android). In practice, this is very tedious. For React Native, we decided to use web paradigm for this where you can nest text to achieve the same effect.

Steps to reproduce

Nest one Text element inside another, applying a border width/color to the nested element.

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

React Native Version

0.74.3

Affected Platforms

Runtime - Android, Runtime - iOS

Output of npx react-native info

System:
  OS: macOS 14.4.1
  CPU: (8) arm64 Apple M1
  Memory: 72.53 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.5.1
    path: /opt/homebrew/bin/node
  Yarn:
    version: 1.22.19
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.8.2
    path: /opt/homebrew/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods: Not Found
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.5
      - iOS 17.5
      - macOS 14.5
      - tvOS 17.5
      - visionOS 1.2
      - watchOS 10.5
  Android SDK: Not Found
IDEs:
  Android Studio: 2023.1 AI-231.9392.1.2311.11330709
  Xcode:
    version: 15.4/15F31d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 22.0.1
    path: /opt/homebrew/opt/openjdk/bin/javac
  Ruby:
    version: 3.3.3
    path: /Users/mhuggins/.rvm/rubies/ruby-3.3.3/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.74.3
    wanted: 0.74.3
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found



### Stacktrace or Logs

```text
N/A

Reproducer

https://snack.expo.dev/@huggie/nested-text-border-bug

Screenshots and Videos

No response

Activity

  1. mhuggins
    added
    Needs: Triage 🔍
    on Aug 7, 2024

  2. react-native-bot commented on Aug 7, 2024

    @react-native-bot
    react-native-bot
    on Aug 7, 2024
    Collaborator
    ⚠️ Newer Version of React Native is Available!
    ℹ️ You are on a supported minor version, but it looks like there's a newer patch available - 0.74.5. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.
  3. react-native-bot
    added
    Newer Patch Available
    on Aug 7, 2024

  4. react-native-bot commented on Aug 7, 2024

    @react-native-bot
    react-native-bot
    on Aug 7, 2024
    Collaborator
    ⚠️ Newer Version of React Native is Available!
    ℹ️ You are on a supported minor version, but it looks like there's a newer patch available - undefined. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

  5. zdpdsy commented on Aug 7, 2024

    @zdpdsy
    zdpdsy
    on Aug 7, 2024

    +1

  6. arasrezaei commented on Aug 9, 2024

    @arasrezaei
    arasrezaei
    on Aug 9, 2024

    same

  7. Rexogamer commented on Jan 13, 2025

    @Rexogamer
    Rexogamer
    on Jan 13, 2025
    Contributor

    as far as I can tell, this (or something similar) also affects properties like padding for nested Text components. can reproduce with RN v0.76

  8. see2ever commented on Jan 17, 2025

    @see2ever
    see2ever
    on Jan 17, 2025

    +1, also not working in the TextInput 

    <TextInput>
  <Text>text 1</Text>
  <Text style={{ borderWidth: 1, borderColor: 'red' }}>text 2</Text>
</TextInput>

  9. Rexogamer commented on Feb 7, 2025

    @Rexogamer
    Rexogamer
    on Feb 7, 2025
    Contributor

    @cortinico could someone on the team take a look?

  10. cortinico commented on Feb 7, 2025

    @cortinico
    cortinico
    on Feb 7, 2025
    Contributor

    Is this happening on both Old and New Arch?

  11. arasrezaei commented on Feb 7, 2025

    @arasrezaei
    arasrezaei
    on Feb 7, 2025

    Is this happening on both Old and New Arch?

    Yes, also border radius is not working

  12. nandorojo commented on Jul 11, 2025

    @nandorojo
    nandorojo
    on Jul 11, 2025

    Is this happening on both Old and New Arch?

    Confirming new arch borderRadius doesn't work for nested text for me. Works fine if the text isn't nested!

  13. react-native-bot commented on Jan 8, 2026

    @react-native-bot
    react-native-bot
    on Jan 8, 2026
    Collaborator

    This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

  14. react-native-bot
    added
    StaleThere has been a lack of activity on this issue and it may be closed soon.
    on Jan 8, 2026

  15. Rexogamer commented on Jan 8, 2026

    @Rexogamer
    Rexogamer
    on Jan 8, 2026
    Contributor

    still an issue

  16. react-native-bot
    removed
    StaleThere has been a lack of activity on this issue and it may be closed soon.
    on Jan 9, 2026

  17. Rexogamer commented on Jun 3, 2026

    @Rexogamer
    Rexogamer
    on Jun 3, 2026
    Contributor

    @cortinico apologies for the second ping but this is still an issue - I'm assuming the old arch isn't a concern anymore?

  18. cortinico commented on Jun 3, 2026

    @cortinico
    cortinico
    on Jun 3, 2026
    Contributor

    @cortinico apologies for the second ping but this is still an issue - I'm assuming the old arch isn't a concern anymore?

    Yeah old arch is not a concern anymore.

    I don't have capacity to look into this, someone would have to look into it and potentially send us a PR. Can't promise we'll merge it though but we can take a look

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Needs: Triage 🔍Newer Patch Available

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions