react / react/react-native

(Android) Incorrect text positioning for a Text with a thick border

Open
#38,518 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Issue: Author Provided Repro Needs: Triage :mag: Platform: Android
Dominant language
C++
Stars
127k
Forks
25.3k
Avg merge
1d 23h
Merged PRs (30d)
4

Description

Description

For a Text element, the border does not offset the content position on Android.

Possibly related to https://github.com/facebook/react-native/issues/38517.

React Native Version

0.72.3

Output of npx react-native info

System:
OS: Windows 10 10.0.19045
CPU: (32) x64 AMD Ryzen Threadripper PRO 3955WX 16-Cores
Memory: 92.13 GB / 127.86 GB
Binaries:
Node:
version: 20.4.0
path: C:\Program Files\nodejs\node.EXE
Yarn: Not Found
npm:
version: 9.8.0
path: C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK: Not Found
Windows SDK: Not Found
IDEs:
Android Studio: AI-222.4459.24.2221.10121639
Visual Studio:

  • 17.6.33723.286 (Visual Studio Community 2022)
    Languages:
    Java: 1.8.0_372
    Ruby: Not Found
    npmPackages:
    "@react-native-community/cli": Not Found
    react:
    installed: 18.2.0
    wanted: 18.2.0
    react-native:
    installed: 0.72.3
    wanted: 0.72.3
    react-native-windows: Not Found
    npmGlobalPackages:
    "react-native": Not Found
    Android:
    hermesEnabled: true
    newArchEnabled: false
    iOS:
    hermesEnabled: Not found
    newArchEnabled: Not found
Steps to reproduce

Create a Text with a thick border: the content appears over the border rather than below. See example below.

Snack, code example, screenshot, or link to a repository

https://snack.expo.dev/qdar-dc_I

<View style={{flex:1, paddingTop:30}}>
    <Text style={{borderTopWidth:20, borderColor:'yellow', backgroundColor:'cyan'}}>text</Text>
</View>

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the Android layout from the linked Snack using React Native 0.72.3, with a Text using a 20px top border. Compare the rendered content position with the border and confirm that the completed behavior places the text below the border without affecting the reported example.

Written by the indexing model from the issue text.

Assessment

Tech stack
android, react-native
Domain
mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.