Padding does not apply to Text nested inside another Text (iOS and Android).
Open
Nobody has claimed this yet.
Needs: Triage :mag:
Platform: Android
Platform: iOS
- Dominant language
- C++
- Stars
- 127k
- Forks
- 25.3k
- Avg merge
- 1d 23h
- Merged PRs (30d)
- 4
Description
Description
When trying to apply padding to a Text nested inside another Text, padding does not work.
Steps to reproduce
- Write some text inside a
Text. - Wrap a portion of the text with another
Text. - Add padding to the nested
Text. You can also add abackgroundColorto better see the padding.
Result: Padding is not applied.
React Native Version
0.81.5
Affected Platforms
Runtime - iOS
Output of npx @react-native-community/cli info
System:
OS: macOS 15.5
CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
Memory: 66.81 MB / 16.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 24.11.0
path: /Users/patosala/.nvm/versions/node/v24.11.0/bin/node
Yarn:
version: 1.22.22
path: /usr/local/bin/yarn
npm:
version: 11.6.1
path: /Users/patosala/.nvm/versions/node/v24.11.0/bin/npm
Watchman: Not Found
Managers:
CocoaPods:
version: 1.15.2
path: /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 24.4
- iOS 18.4
- macOS 15.4
- tvOS 18.4
- visionOS 2.4
- watchOS 11.4
Android SDK: Not Found
IDEs:
Android Studio: Not Found
Xcode:
version: 16.3/16E140
path: /usr/bin/xcodebuild
Languages:
Java: Not Found
Ruby:
version: 2.6.10
path: /usr/bin/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 19.1.0
wanted: 19.1.0
react-native:
installed: 0.81.5
wanted: 0.81.5
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
-
MANDATORY Reproducer
https://snack.expo.dev/@patosala/text-padding
Screenshots and Videos
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the mandatory Snack reproducer and verify the nested Text padding behavior on iOS and Android. Then trace the React Native Text implementation and native text layout handling; done means padding is visibly applied to nested Text content on the affected platforms without regressing ordinary Text rendering.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native
- Domain
- mobile-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 52/100