Skip to content

Commit 64d4dd8

Browse files
authored
feat: support non uniform border, fix issues with circles (#29)
1 parent 324278f commit 64d4dd8

File tree

2 files changed

+76
-67
lines changed

2 files changed

+76
-67
lines changed

example/ios/Podfile.lock

Lines changed: 60 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ PODS:
88
- hermes-engine (0.81.4):
99
- hermes-engine/Pre-built (= 0.81.4)
1010
- hermes-engine/Pre-built (0.81.4)
11-
- LiquidGlass (0.4.2):
11+
- LiquidGlass (0.5.0):
1212
- hermes-engine
1313
- RCTRequired
1414
- RCTTypeSafety
@@ -2065,74 +2065,74 @@ SPEC CHECKSUMS:
20652065
DGSwiftUtilities: 567f8d5ee618f0b7afb185b17aa45ff356315a0f
20662066
FBLazyVector: 9e0cd874afd81d9a4d36679daca991b58b260d42
20672067
hermes-engine: 35c763d57c9832d0eef764316ca1c4d043581394
2068-
LiquidGlass: 6937b48f2c38c97bc4f512aad93f582e86cd7afa
2068+
LiquidGlass: 05f6d68f6310d1bf128a377e5cdaadc1d9e9a02d
20692069
RCTDeprecation: 7487d6dda857ccd4cb3dd6ecfccdc3170e85dcbc
20702070
RCTRequired: 54128b7df8be566881d48c7234724a78cb9b6157
20712071
RCTTypeSafety: d2b07797a79e45d7b19e1cd2f53c79ab419fe217
20722072
React: 2073376f47c71b7e9a0af7535986a77522ce1049
20732073
React-callinvoker: 00fa0972a70df7408a4f088144b67207b157e386
2074-
React-Core: d375dd308561785c739a621a21802e5e7e047dee
2075-
React-Core-prebuilt: dde79b89f8863efebb1d532a3335f472927da669
2076-
React-CoreModules: 3eb9b1410a317987c557afc683cc50099562c91d
2077-
React-cxxreact: 724210b64158d97f150d8d254a7319e73ef77ee7
2074+
React-Core: 7edc3b0763d7a47cf5610b32e0e790ac10dd5410
2075+
React-Core-prebuilt: ab6d77841d4bb8d247c4358663c6c71836e4f461
2076+
React-CoreModules: a02474243c3efbdc767b44dc029b452b0476cee1
2077+
React-cxxreact: b3b6c8c0823ff10237f1c6c1ad067c2577bc2f84
20782078
React-debug: c01d176522cf57cdc4a4a66d1974968fcf497f32
2079-
React-defaultsnativemodule: 3953ff49013fa997e72586628e1d218fdaf3abdb
2080-
React-domnativemodule: 540b9c7a8f31b6f4ed449aafd3a272e1f1107089
2081-
React-Fabric: 00b792be016edad758a63c4ebac15e01d35f6355
2082-
React-FabricComponents: 16ebdb9245d91ec27985a038d0a6460f499db54e
2083-
React-FabricImage: 2a967b5f0293c1c49ec883babfd4992d161e3583
2084-
React-featureflags: 4150b4ddac8210b1e3c538cfb455050b5ee05d8d
2085-
React-featureflagsnativemodule: ff977040205b96818ac1f884846493cb8a2aca28
2086-
React-graphics: ec689ac1c13a9ddb1af83baf195264676ecdbeb6
2087-
React-hermes: ff60a3407f27f3fc82f661774a7ab6559a24ab69
2088-
React-idlecallbacksnativemodule: 5f5ce3c424941f77da4ac3adba681149e68b1221
2089-
React-ImageManager: 8d87296a86f9ee290c1d32c68c7be1be63492467
2090-
React-jserrorhandler: 072756f12136284c86e96c33cdfece4d7286a99f
2091-
React-jsi: b507852b42a9125dffbf6ae7a33792fb521b29a2
2092-
React-jsiexecutor: f970eed6debb91fe5d5d6cb5734d39cf86c59896
2093-
React-jsinspector: 766e113e9482b22971b30236d10c04d8af38269e
2094-
React-jsinspectorcdp: 5b60350e29fe2566d9ed9799858c04b8e6095a3e
2095-
React-jsinspectornetwork: b3cc9a20c6b270f792eaaaa14313019a031b327d
2096-
React-jsinspectortracing: d99120fcf0864209c45cefbc9fc4605c8189c0ef
2097-
React-jsitooling: 9e41724cc47feadefbede31ca91d70f6ff079656
2098-
React-jsitracing: ca020d934502de8e02cccf451501434a5e584027
2099-
React-logger: 7b234de35acb469ce76d6bbb0457f664d6f32f62
2100-
React-Mapbuffer: fbe1da882a187e5898bdf125e1cc6e603d27ecae
2101-
React-microtasksnativemodule: 76905804171d8ccbe69329fc84c57eb7934add7f
2102-
react-native-ios-context-menu: 9f23509b5722166590c4c53180991319cc44e286
2103-
react-native-ios-utilities: 14afbb6d64f67dce464df5e4bf09d3e80334adde
2104-
react-native-safe-area-context: 42a1b4f8774b577d03b53de7326e3d5757fe9513
2105-
react-native-slider: 8c562583722c396a3682f451f0b6e68e351ec3b9
2106-
React-NativeModulesApple: a9464983ccc0f66f45e93558671f60fc7536e438
2079+
React-defaultsnativemodule: d8164fe3151fbc98b49580b37bd565da14d9fbfa
2080+
React-domnativemodule: 848a14d603966ec5b244cbd5e4a4c330ae71abb1
2081+
React-Fabric: 027d67e708433a3e08e0257dff8f0293afe1b761
2082+
React-FabricComponents: 378d5c830a42899fb49283d379424f4a6af92265
2083+
React-FabricImage: a844845a53655c23e05e102f29e5c2a5cdfbaed0
2084+
React-featureflags: a190badbbda1e72cf7e7accbfbcd2070ab35c431
2085+
React-featureflagsnativemodule: b0f97eedbbe788c114cf2d0bb5c6b28b55e9b4f9
2086+
React-graphics: eeef269ea0a459baf20748cbbfc099c6263f6596
2087+
React-hermes: 3f94c83c8238913c50fdd23e276d64cfc520b08c
2088+
React-idlecallbacksnativemodule: 7510daba721b4389a2a35fd0a97f5f782bbacbe4
2089+
React-ImageManager: 13f32b59f5c873df59f05b8102ebc075a1d66c4d
2090+
React-jserrorhandler: 9a7140314550bec0368898985ca2f0d87cb0744b
2091+
React-jsi: d987f2b32fdda6c521e750a639ab3b04ab9de44b
2092+
React-jsiexecutor: 63925b9dc840d26880adc1145dc3ea701a2b06a4
2093+
React-jsinspector: 7e36f5182f024ee11b7ac60252db9cd3219deefb
2094+
React-jsinspectorcdp: 7c121234fff135fb6e76534bdbfae1d6e1a05a52
2095+
React-jsinspectornetwork: c0c040786ea67d3b10aa687460d6b96b51365cc5
2096+
React-jsinspectortracing: 73f22a1a52a049409326abb93b8d0d2376a2ed37
2097+
React-jsitooling: f3bb6e50d6d5a1ff581d4ede35722ef760c6b12c
2098+
React-jsitracing: 008ed6c9a92ba5652a23f86cd853248f7fbb9a22
2099+
React-logger: 472e292c035c024ac73070cd6cbd011a827136f9
2100+
React-Mapbuffer: 823a2c0e0d1826c784f808174626d5229f59be17
2101+
React-microtasksnativemodule: 70cdf4826e52c7bcf98bc55255c3e30b5455d318
2102+
react-native-ios-context-menu: 4da7429c7b109d09aa059a6210eb64808f84cb9d
2103+
react-native-ios-utilities: 34ffb7109843010b6ade9e690d35c48080c17ded
2104+
react-native-safe-area-context: add9b4ba236fe95ec600604d0fc72f395433dd59
2105+
react-native-slider: b76fa3dd989d25e8c2751c2a546674dfc0c2b6f8
2106+
React-NativeModulesApple: e653919faff1f76eadf02373bda26c085bf348e3
21072107
React-oscompat: 73db7dbc80edef36a9d6ed3c6c4e1724ead4236d
2108-
React-perflogger: 123272debf907cc423962adafcf4513320e43757
2109-
React-performancetimeline: 095146e4dc8fa4568e44d7a9debc134f27e103f9
2108+
React-perflogger: f2116e7a0c1562ed7cbcaa2c90e8fdb0bc28df78
2109+
React-performancetimeline: 6ea21e31c0ccf56cebe26c7110429fe25314ff22
21102110
React-RCTActionSheet: 9fc2a0901af63cefe09c8df95a08c2cf8bb7797b
2111-
React-RCTAnimation: 785e743e489bc7aec14415dbc15f4f275b2c0276
2112-
React-RCTAppDelegate: 0602c9e13130edcde4661ea66d11122a3a66f11a
2113-
React-RCTBlob: ae53b7508a5ced43378de2a88816f63423df1f24
2114-
React-RCTFabric: 687a0cfb5726adea7fac63560b04410c86d97134
2115-
React-RCTFBReactNativeSpec: 7c55cf4fb4d2baad32ce3850b8504a6ee22e11ce
2116-
React-RCTImage: f45474c75cdf1526114f75b27e86d004aa171b90
2117-
React-RCTLinking: 56622ff97570e15e01dd9b5a657010c756a9e2d8
2118-
React-RCTNetwork: 3fffa1ab5d6981f839e7679d56f8cb731ba92c07
2119-
React-RCTRuntime: f38c04f744596fc8e1b4c5f6a57fc05c26955257
2120-
React-RCTSettings: f4a8e1bd36f58ec8273c73d3deefdcf90143ac6a
2121-
React-RCTText: da852a51dd1d169b38136a4f4d1eaed35376556b
2122-
React-RCTVibration: ff92ef336e32e18efff0fa83c798a2dbbebe09bd
2111+
React-RCTAnimation: 3728b2991c073aa629a90df00997b0c6cec54b8e
2112+
React-RCTAppDelegate: bd7fa41be1461c97e67f63efbee0d46dcc202a8b
2113+
React-RCTBlob: 4ac65a15788a793a42e4eb8c2f4325146aa3baed
2114+
React-RCTFabric: 0f3aca011a1448bc027cf65f485ade90f231a6d9
2115+
React-RCTFBReactNativeSpec: 4838aece65e8710ce8238aefe54b6bc85314e57a
2116+
React-RCTImage: 9cc8cff72a6aa2b0a94ad8b0c18b97822825eaee
2117+
React-RCTLinking: fa8aa5a3ed268e364d65f7025f01f94cd9d700a1
2118+
React-RCTNetwork: 139283847dd0dfa98f44c843a49e8dedc5fc2d99
2119+
React-RCTRuntime: 5759c5cb10618ce9b1ae1073d689b908879b76ab
2120+
React-RCTSettings: f101bafea6c0f73bb6cabec765bb7af60eb79e80
2121+
React-RCTText: b5a219996342e6727dae7f07e6ddcc5377fc32a2
2122+
React-RCTVibration: 3a04d19e46e19af9cdfd43b9bb17fa244c633100
21232123
React-rendererconsistency: b83b300e607f4e30478a5c3365e260a760232b04
2124-
React-renderercss: aa6a3cdd4fa4e3726123c42b49ba4dd978f81688
2125-
React-rendererdebug: 6b12a782caf2e7e2f730434264357b7b6aed1781
2126-
React-RuntimeApple: 8934aab108dcab957a87208fef4b6f1b3a04973a
2127-
React-RuntimeCore: 1d4345561ecc402e9e88b38e1d9b059a7a13b113
2128-
React-runtimeexecutor: a9a059f222e4d78f45a4e92cada48a5fde989fb8
2129-
React-RuntimeHermes: 05b955709a75038d282a9420342d7bea5857768a
2130-
React-runtimescheduler: 4ce23c9157b51101092537d4171ea4de48a5b863
2131-
React-timing: 62441edf291b91ab5b96ab8f2f8fb648c063ce6f
2132-
React-utils: 485abe7eaefa04b20e0ef442593e022563a1419b
2133-
ReactAppDependencyProvider: 433ddfb4536948630aadd5bd925aff8a632d2fe3
2134-
ReactCodegen: a15ad48730e9fb2a51a4c9f61fe1ed253dfcf10f
2135-
ReactCommon: 149b6c05126f2e99f2ed0d3c63539369546f8cae
2124+
React-renderercss: 10faf35f1b235ee768d84bca40733418669dd8bb
2125+
React-rendererdebug: af3c8224c58498efdc0c10c3c376b724f8896668
2126+
React-RuntimeApple: 119f51db881637ffcc6186c73f6a40840fd3bc0e
2127+
React-RuntimeCore: 2394c9276eb30c7156e9eb93091693ed6864b9a8
2128+
React-runtimeexecutor: 3b2bed6b77b4016273d354bcb1d6eb2ad5a457a2
2129+
React-RuntimeHermes: 3148d449c52f1ff987eebbb72ce2ed7542e31b5f
2130+
React-runtimescheduler: ef67578dc2c5b27ec32b322591d965cef6e8e8a4
2131+
React-timing: 37d287f84c57ce9186fbb494dbbdb3a272a3ee19
2132+
React-utils: 3c6c77bb22ce2e5947daf072d49f361a95fd12c6
2133+
ReactAppDependencyProvider: b20fba6c3d091a393925890009999472c8f94d95
2134+
ReactCodegen: c7382a9d84b5826fec1441c7eec6e424499bc8c0
2135+
ReactCommon: b720ccad5e1e8a528746c39b671825fcb7207d3c
21362136
ReactNativeDependencies: ed6d1e64802b150399f04f1d5728ec16b437251e
21372137
Yoga: 051f086b5ccf465ff2ed38a2cf5a558ae01aaaa1
21382138

ios/LiquidGlassView.mm

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -127,14 +127,21 @@ - (void)finalizeUpdates:(RNComponentViewUpdateMask)updateMask {
127127

128128
if (@available(iOS 26.0, *)) {
129129
const auto borderMetrics = _props->resolveBorderMetrics(_layoutMetrics);
130+
131+
132+
auto borderRadii = borderMetrics.borderRadii;
130133

131-
if (!borderMetrics.borderRadii.isUniform()) {
132-
// TODO: Handle non uniform border radius
133-
NSLog(@"[@callstack/liquid-glass] Using uneven border radius is not yet supported on glass elements.");
134-
}
135-
136-
// Use topLeft.horizontal same as React Native RCTViewComponentView implementation: https://github.com/facebook/react-native/blob/b823b26a3765cbf4506df0981e3350e0bae3ad62/packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm#L988C26-L988C80
137-
_view.cornerConfiguration = [UICornerConfiguration configurationWithRadius:[UICornerRadius fixedRadius:borderMetrics.borderRadii.topLeft.horizontal]];
134+
CGFloat topLeftRadius = MAX(borderRadii.topLeft.horizontal, borderRadii.topLeft.vertical);
135+
CGFloat topRightRadius = MAX(borderRadii.topRight.horizontal, borderRadii.topRight.vertical);
136+
CGFloat bottomLeftRadius = MAX(borderRadii.bottomLeft.horizontal, borderRadii.bottomLeft.vertical);
137+
CGFloat bottomRightRadius = MAX(borderRadii.bottomRight.horizontal, borderRadii.bottomRight.vertical);
138+
139+
UICornerRadius *topLeft = [UICornerRadius fixedRadius:topLeftRadius];
140+
UICornerRadius *topRight = [UICornerRadius fixedRadius:topRightRadius];
141+
UICornerRadius *bottomLeft = [UICornerRadius fixedRadius:bottomLeftRadius];
142+
UICornerRadius *bottomRight = [UICornerRadius fixedRadius:bottomRightRadius];
143+
144+
_view.cornerConfiguration = [UICornerConfiguration configurationWithTopLeftRadius:topLeft topRightRadius:topRight bottomLeftRadius:bottomLeft bottomRightRadius:bottomRight];
138145
}
139146
}
140147

@@ -143,6 +150,8 @@ - (void)updateLayoutMetrics:(const LayoutMetrics &)layoutMetrics
143150
{
144151
[super updateLayoutMetrics:layoutMetrics oldLayoutMetrics:oldLayoutMetrics];
145152

153+
_needsInvalidateLayer = YES;
154+
146155
// Fixes an issue with padding set only on the external view (the container holding content view).
147156
[_view setFrame:RCTCGRectFromRect(layoutMetrics.getPaddingFrame())];
148157
}

0 commit comments

Comments
 (0)