Open
Description
Description
When using Pressable components styled with borderBottomWidth and a high borderRadius (for circular or rounded buttons), the visual rendering differs between platforms: On iOS, the border bottom works as expected, on Android, the border extends outside the bounds of circular buttons and creates gaps at the edges of rectangular buttons.
Steps to reproduce
- Create RN components using a Pressable with an Icon or Text, styled with borderBottomWidth and high border radius.
- Compare the visual appearance on both iOS and Android.
React Native Version
0.79.3
Affected Platforms
Runtime - Android
Output of npx @react-native-community/cli info
:
OS: macOS 15.5
CPU: (12) arm64 Apple M4 Pro
Memory: 81.63 MB / 24.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 23.11.0
path: /opt/homebrew/bin/node
npm:
version: 11.4.1
path: /opt/homebrew/bin/npm
Watchman:
version: 2025.04.28.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.16.2
path: /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 24.4
- iOS 18.4
- macOS 15.4
- tvOS 18.4
- visionOS 2.4
- watchOS 11.4
IDEs:
Android Studio: 2024.3 AI-243.26053.27.2432.13536105
Xcode:
version: 16.3/16E140
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.15
path: /usr/bin/javac
Ruby:
version: 2.6.10
path: /usr/bin/ruby
npmPackages:
react:
installed: 19.0.0
wanted: 19.0.0
react-native:
installed: 0.79.3
wanted: 0.79.3
Stacktrace or Logs
N/A
MANDATORY Reproducer
https://github.com/A-dith-ya/test-protected-routes/tree/button-border-bottom