[IOS] there is an extra tiny line when set border and border-radius to a View
Nobody has claimed this yet.
- Dominant language
- C++
- Stars
- 127k
- Forks
- 25.3k
- Avg merge
- 1d 23h
- Merged PRs (30d)
- 4
Description
Description
When I add a border and border-radius to a View, an extra tiny line with the same color as the View background is created. This line will be explicitly visible when you set the background and border to the same color.
This happens on IOS only btw.
Steps to reproduce
- add the following code to your component you can see the issue
<View style={{ width: 200, height: 200, backgroundColor: 'white', padding: 20 }}>
<View
style={{
width: 30,
height: 30,
backgroundColor: 'blue',
borderRadius: 50,
borderWidth: 5,
borderColor: 'white',
borderStyle: 'solid',
}}
/>
</View>
React Native Version
0.76.5
Affected Platforms
Runtime - iOS, Build - MacOS
Output of npx @react-native-community/cli info
System:
OS: macOS 13.7.3
CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
Memory: 2.30 GB / 16.00 GB
Shell:
version: 3.2.57
path: /bin/bash
Binaries:
Node:
version: 22.0.0
path: ~/.nvm/versions/node/v22.0.0/bin/node
Yarn:
version: 4.5.0
path: ~/.nvm/versions/node/v22.0.0/bin/yarn
npm:
version: 10.5.1
path: ~/.nvm/versions/node/v22.0.0/bin/npm
Watchman:
version: 2024.11.04.00
path: /usr/local/bin/watchman
Managers:
CocoaPods:
version: 1.16.2
path: /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 23.2
- iOS 17.2
- macOS 14.2
- tvOS 17.2
- visionOS 1.0
- watchOS 10.2
Android SDK: Not Found
IDEs:
Android Studio: 2022.3 AI-223.8836.35.2231.10811636
Xcode:
version: 15.2/15C500b
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.13
path: /Library/Java/JavaVirtualMachines/openjdk-17.jdk/Contents/Home/bin/javac
Ruby:
version: 2.6.10
path: /usr/bin/ruby
npmPackages:
"@react-native-community/cli": Not Found
react: Not Found
react-native: Not Found
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: true
newArchEnabled: true
info React Native v0.78.0 is now available (your project is running on v0.76.7).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.78.0
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.76.7&to=0.78.0
info For more info, check out "https://reactnative.dev/docs/upgrading?os=macos".
Stacktrace or Logs
Not Set
Reproducer
https://codesandbox.io/p/live/38941380-ed25-44a0-afae-83260029f2c1
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 supplied React Native View reproducer and verify the extra line on iOS using the reported border, border-radius, background, and padding styles. Investigate the iOS rendering path for bordered, rounded Views; done means the visible line is gone without changing the intended border or fill, with coverage for this configuration.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- ios, react-native
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100