[bug]: walletconnect modal styling bug on iOS

[dieguezguille]

Description

I noticed a visual bug when implementing the SDK in my Expo app. This does not affect usage in any way that I could tell but looks a bit off. Also, this issue only appears to be happening on iOS, and to be related to a very small styling file for the Card component inside AppKit component.

The problem seems to be related to this piece of code

Omitting this style in the Card component seems to fix it, even passing a value other than 0 gets rid of the issue. I'm rendering the AppKit component in the root layout of the Expo app as the example repository does.

Any idea if this can be fixed on our end?

AppKit SDK version

@reown/appkit-wagmi-react-native 2.0.1

Output of npx react-native info

System:
OS: macOS 26.0.1
CPU: (8) arm64 Apple M3
Memory: 497.84 MB / 16.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 22.14.0
path: /Users/my_user/.nvm/versions/node/v22.14.0/bin/node
Yarn:
version: 1.22.22
path: /opt/homebrew/bin/yarn
npm:
version: 10.9.2
path: /Users/my_user/.nvm/versions/node/v22.14.0/bin/npm
Watchman:
version: 2025.10.27.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.16.2
path: /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 25.0
- iOS 26.0
- macOS 26.0
- tvOS 26.0
- visionOS 26.0
- watchOS 26.0
Android SDK: Not Found
IDEs:
Android Studio: 2024.1 AI-241.15989.150.2411.11948838
Xcode:
version: 26.0.1/17A400
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.17
path: /usr/bin/javac
Ruby:
version: 2.6.10
path: /usr/bin/ruby
npmPackages:
"@react-native-community/cli":
installed: 20.0.2
wanted: latest
react:
installed: 18.3.1
wanted: 18.3.1
react-native:
installed: 0.76.9
wanted: 0.76.9
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: true
newArchEnabled: false

Expo Version (if applies)

52.0.46

Steps to reproduce

Follow the documentation installation guide

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

[ignaciosantise]

hey @dieguezguille 👋 Okey, its weird that a border radius prop is messing with margins/paddings 🤔 I noticed you are testing on iOS 26? Does it happen also on iOS 18?

[dieguezguille]

Hey! @ignaciosantise thanks for the reply. It is actually not messing with any margin/padding (the content looks ok) but with the grey background itself. It looks like the radius prop prevents the grey background to extend fully. I will attempt to reproduce on iOS 18 and report back.

[ignaciosantise]

Okey 🤝 can you also check how it behaves if you remove the safe area insets from here?

[dieguezguille]

Okey 🤝 can you also check how it behaves if you remove the safe area insets from here?

I removed the insets and the issue still persists. Seems unrelated to the safe area. Only removing styles.card from the styles array seems to fix the issue.

Edit: I also found that passing any integer value (0, 1, 2, etc) to the borderWidth property here in the Card component will also fix the issue. Decimal values such as 0.5 make the bug appear

[ignaciosantise]

got it, so setting borderWidth: 0 solves the issue for you? were you able to test it on ios 18?

[dieguezguille]

Yes indeed, setting borderWidth to any integer value (0, 1, 2, etc) solves it. I was able to test on iOS 18 on a different phone and the issue was also present there. Check the screenshot below. This is on iOS 18.5:

[ignaciosantise]

@dieguezguille sorry the delay, can you check if this canary version works for you? 0.0.0-chore-qr-borders-20251104183806 I wont merge it yet, but maybe it unblocks you now

[dieguezguille]

thanks @ignaciosantise ! this is working for me now

[xuanmai-agilityio]

Hey there, do we have a plan to release this fix? This issue is quite annoying.