diff --git a/packages/core/ui/core/view/index.d.ts b/packages/core/ui/core/view/index.d.ts index 75f347db1f..0c19c93e2e 100644 --- a/packages/core/ui/core/view/index.d.ts +++ b/packages/core/ui/core/view/index.d.ts @@ -655,6 +655,11 @@ export abstract class View extends ViewCommon { */ isLayoutValid: boolean; + /** + * Native background states. This is a read-only property. + */ + nativeBackgroundState?: 'unset' | 'invalid' | 'drawn'; + /** * Gets the CSS fully qualified type name. * Using this as element type should allow for PascalCase and kebap-case selectors, when fully qualified, to match the element. diff --git a/packages/core/ui/core/view/index.ios.ts b/packages/core/ui/core/view/index.ios.ts index 587952a962..4ca8c538de 100644 --- a/packages/core/ui/core/view/index.ios.ts +++ b/packages/core/ui/core/view/index.ios.ts @@ -53,6 +53,10 @@ export class View extends ViewCommon { */ _nativeBackgroundState: 'unset' | 'invalid' | 'drawn'; + get nativeBackgroundState(): 'unset' | 'invalid' | 'drawn' { + return this._nativeBackgroundState; + } + /** * Glass effect configuration */ diff --git a/packages/core/ui/segmented-bar/index.ios.ts b/packages/core/ui/segmented-bar/index.ios.ts index 2e8ccd8695..40e1c7686d 100644 --- a/packages/core/ui/segmented-bar/index.ios.ts +++ b/packages/core/ui/segmented-bar/index.ios.ts @@ -37,6 +37,15 @@ export class SegmentedBar extends SegmentedBarBase { super.disposeNativeView(); } + onLoaded() { + super.onLoaded(); + // Force background redraw to ensure border radius is applied. + // This fixes the visual glitch where backgroundColor initially has sharp corners. + if (this.nativeBackgroundState === 'invalid') { + this._redrawNativeBackground(this.style.backgroundInternal); + } + } + // @ts-ignore get ios(): UISegmentedControl { return this.nativeViewProtected;