@triniwiz/nativescript-masonkit 1.0.0-beta.106 → 1.0.0-beta.108

package/style.js

@@ -493,28 +493,43 @@ function parseLengthPercentage(type, value) {
             return { value, unit: '%' };
     }
 }
+// The 128-bit dirty mask as four signed 32-bit words, low to high (the
+// syncStyleParts argument order). Plain numbers: BigInt ops allocate.
 class StateKeys {
-    constructor(bits) {
-        this.bits = bits;
+    constructor(w0, w1, w2, w3) {
+        this.w0 = w0;
+        this.w1 = w1;
+        this.w2 = w2;
+        this.w3 = w3;
     }
     static flag(n) {
-        return new StateKeys(1n << BigInt(n));
+        const bit = (1 << (n & 31)) | 0;
+        switch (n >> 5) {
+            case 0:
+                return new StateKeys(bit, 0, 0, 0);
+            case 1:
+                return new StateKeys(0, bit, 0, 0);
+            case 2:
+                return new StateKeys(0, 0, bit, 0);
+            default:
+                return new StateKeys(0, 0, 0, bit);
+        }
     }
-    // compatibility: return low bits when code expects single 64-bit value
-    get bitsLow() {
-        return this.bits;
+    /** The mask as one unsigned 128-bit value (tests and diagnostics). */
+    get bits() {
+        return wordsToBigInt(this.w0, this.w1, this.w2, this.w3);
     }
     or(other) {
-        return new StateKeys(this.bits | other.bits);
+        return new StateKeys(this.w0 | other.w0, this.w1 | other.w1, this.w2 | other.w2, this.w3 | other.w3);
     }
     and(other) {
-        return new StateKeys(this.bits & other.bits);
+        return new StateKeys(this.w0 & other.w0, this.w1 & other.w1, this.w2 & other.w2, this.w3 & other.w3);
     }
     hasFlag(flag) {
-        return (this.bits & flag.bits) !== 0n;
+        return (this.w0 & flag.w0) !== 0 || (this.w1 & flag.w1) !== 0 || (this.w2 & flag.w2) !== 0 || (this.w3 & flag.w3) !== 0;
     }
 }
-StateKeys.NONE = new StateKeys(0n);
+StateKeys.NONE = new StateKeys(0, 0, 0, 0);
 StateKeys.DISPLAY = StateKeys.flag(0);
 StateKeys.POSITION = StateKeys.flag(1);
 StateKeys.DIRECTION = StateKeys.flag(2);
@@ -594,6 +609,10 @@ StateKeys.HYPHENS = StateKeys.flag(75);
 StateKeys.CARET_COLOR = StateKeys.flag(76);
 StateKeys.WORD_SPACING = StateKeys.flag(77);
 StateKeys.FONT_STRETCH = StateKeys.flag(78);
+StateKeys.DISPLAY_AND_MODE = StateKeys.DISPLAY.or(StateKeys.DISPLAY_MODE);
+function wordsToBigInt(w0, w1, w2, w3) {
+    return BigInt(w0 >>> 0) | (BigInt(w1 >>> 0) << 32n) | (BigInt(w2 >>> 0) << 64n) | (BigInt(w3 >>> 0) << 96n);
+}
 const getInt8 = (view, offset) => {
     return view.getInt8(offset);
 };
@@ -606,37 +625,6 @@ const getUint8 = (view, offset) => {
 const setUint8 = (view, offset, value) => {
     view.setUint8(offset, value);
 };
-const splitBigIntToInt64Parts = (value) => {
-    const MASK64 = (1n << 64n) - 1n;
-    const LOW = value & MASK64;
-    let HIGH = value >> 64n;
-    // Ensure HIGH fits into signed 64-bit range
-    const SIGN_BIT = 1n << 63n;
-    if ((HIGH & SIGN_BIT) !== 0n) {
-        // convert to signed representation
-        HIGH = HIGH - (1n << 64n);
-    }
-    let lowSigned = LOW;
-    if ((LOW & SIGN_BIT) !== 0n) {
-        lowSigned = LOW - (1n << 64n);
-    }
-    return [lowSigned.toString(), HIGH.toString()];
-};
-// Android-only fast path for syncStyle(): splits the 128-bit dirty mask into
-// four signed 32-bit words (plain {N} int marshalling) instead of two 64-bit
-// decimal strings. Recombined via (high32 << 32) | (low32 & 0xffffffff) in
-// Element.syncStyleParts.
-const splitBigIntToInt32Parts = (value) => {
-    const MASK64 = (1n << 64n) - 1n;
-    const MASK32 = 0xffffffffn;
-    const LOW = value & MASK64;
-    const HIGH = (value >> 64n) & MASK64;
-    const lowLow32 = Number(BigInt.asIntN(32, LOW & MASK32));
-    const lowHigh32 = Number(BigInt.asIntN(32, (LOW >> 32n) & MASK32));
-    const highLow32 = Number(BigInt.asIntN(32, HIGH & MASK32));
-    const highHigh32 = Number(BigInt.asIntN(32, (HIGH >> 32n) & MASK32));
-    return [lowLow32, lowHigh32, highLow32, highHigh32];
-};
 const getInt16 = (view, offset) => {
     return view.getInt16(offset, true);
 };
@@ -1167,6 +1155,14 @@ function androidWritableStyleBuffer(nativeView) {
     }
     return typeof style.getWritableValue === 'function' ? style.getWritableValue() : style.getValues();
 }
+let appleWritableStyleValues;
+// Newer frameworks return the node's own (copied-on-write) buffer in one call.
+function appleHasWritableStyleValues(nativeView) {
+    if (appleWritableStyleValues === undefined && nativeView) {
+        appleWritableStyleValues = typeof nativeView.mason_writableStyleValues === 'function';
+    }
+    return !!appleWritableStyleValues;
+}
 function windowsStyleValues(nativeView) {
     if (nativeView?.Node)
         return masonEngine().StyleValues(nativeView);
@@ -1188,7 +1184,13 @@ function cssInitialIfReset(value, initial) {
 }
 export class Style {
     constructor() {
-        this.isDirty = -1n;
+        this._bufferRequested = false;
+        // Dirty mask words (StateKeys layout); `_hasDirty` false means clean.
+        this._d0 = 0;
+        this._d1 = 0;
+        this._d2 = 0;
+        this._d3 = 0;
+        this._hasDirty = false;
         this.inBatch = false;
         this._syncScheduled = false;
         // Buffer bytes before this turn's first write. Frameworks often undo and
@@ -1199,39 +1201,86 @@ export class Style {
         this._synced = false;
     }
     static fromView(view, nativeView) {
-        //console.time('fromView');
         const ret = new Style();
         ret.view_ = view;
         ret.nativeView = nativeView;
+        return ret;
+    }
+    get style_view() {
+        if (!this._bufferRequested)
+            this.loadBuffer(false);
+        return this._sv;
+    }
+    set style_view(value) {
+        this._bufferRequested = true;
+        this._sv = value;
+    }
+    get i8View() {
+        if (!this._bufferRequested)
+            this.loadBuffer(false);
+        if (this._i8 === undefined && this._sv)
+            this._i8 = new Int8Array(this._sv.buffer, this._sv.byteOffset, this._sv.byteLength);
+        return this._i8;
+    }
+    set i8View(value) {
+        this._i8 = value;
+    }
+    get u8View() {
+        if (!this._bufferRequested)
+            this.loadBuffer(false);
+        if (this._u8 === undefined && this._sv)
+            this._u8 = new Uint8Array(this._sv.buffer, this._sv.byteOffset, this._sv.byteLength);
+        return this._u8;
+    }
+    set u8View(value) {
+        this._u8 = value;
+    }
+    /** The native MasonStyle, fetched once (each `nativeView.style` read is a bridge call). */
+    get appleStyle() {
+        if (this._appleStyle === undefined) {
+            this._appleStyle = (this.nativeView?.style ?? NSCMason.shared.styleForViewOrNode(this.nativeView));
+        }
+        return this._appleStyle;
+    }
+    // The byte views are rarely read, so they are made on demand.
+    setBuffer(buffer) {
+        this._bufferRequested = true;
+        this._sv = new DataView(buffer);
+        this._i8 = undefined;
+        this._u8 = undefined;
+    }
+    // A new node shares the arena's default buffer, so a style whose first use
+    // is a write asks for its own copy up front instead of fetching twice.
+    loadBuffer(writable) {
+        this._bufferRequested = true;
         if (__ANDROID__) {
-            const buffer = ArrayBuffer.from(androidWritableStyleBuffer(nativeView));
-            ret.style_view = new DataView(buffer);
-            ret.i8View = new Int8Array(buffer);
-            ret.u8View = new Uint8Array(buffer);
+            this.setBuffer(ArrayBuffer.from(androidWritableStyleBuffer(this.nativeView)));
         }
         else if (__APPLE__) {
-            let style = nativeView?.style;
-            if (!style) {
-                style = NSCMason.shared.styleForViewOrNode(nativeView);
+            const nativeView = this.nativeView;
+            let data = null;
+            if (writable && appleHasWritableStyleValues(nativeView)) {
+                data = nativeView.mason_writableStyleValues();
             }
-            const styleBuffer = style.values;
-            const buffer = interop.bufferFromData(styleBuffer);
-            ret.style_view = new DataView(buffer);
-            ret.i8View = new Int8Array(buffer);
-            ret.u8View = new Uint8Array(buffer);
+            if (!data) {
+                const style = this.appleStyle;
+                if (writable)
+                    style.prepareMut();
+                data = style.values;
+            }
+            this.setBuffer(interop.bufferFromData(data));
         }
         else if (__WINDOWS__) {
             // Live IBuffer over the engine's arena style memory; the @nativescript/windows runtime
             // projects it as a writable ArrayBuffer, so the same StyleKeys-offset writes used on
             // iOS/Android land straight in the node's style.
             //@ts-ignore
-            const buffer = NSWinRT.interop.arrayBufferFromBuffer(windowsStyleValues(nativeView));
-            ret.style_view = new DataView(buffer);
-            ret.i8View = new Int8Array(buffer);
-            ret.u8View = new Uint8Array(buffer);
+            this.setBuffer(NSWinRT.interop.arrayBufferFromBuffer(windowsStyleValues(this.nativeView)));
         }
-        //console.timeEnd('fromView');
-        return ret;
+    }
+    /** The dirty mask as one value, `-1n` when clean (tests and diagnostics). */
+    get isDirty() {
+        return this._hasDirty ? wordsToBigInt(this._d0, this._d1, this._d2, this._d3) : -1n;
     }
     static fromPseudo(pseudo, view, nativeView) {
         var mask = -1;
@@ -1305,13 +1354,11 @@ export class Style {
         const HIGH_OFFSET = StyleKeys.PSEUDO_SET_MASK_HIGH;
         if (this.style_view.byteLength < HIGH_OFFSET + 8)
             return;
-        const low = this.style_view.getBigUint64(LOW_OFFSET, true);
-        const high = this.style_view.getBigUint64(HIGH_OFFSET, true);
-        const MASK64 = (1n << 64n) - 1n;
-        const keyLow = key.bits & MASK64;
-        const keyHigh = (key.bits >> 64n) & MASK64;
-        this.style_view.setBigUint64(LOW_OFFSET, low | keyLow, true);
-        this.style_view.setBigUint64(HIGH_OFFSET, high | keyHigh, true);
+        const v = this.style_view;
+        setInt32(v, LOW_OFFSET, getInt32(v, LOW_OFFSET) | key.w0);
+        setInt32(v, LOW_OFFSET + 4, getInt32(v, LOW_OFFSET + 4) | key.w1);
+        setInt32(v, HIGH_OFFSET, getInt32(v, HIGH_OFFSET) | key.w2);
+        setInt32(v, HIGH_OFFSET + 4, getInt32(v, HIGH_OFFSET + 4) | key.w3);
     }
     commitState(value) {
         if (this._pseudo) {
@@ -1503,7 +1550,7 @@ export class Style {
         }
     }
     setBorderColor(value) {
-        if (!(__WINDOWS__ || __ANDROID__) || !this.style_view)
+        if (!(__WINDOWS__ || __ANDROID__ || __APPLE__) || !this.style_view)
             return;
         const c = parseSidesColorShorthand(String(value ?? ''));
         this.writeBorderSide('top', null, null, c.t);
@@ -1522,13 +1569,14 @@ export class Style {
         this.commitState(StateKeys.BORDER_COLOR);
     }
     resetState() {
-        this.isDirty = -1n;
+        this._hasDirty = false;
+        this._d0 = this._d1 = this._d2 = this._d3 = 0;
     }
     syncStyle() {
         this._synced = true;
         const snapshot = this._turnSnapshot;
         this._turnSnapshot = undefined;
-        if (snapshot && this.isDirty !== -1n && bytesEqual(snapshot, this.u8View)) {
+        if (snapshot && this._hasDirty && bytesEqual(snapshot, this.u8View)) {
             this.resetState();
             return;
         }
@@ -1537,18 +1585,16 @@ export class Style {
     }
     _sendSync() {
         if (__ANDROID__) {
-            const [lowLow, lowHigh, highLow, highHigh] = splitBigIntToInt32Parts(this.isDirty);
             //@ts-ignore
             const view = this.view?.android ?? this.view._view;
             // @ts-ignore - syncStyleParts is a newer native method; typings regenerate from the AAR separately.
-            view.syncStyleParts(lowLow, lowHigh, highLow, highHigh);
+            view.syncStyleParts(this._d0, this._d1, this._d2, this._d3);
         }
         else if (__APPLE__) {
-            const [low, high] = splitBigIntToInt64Parts(this.isDirty);
             //@ts-ignore
             const view = this.view?.ios ?? this.view._view;
             // @ts-ignore
-            view.mason_syncStyle(low, high);
+            view.mason_syncStyleParts(this._d0, this._d1, this._d2, this._d3);
         }
         else if (__WINDOWS__) {
             // The Windows elements re-read the whole buffer, so the dirty bits aren't passed.
@@ -1572,12 +1618,11 @@ export class Style {
         if (this._turnSnapshot === undefined) {
             this._turnSnapshot = false;
         }
-        if (this.isDirty == -1n) {
-            this.isDirty = value.bits;
-        }
-        else {
-            this.isDirty = this.isDirty | value.bits;
-        }
+        this._d0 |= value.w0;
+        this._d1 |= value.w1;
+        this._d2 |= value.w2;
+        this._d3 |= value.w3;
+        this._hasDirty = true;
         if (!this.inBatch) {
             // Coalesce rapid-fire property changes (e.g. CSS batch apply) into a
             // single syncStyle() call on the next microtask. This avoids N
@@ -1591,7 +1636,7 @@ export class Style {
     }
     _flushScheduledSync() {
         this._syncScheduled = false;
-        if (this.isDirty !== -1n) {
+        if (this._hasDirty) {
             this.syncStyle();
         }
     }
@@ -1620,40 +1665,18 @@ export class Style {
         return own > 0 ? own : cssUnits.rootFontSize;
     }
     prepareMut() {
-        // always mut
         if (this._pseudo) {
             return;
         }
-        if (this._turnSnapshot === undefined && this.isDirty === -1n && this.u8View) {
+        if (!this._bufferRequested) {
+            this.loadBuffer(true);
+        }
+        if (this._turnSnapshot === undefined && !this._hasDirty && this._sv) {
             this._turnSnapshot = this._synced ? this.u8View.slice() : false;
         }
-        const ref = getUint32(this.style_view, StyleKeys.REF_COUNT);
-        if (ref !== 1) {
-            if (__APPLE__) {
-                let style = this.nativeView?.style;
-                if (!style) {
-                    style = NSCMason.shared.styleForViewOrNode(this.nativeView);
-                }
-                style.prepareMut();
-                const styleBuffer = style.values;
-                const buffer = interop.bufferFromData(styleBuffer);
-                this.style_view = new DataView(buffer);
-                this.i8View = new Int8Array(buffer);
-                this.u8View = new Uint8Array(buffer);
-            }
-            if (__ANDROID__) {
-                const buffer = ArrayBuffer.from(androidWritableStyleBuffer(this.nativeView));
-                this.style_view = new DataView(buffer);
-                this.i8View = new Int8Array(buffer);
-                this.u8View = new Uint8Array(buffer);
-            }
-            if (__WINDOWS__) {
-                //@ts-ignore
-                const buffer = NSWinRT.interop.arrayBufferFromBuffer(windowsStyleValues(this.nativeView));
-                this.style_view = new DataView(buffer);
-                this.i8View = new Int8Array(buffer);
-                this.u8View = new Uint8Array(buffer);
-            }
+        if (getUint32(this._sv, StyleKeys.REF_COUNT) !== 1) {
+            // Still the shared buffer (read before the first write): take a copy.
+            this.loadBuffer(true);
         }
     }
     get boxSizing() {
@@ -2039,14 +2062,7 @@ export class Style {
             this.prepareMut();
             setInt8(this.style_view, StyleKeys.DISPLAY, display);
             setInt8(this.style_view, StyleKeys.DISPLAY_MODE, displayMode);
-            if (this.isDirty == -1n) {
-                this.isDirty = StateKeys.DISPLAY_MODE.bits;
-            }
-            else {
-                this.isDirty = this.isDirty | StateKeys.DISPLAY_MODE.bits;
-            }
-            // DISPLAY/DISPLAY_MODE are disjoint bits; use .or(), not .and()
-            this.commitState(StateKeys.DISPLAY.or(StateKeys.DISPLAY_MODE));
+            this.commitState(StateKeys.DISPLAY_AND_MODE);
         }
     }
     get position() {
@@ -2201,8 +2217,12 @@ export class Style {
                         setInt8(this.style_view, StyleKeys.MIN_WIDTH_TYPE, 2);
                         setFloat32(this.style_view, StyleKeys.MIN_WIDTH_VALUE, value.value);
                         break;
+                    default:
+                        return;
                 }
                 break;
+            default:
+                return;
         }
         this.commitState(StateKeys.MIN_SIZE);
     }
@@ -2242,8 +2262,12 @@ export class Style {
                         setInt8(this.style_view, StyleKeys.MIN_HEIGHT_TYPE, 2);
                         setFloat32(this.style_view, StyleKeys.MIN_HEIGHT_VALUE, value.value);
                         break;
+                    default:
+                        return;
                 }
                 break;
+            default:
+                return;
         }
         this.commitState(StateKeys.MIN_SIZE);
     }
@@ -2283,8 +2307,12 @@ export class Style {
                         setInt8(this.style_view, StyleKeys.WIDTH_TYPE, 2);
                         setFloat32(this.style_view, StyleKeys.WIDTH_VALUE, value.value);
                         break;
+                    default:
+                        return;
                 }
                 break;
+            default:
+                return;
         }
         this.commitState(StateKeys.SIZE);
     }
@@ -2324,8 +2352,12 @@ export class Style {
                         setInt8(this.style_view, StyleKeys.HEIGHT_TYPE, 2);
                         setFloat32(this.style_view, StyleKeys.HEIGHT_VALUE, value.value);
                         break;
+                    default:
+                        return;
                 }
                 break;
+            default:
+                return;
         }
         this.commitState(StateKeys.SIZE);
     }
@@ -2365,8 +2397,12 @@ export class Style {
                         setInt8(this.style_view, StyleKeys.MAX_WIDTH_TYPE, 2);
                         setFloat32(this.style_view, StyleKeys.MAX_WIDTH_VALUE, value.value);
                         break;
+                    default:
+                        return;
                 }
                 break;
+            default:
+                return;
         }
         this.commitState(StateKeys.MAX_SIZE);
     }
@@ -2406,8 +2442,12 @@ export class Style {
                         setInt8(this.style_view, StyleKeys.MAX_HEIGHT_TYPE, 2);
                         setFloat32(this.style_view, StyleKeys.MAX_HEIGHT_VALUE, value.value);
                         break;
+                    default:
+                        return;
                 }
                 break;
+            default:
+                return;
         }
         this.commitState(StateKeys.MAX_SIZE);
     }
@@ -3720,7 +3760,7 @@ export class Style {
             return nodeHelper().getGridAutoRows(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.gridAutoRows;
+            return this.appleStyle.gridAutoRows;
         }
         return '';
     }
@@ -3734,7 +3774,7 @@ export class Style {
             nodeHelper().setGridAutoRows(this.nativeView, value);
         }
         if (__APPLE__) {
-            this.nativeView.style.gridAutoRows = value;
+            this.appleStyle.gridAutoRows = value;
         }
         if (__WINDOWS__) {
             windowsSetGrid(this.nativeView, 'gridAutoRows', value);
@@ -3748,7 +3788,7 @@ export class Style {
             return nodeHelper().getGridAutoColumns(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.gridAutoColumns;
+            return this.appleStyle.gridAutoColumns;
         }
         return '';
     }
@@ -3762,7 +3802,7 @@ export class Style {
             nodeHelper().setGridAutoColumns(this.nativeView, value);
         }
         if (__APPLE__) {
-            this.nativeView.style.gridAutoColumns = value;
+            this.appleStyle.gridAutoColumns = value;
         }
         if (__WINDOWS__) {
             windowsSetGrid(this.nativeView, 'gridAutoColumns', value);
@@ -3810,7 +3850,7 @@ export class Style {
             nodeHelper().setGridColumn(this.nativeView, value);
         }
         if (__APPLE__) {
-            this.nativeView.style.gridColumn = value;
+            this.appleStyle.gridColumn = value;
         }
         if (__WINDOWS__) {
             windowsSetGrid(this.nativeView, 'gridColumn', value);
@@ -3824,7 +3864,7 @@ export class Style {
             return nodeHelper().getGridColumn(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.gridColumn;
+            return this.appleStyle.gridColumn;
         }
         return '';
     }
@@ -3836,7 +3876,7 @@ export class Style {
             return nodeHelper().getGridColumnStart(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.gridColumnStart;
+            return this.appleStyle.gridColumnStart;
         }
         return '';
     }
@@ -3850,7 +3890,7 @@ export class Style {
             nodeHelper().setGridColumnStart(this.nativeView, value);
         }
         if (__APPLE__) {
-            this.nativeView.style.gridColumnStart = value;
+            this.appleStyle.gridColumnStart = value;
         }
         if (__WINDOWS__) {
             windowsSetGrid(this.nativeView, 'gridColumnStart', value);
@@ -3864,7 +3904,7 @@ export class Style {
             return nodeHelper().getGridColumnEnd(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.gridColumnEnd;
+            return this.appleStyle.gridColumnEnd;
         }
         return '';
     }
@@ -3878,7 +3918,7 @@ export class Style {
             nodeHelper().setGridColumnEnd(this.nativeView, value);
         }
         if (__APPLE__) {
-            this.nativeView.style.gridColumnEnd = value;
+            this.appleStyle.gridColumnEnd = value;
         }
         if (__WINDOWS__) {
             windowsSetGrid(this.nativeView, 'gridColumnEnd', value);
@@ -3894,7 +3934,7 @@ export class Style {
             nodeHelper().setGridRow(this.nativeView, value);
         }
         if (__APPLE__) {
-            this.nativeView.style.gridRow = value;
+            this.appleStyle.gridRow = value;
         }
         if (__WINDOWS__) {
             windowsSetGrid(this.nativeView, 'gridRow', value);
@@ -3908,7 +3948,7 @@ export class Style {
             return nodeHelper().getGridRow(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.gridRow;
+            return this.appleStyle.gridRow;
         }
         return '';
     }
@@ -3920,7 +3960,7 @@ export class Style {
             return nodeHelper().getGridRowStart(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.gridRowStart;
+            return this.appleStyle.gridRowStart;
         }
         return '';
     }
@@ -3934,7 +3974,7 @@ export class Style {
             nodeHelper().setGridRowStart(this.nativeView, value);
         }
         if (__APPLE__) {
-            this.nativeView.style.gridRowStart = value;
+            this.appleStyle.gridRowStart = value;
         }
         if (__WINDOWS__) {
             windowsSetGrid(this.nativeView, 'gridRowStart', value);
@@ -3948,7 +3988,7 @@ export class Style {
             return nodeHelper().getGridRowEnd(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.gridRowEnd;
+            return this.appleStyle.gridRowEnd;
         }
         return '';
     }
@@ -3962,7 +4002,7 @@ export class Style {
             nodeHelper().setGridRowEnd(this.nativeView, value);
         }
         if (__APPLE__) {
-            this.nativeView.style.gridRowEnd = value;
+            this.appleStyle.gridRowEnd = value;
         }
         if (__WINDOWS__) {
             windowsSetGrid(this.nativeView, 'gridRowEnd', value);
@@ -3978,7 +4018,7 @@ export class Style {
             nodeHelper().setGridArea(this.nativeView, value);
         }
         if (__APPLE__) {
-            this.nativeView.style.gridArea = value;
+            this.appleStyle.gridArea = value;
         }
         if (__WINDOWS__) {
             windowsSetGrid(this.nativeView, 'gridArea', value);
@@ -3992,7 +4032,7 @@ export class Style {
             return nodeHelper().getGridArea(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.gridArea;
+            return this.appleStyle.gridArea;
         }
         return '';
     }
@@ -4006,7 +4046,7 @@ export class Style {
             nodeHelper().setGridTemplateRows(this.nativeView, value);
         }
         if (__APPLE__) {
-            this.nativeView.style.gridTemplateRows = value;
+            this.appleStyle.gridTemplateRows = value;
         }
         if (__WINDOWS__) {
             windowsSetGrid(this.nativeView, 'gridTemplateRows', value);
@@ -4020,7 +4060,7 @@ export class Style {
             return nodeHelper().getGridTemplateRows(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.gridTemplateRows;
+            return this.appleStyle.gridTemplateRows;
         }
         return '';
     }
@@ -4032,7 +4072,7 @@ export class Style {
             return nodeHelper().getGridTemplateColumns(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.gridTemplateColumns;
+            return this.appleStyle.gridTemplateColumns;
         }
         return '';
     }
@@ -4046,7 +4086,7 @@ export class Style {
             nodeHelper().setGridTemplateColumns(this.nativeView, value);
         }
         if (__APPLE__) {
-            this.nativeView.style.gridTemplateColumns = value;
+            this.appleStyle.gridTemplateColumns = value;
         }
         if (__WINDOWS__) {
             windowsSetGrid(this.nativeView, 'gridTemplateColumns', value);
@@ -4060,7 +4100,7 @@ export class Style {
             return nodeHelper().getGridTemplateAreas(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.gridTemplateAreas;
+            return this.appleStyle.gridTemplateAreas;
         }
         return '';
     }
@@ -4074,7 +4114,7 @@ export class Style {
             nodeHelper().setGridTemplateAreas(this.nativeView, value);
         }
         if (__APPLE__) {
-            this.nativeView.style.gridTemplateAreas = value;
+            this.appleStyle.gridTemplateAreas = value;
         }
         if (__WINDOWS__) {
             windowsSetGrid(this.nativeView, 'gridTemplateAreas', value);
@@ -4243,7 +4283,8 @@ export class Style {
             // length — TYPE 0 means "multiply by the resolved font size".
             const unitless = /^-?[\d.]+$/.test(t);
             this.prepareMut();
-            setFloat32(this.style_view, StyleKeys.LINE_HEIGHT, unitless ? finite(parseFloat(t) || 0) : tokenToDevicePx(t, parseFloat(t) || 0));
+            // An absolute line-height is stored in CSS px (iOS points, Android dip), as the number path.
+            setFloat32(this.style_view, StyleKeys.LINE_HEIGHT, unitless ? finite(parseFloat(t) || 0) : layout.toDeviceIndependentPixels(tokenToDevicePx(t, parseFloat(t) || 0)));
             setUint8(this.style_view, StyleKeys.LINE_HEIGHT_STATE, 1);
             setUint8(this.style_view, StyleKeys.LINE_HEIGHT_TYPE, unitless ? 0 : 1);
             this.commitState(StateKeys.LINE_HEIGHT);
@@ -4261,14 +4302,14 @@ export class Style {
             switch (value.unit) {
                 case 'dip':
                     this.prepareMut();
-                    setFloat32(this.style_view, StyleKeys.LINE_HEIGHT, layout.toDevicePixels(value.value));
+                    setFloat32(this.style_view, StyleKeys.LINE_HEIGHT, value.value);
                     setUint8(this.style_view, StyleKeys.LINE_HEIGHT_STATE, 1);
                     setUint8(this.style_view, StyleKeys.LINE_HEIGHT_TYPE, 1);
                     this.commitState(StateKeys.LINE_HEIGHT);
                     break;
                 case 'px':
                     this.prepareMut();
-                    setFloat32(this.style_view, StyleKeys.LINE_HEIGHT, layout.toDevicePixels(value.value));
+                    setFloat32(this.style_view, StyleKeys.LINE_HEIGHT, layout.toDeviceIndependentPixels(value.value));
                     setUint8(this.style_view, StyleKeys.LINE_HEIGHT_STATE, 1);
                     setUint8(this.style_view, StyleKeys.LINE_HEIGHT_TYPE, 1);
                     this.commitState(StateKeys.LINE_HEIGHT);
@@ -4426,13 +4467,13 @@ export class Style {
             return nodeHelper().getBackground(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.background;
+            return this.appleStyle.background;
         }
         return '';
     }
     set background(value) {
         value = this.coerceCssStringValue(value);
-        this.setPseudoCssStringValue('background', value, () => nodeHelper().setBackground(this.nativeView, value), () => (this.nativeView.style.background = value));
+        this.setPseudoCssStringValue('background', value, () => nodeHelper().setBackground(this.nativeView, value), () => (this.appleStyle.background = value));
     }
     get backgroundImage() {
         if (!this.nativeView) {
@@ -4442,13 +4483,13 @@ export class Style {
             return nodeHelper().getBackgroundImage(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.backgroundImage;
+            return this.appleStyle.backgroundImage;
         }
         return '';
     }
     set backgroundImage(value) {
         value = this.coerceCssStringValue(value);
-        this.setPseudoCssStringValue('background-image', value, () => nodeHelper().setBackgroundImage(this.nativeView, value), () => (this.nativeView.style.backgroundImage = value));
+        this.setPseudoCssStringValue('background-image', value, () => nodeHelper().setBackgroundImage(this.nativeView, value), () => (this.appleStyle.backgroundImage = value));
     }
     get backgroundRepeat() {
         if (!this.nativeView) {
@@ -4458,13 +4499,13 @@ export class Style {
             return nodeHelper().getBackgroundRepeat(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.backgroundRepeat;
+            return this.appleStyle.backgroundRepeat;
         }
         return '';
     }
     set backgroundRepeat(value) {
         value = this.coerceCssStringValue(value);
-        this.setPseudoCssStringValue('background-repeat', value, () => nodeHelper().setBackgroundRepeat(this.nativeView, value), () => (this.nativeView.style.backgroundRepeat = value));
+        this.setPseudoCssStringValue('background-repeat', value, () => nodeHelper().setBackgroundRepeat(this.nativeView, value), () => (this.appleStyle.backgroundRepeat = value));
     }
     get backgroundPosition() {
         if (!this.nativeView) {
@@ -4474,13 +4515,13 @@ export class Style {
             return nodeHelper().getBackgroundPosition(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.backgroundPosition;
+            return this.appleStyle.backgroundPosition;
         }
         return '';
     }
     set backgroundPosition(value) {
         value = this.coerceCssStringValue(value);
-        this.setPseudoCssStringValue('background-position', value, () => nodeHelper().setBackgroundPosition(this.nativeView, value), () => (this.nativeView.style.backgroundPosition = value));
+        this.setPseudoCssStringValue('background-position', value, () => nodeHelper().setBackgroundPosition(this.nativeView, value), () => (this.appleStyle.backgroundPosition = value));
     }
     get backgroundSize() {
         if (!this.nativeView) {
@@ -4490,13 +4531,13 @@ export class Style {
             return nodeHelper().getBackgroundSize(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.backgroundSize;
+            return this.appleStyle.backgroundSize;
         }
         return '';
     }
     set backgroundSize(value) {
         value = this.coerceCssStringValue(value);
-        this.setPseudoCssStringValue('background-size', value, () => nodeHelper().setBackgroundSize(this.nativeView, value), () => (this.nativeView.style.backgroundSize = value));
+        this.setPseudoCssStringValue('background-size', value, () => nodeHelper().setBackgroundSize(this.nativeView, value), () => (this.appleStyle.backgroundSize = value));
     }
     get backgroundClip() {
         if (!this.nativeView) {
@@ -4506,13 +4547,13 @@ export class Style {
             return nodeHelper().getBackgroundClip(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.backgroundClip;
+            return this.appleStyle.backgroundClip;
         }
         return '';
     }
     set backgroundClip(value) {
         value = this.coerceCssStringValue(value);
-        this.setPseudoCssStringValue('background-clip', value, () => nodeHelper().setBackgroundClip(this.nativeView, value), () => (this.nativeView.style.backgroundClip = value));
+        this.setPseudoCssStringValue('background-clip', value, () => nodeHelper().setBackgroundClip(this.nativeView, value), () => (this.appleStyle.backgroundClip = value));
     }
     get backgroundPositionX() {
         if (!this.nativeView) {
@@ -4522,13 +4563,13 @@ export class Style {
             return nodeHelper().getBackgroundPositionX(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.backgroundPositionX;
+            return this.appleStyle.backgroundPositionX;
         }
         return '';
     }
     set backgroundPositionX(value) {
         value = cssInitialIfReset(this.coerceCssStringValue(value), '0%');
-        this.setPseudoCssStringValue('background-position-x', value, () => nodeHelper().setBackgroundPositionX(this.nativeView, value), () => (this.nativeView.style.backgroundPositionX = value));
+        this.setPseudoCssStringValue('background-position-x', value, () => nodeHelper().setBackgroundPositionX(this.nativeView, value), () => (this.appleStyle.backgroundPositionX = value));
     }
     get backgroundPositionY() {
         if (!this.nativeView) {
@@ -4538,13 +4579,13 @@ export class Style {
             return nodeHelper().getBackgroundPositionY(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.backgroundPositionY;
+            return this.appleStyle.backgroundPositionY;
         }
         return '';
     }
     set backgroundPositionY(value) {
         value = cssInitialIfReset(this.coerceCssStringValue(value), '0%');
-        this.setPseudoCssStringValue('background-position-y', value, () => nodeHelper().setBackgroundPositionY(this.nativeView, value), () => (this.nativeView.style.backgroundPositionY = value));
+        this.setPseudoCssStringValue('background-position-y', value, () => nodeHelper().setBackgroundPositionY(this.nativeView, value), () => (this.appleStyle.backgroundPositionY = value));
     }
     get backgroundOrigin() {
         if (!this.nativeView) {
@@ -4554,13 +4595,13 @@ export class Style {
             return nodeHelper().getBackgroundOrigin(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.backgroundOrigin;
+            return this.appleStyle.backgroundOrigin;
         }
         return '';
     }
     set backgroundOrigin(value) {
         value = cssInitialIfReset(this.coerceCssStringValue(value), 'padding-box');
-        this.setPseudoCssStringValue('background-origin', value, () => nodeHelper().setBackgroundOrigin(this.nativeView, value), () => (this.nativeView.style.backgroundOrigin = value));
+        this.setPseudoCssStringValue('background-origin', value, () => nodeHelper().setBackgroundOrigin(this.nativeView, value), () => (this.appleStyle.backgroundOrigin = value));
     }
     get backgroundAttachment() {
         if (!this.nativeView) {
@@ -4570,13 +4611,13 @@ export class Style {
             return nodeHelper().getBackgroundAttachment(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.backgroundAttachment;
+            return this.appleStyle.backgroundAttachment;
         }
         return '';
     }
     set backgroundAttachment(value) {
         value = cssInitialIfReset(this.coerceCssStringValue(value), 'scroll');
-        this.setPseudoCssStringValue('background-attachment', value, () => nodeHelper().setBackgroundAttachment(this.nativeView, value), () => (this.nativeView.style.backgroundAttachment = value));
+        this.setPseudoCssStringValue('background-attachment', value, () => nodeHelper().setBackgroundAttachment(this.nativeView, value), () => (this.appleStyle.backgroundAttachment = value));
     }
     get backgroundBlendMode() {
         if (!this.nativeView) {
@@ -4586,13 +4627,13 @@ export class Style {
             return nodeHelper().getBackgroundBlendMode(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.backgroundBlendMode;
+            return this.appleStyle.backgroundBlendMode;
         }
         return '';
     }
     set backgroundBlendMode(value) {
         value = cssInitialIfReset(this.coerceCssStringValue(value), 'normal');
-        this.setPseudoCssStringValue('background-blend-mode', value, () => nodeHelper().setBackgroundBlendMode(this.nativeView, value), () => (this.nativeView.style.backgroundBlendMode = value));
+        this.setPseudoCssStringValue('background-blend-mode', value, () => nodeHelper().setBackgroundBlendMode(this.nativeView, value), () => (this.appleStyle.backgroundBlendMode = value));
     }
     hasBorderRadius() {
         const view = this.style_view;
@@ -4612,7 +4653,7 @@ export class Style {
             return this._borderRadiusCss ?? nodeHelper().getBorderRadius(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.borderRadius;
+            return this._borderRadiusCss ?? this.appleStyle.borderRadius;
         }
         if (__WINDOWS__ && this.style_view) {
             // Read back so a single corner longhand keeps the other three instead of resetting them to 0.
@@ -4625,12 +4666,12 @@ export class Style {
     }
     set borderRadius(value) {
         value = this.coerceCssStringValue(value);
-        if (__ANDROID__ && this.nativeView && !this._pseudo && this._writeBorderRadius(value, deviceScale())) {
+        if ((__ANDROID__ || __APPLE__) && this.nativeView && !this._pseudo && this._writeBorderRadius(value, deviceScale())) {
             return;
         }
         if (!this._pseudo)
             this._borderRadiusCss = undefined;
-        this.setPseudoCssStringValue('border-radius', value, () => nodeHelper().setBorderRadius(this.nativeView, value), () => (this.nativeView.style.borderRadius = value));
+        this.setPseudoCssStringValue('border-radius', value, () => nodeHelper().setBorderRadius(this.nativeView, value), () => (this.appleStyle.borderRadius = value));
     }
     _writeCornerRadius(corner, radius, shorthand, scale = deviceScale()) {
         if (!this.nativeView || this._pseudo || !this.style_view)
@@ -4741,7 +4782,7 @@ export class Style {
             return nodeHelper().getFontFamily(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.fontFamily;
+            return this.appleStyle.fontFamily;
         }
         return '';
     }
@@ -4749,11 +4790,11 @@ export class Style {
     // style-buffer field, so it can't be written through the shared buffer.
     set fontFamily(value) {
         value = this.coerceCssStringValue(value);
-        this.setPseudoCssStringValue('font-family', value, () => nodeHelper().setFontFamily(this.nativeView, value), () => (this.nativeView.style.fontFamily = value));
+        this.setPseudoCssStringValue('font-family', value, () => nodeHelper().setFontFamily(this.nativeView, value), () => (this.appleStyle.fontFamily = value));
     }
     set textDecoration(value) {
         value = this.coerceCssStringValue(value);
-        this.setPseudoCssStringValue('text-decoration', value, () => nodeHelper().setTextDecoration(this.nativeView, value), () => this.nativeView.style.setTextDecoration(value));
+        this.setPseudoCssStringValue('text-decoration', value, () => nodeHelper().setTextDecoration(this.nativeView, value), () => this.appleStyle.setTextDecoration(value));
     }
     get textDecorationLine() {
         if (!this.nativeView) {
@@ -4763,7 +4804,7 @@ export class Style {
             return nodeHelper().getTextDecorationLine(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.textDecorationLine;
+            return this.appleStyle.textDecorationLine;
         }
         if (__WINDOWS__ && this.style_view) {
             return textDecorationLineToCss(getUint8(this.style_view, StyleKeys.DECORATION_LINE));
@@ -4772,7 +4813,7 @@ export class Style {
     }
     set textDecorationLine(value) {
         value = cssInitialIfReset(this.coerceCssStringValue(value), 'none');
-        this.setPseudoCssStringValue('text-decoration-line', value, () => nodeHelper().setTextDecorationLine(this.nativeView, value), () => (this.nativeView.style.textDecorationLine = value));
+        this.setPseudoCssStringValue('text-decoration-line', value, () => nodeHelper().setTextDecorationLine(this.nativeView, value), () => (this.appleStyle.textDecorationLine = value));
     }
     get textDecorationStyle() {
         if (!this.nativeView) {
@@ -4782,7 +4823,7 @@ export class Style {
             return nodeHelper().getTextDecorationStyle(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.textDecorationStyle;
+            return this.appleStyle.textDecorationStyle;
         }
         if (__WINDOWS__ && this.style_view) {
             return textDecorationStyleToCss(getUint8(this.style_view, StyleKeys.DECORATION_STYLE));
@@ -4791,7 +4832,7 @@ export class Style {
     }
     set textDecorationStyle(value) {
         value = cssInitialIfReset(this.coerceCssStringValue(value), 'solid');
-        this.setPseudoCssStringValue('text-decoration-style', value, () => nodeHelper().setTextDecorationStyle(this.nativeView, value), () => (this.nativeView.style.textDecorationStyle = value));
+        this.setPseudoCssStringValue('text-decoration-style', value, () => nodeHelper().setTextDecorationStyle(this.nativeView, value), () => (this.appleStyle.textDecorationStyle = value));
     }
     get textDecorationColor() {
         if (!this.nativeView) {
@@ -4801,7 +4842,7 @@ export class Style {
             return nodeHelper().getTextDecorationColor(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.textDecorationColor;
+            return this.appleStyle.textDecorationColor;
         }
         if (__WINDOWS__ && this.style_view) {
             const argb = getUint32(this.style_view, StyleKeys.DECORATION_COLOR);
@@ -4811,7 +4852,7 @@ export class Style {
     }
     set textDecorationColor(value) {
         value = cssInitialIfReset(this.coerceCssStringValue(value), 'currentcolor');
-        this.setPseudoCssStringValue('text-decoration-color', value, () => nodeHelper().setTextDecorationColor(this.nativeView, value), () => (this.nativeView.style.textDecorationColor = value));
+        this.setPseudoCssStringValue('text-decoration-color', value, () => nodeHelper().setTextDecorationColor(this.nativeView, value), () => (this.appleStyle.textDecorationColor = value));
     }
     get border() {
         if (!this.nativeView) {
@@ -4821,13 +4862,13 @@ export class Style {
             return nodeHelper().getBorder(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.border;
+            return this.appleStyle.border;
         }
         return '';
     }
     set border(value) {
         value = this.coerceCssStringValue(value);
-        this.setPseudoCssStringValue('border', value, () => nodeHelper().setBorder(this.nativeView, value), () => (this.nativeView.style.border = value));
+        this.setPseudoCssStringValue('border', value, () => nodeHelper().setBorder(this.nativeView, value), () => (this.appleStyle.border = value));
     }
     get paddingCss() {
         if (!this.nativeView)
@@ -4836,7 +4877,7 @@ export class Style {
             return nodeHelper().getPaddingCssValue(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.paddingCss;
+            return this.appleStyle.paddingCss;
         }
         return '';
     }
@@ -4844,7 +4885,7 @@ export class Style {
         // a bare number is dip, matching other numeric setters; Android's
         // native parser treats "px" as unscaled device pixels, "dip" as scaled
         const strValue = typeof value === 'number' ? `${value}dip` : value;
-        this.setPseudoCssStringValue('padding', strValue, () => nodeHelper().setPaddingCss(this.nativeView, strValue), () => (this.nativeView.style.paddingCss = strValue));
+        this.setPseudoCssStringValue('padding', strValue, () => nodeHelper().setPaddingCss(this.nativeView, strValue), () => (this.appleStyle.paddingCss = strValue));
     }
     get marginCss() {
         if (!this.nativeView)
@@ -4853,14 +4894,14 @@ export class Style {
             return nodeHelper().getMarginCssValue(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.marginCss;
+            return this.appleStyle.marginCss;
         }
         return '';
     }
     set marginCss(value) {
         // See the comment on `paddingCss` above — same dip-vs-px mislabeling fix.
         const strValue = typeof value === 'number' ? `${value}dip` : value;
-        this.setPseudoCssStringValue('margin', strValue, () => nodeHelper().setMarginCss(this.nativeView, strValue), () => (this.nativeView.style.marginCss = strValue));
+        this.setPseudoCssStringValue('margin', strValue, () => nodeHelper().setMarginCss(this.nativeView, strValue), () => (this.appleStyle.marginCss = strValue));
     }
     get insetCss() {
         if (!this.nativeView)
@@ -4869,42 +4910,42 @@ export class Style {
             return nodeHelper().getInsetCssValue(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.insetCss;
+            return this.appleStyle.insetCss;
         }
         return '';
     }
     set insetCss(value) {
         // See the comment on `paddingCss` above — same dip-vs-px mislabeling fix.
         const strValue = typeof value === 'number' ? `${value}dip` : value;
-        this.setPseudoCssStringValue('inset', strValue, () => nodeHelper().setInsetCss(this.nativeView, strValue), () => (this.nativeView.style.insetCss = strValue));
+        this.setPseudoCssStringValue('inset', strValue, () => nodeHelper().setInsetCss(this.nativeView, strValue), () => (this.appleStyle.insetCss = strValue));
     }
     get borderLeft() {
         return '';
     }
     set borderLeft(value) {
         value = this.coerceCssStringValue(value);
-        this.setPseudoCssStringValue('border-left', value, () => nodeHelper().setBorderLeft(this.nativeView, value), () => (this.nativeView.style.borderLeft = value));
+        this.setPseudoCssStringValue('border-left', value, () => nodeHelper().setBorderLeft(this.nativeView, value), () => (this.appleStyle.borderLeft = value));
     }
     get borderTop() {
         return '';
     }
     set borderTop(value) {
         value = this.coerceCssStringValue(value);
-        this.setPseudoCssStringValue('border-top', value, () => nodeHelper().setBorderTop(this.nativeView, value), () => (this.nativeView.style.borderTop = value));
+        this.setPseudoCssStringValue('border-top', value, () => nodeHelper().setBorderTop(this.nativeView, value), () => (this.appleStyle.borderTop = value));
     }
     get borderRight() {
         return '';
     }
     set borderRight(value) {
         value = this.coerceCssStringValue(value);
-        this.setPseudoCssStringValue('border-right', value, () => nodeHelper().setBorderRight(this.nativeView, value), () => (this.nativeView.style.borderRight = value));
+        this.setPseudoCssStringValue('border-right', value, () => nodeHelper().setBorderRight(this.nativeView, value), () => (this.appleStyle.borderRight = value));
     }
     get borderBottom() {
         return '';
     }
     set borderBottom(value) {
         value = this.coerceCssStringValue(value);
-        this.setPseudoCssStringValue('border-bottom', value, () => nodeHelper().setBorderBottom(this.nativeView, value), () => (this.nativeView.style.borderBottom = value));
+        this.setPseudoCssStringValue('border-bottom', value, () => nodeHelper().setBorderBottom(this.nativeView, value), () => (this.appleStyle.borderBottom = value));
     }
     get filter() {
         if (!this.nativeView) {
@@ -4914,13 +4955,13 @@ export class Style {
             return nodeHelper().getFilter(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.filter;
+            return this.appleStyle.filter;
         }
         return '';
     }
     set filter(value) {
         value = this.coerceCssStringValue(value);
-        this.setPseudoCssStringValue('filter', value, () => nodeHelper().setFilter(this.nativeView, value), () => (this.nativeView.style.filter = value));
+        this.setPseudoCssStringValue('filter', value, () => nodeHelper().setFilter(this.nativeView, value), () => (this.appleStyle.filter = value));
     }
     get boxShadow() {
         if (!this.nativeView) {
@@ -4930,7 +4971,7 @@ export class Style {
             return nodeHelper().getBoxShadow(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.boxShadow;
+            return this.appleStyle.boxShadow;
         }
         return '';
     }
@@ -4942,7 +4983,7 @@ export class Style {
     }
     set boxShadow(value) {
         value = this.coerceCssStringValue(value);
-        this.setPseudoCssStringValue('box-shadow', value, () => nodeHelper().setBoxShadow(this.nativeView, value), () => (this.nativeView.style.boxShadow = value));
+        this.setPseudoCssStringValue('box-shadow', value, () => nodeHelper().setBoxShadow(this.nativeView, value), () => (this.appleStyle.boxShadow = value));
     }
     get transform() {
         if (!this.nativeView) {
@@ -4952,13 +4993,13 @@ export class Style {
             return nodeHelper().getTransform(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.transform;
+            return this.appleStyle.transform;
         }
         return '';
     }
     set transform(value) {
         value = this.coerceCssStringValue(value);
-        this.setPseudoCssStringValue('transform', value, () => nodeHelper().setTransform(this.nativeView, value), () => (this.nativeView.style.transform = value));
+        this.setPseudoCssStringValue('transform', value, () => nodeHelper().setTransform(this.nativeView, value), () => (this.appleStyle.transform = value));
     }
     get verticalAlign() {
         const isPercent = getUint8(this.style_view, StyleKeys.VERTICAL_ALIGN_IS_PERCENT_OFFSET) == 1;
@@ -5116,13 +5157,13 @@ export class Style {
             return nodeHelper().getTextShadow(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.textShadow;
+            return this.appleStyle.textShadow;
         }
         return '';
     }
     set textShadow(value) {
         value = this.coerceCssStringValue(value);
-        this.setPseudoCssStringValue('text-shadow', value, () => nodeHelper().setTextShadow(this.nativeView, value), () => (this.nativeView.style.textShadow = value));
+        this.setPseudoCssStringValue('text-shadow', value, () => nodeHelper().setTextShadow(this.nativeView, value), () => (this.appleStyle.textShadow = value));
     }
     get zIndex() {
         return getInt32(this.style_view, StyleKeys.Z_INDEX);
@@ -5204,7 +5245,7 @@ export class Style {
     }
     set cornerShape(value) {
         value = this.coerceCssStringValue(value);
-        this.setPseudoCssStringValue('corner-shape', value, () => nodeHelper().setCornerShape(this.nativeView, value), () => (this.nativeView.style.cornerShape = value));
+        this.setPseudoCssStringValue('corner-shape', value, () => nodeHelper().setCornerShape(this.nativeView, value), () => (this.appleStyle.cornerShape = value));
     }
     get cornerShape() {
         if (!this.nativeView) {
@@ -5214,7 +5255,7 @@ export class Style {
             return nodeHelper().getCornerShape(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.cornerShape;
+            return this.appleStyle.cornerShape;
         }
         return '';
     }
@@ -5225,13 +5266,13 @@ export class Style {
             return nodeHelper().getCornerShapeTopLeft(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.cornerShapeTopLeft;
+            return this.appleStyle.cornerShapeTopLeft;
         }
         return '';
     }
     set cornerShapeTopLeft(value) {
         value = this.coerceCssStringValue(value);
-        this.setPseudoCssStringValue('corner-shape-top-left', value, () => nodeHelper().setCornerShapeTopLeft(this.nativeView, value), () => (this.nativeView.style.cornerShapeTopLeft = value));
+        this.setPseudoCssStringValue('corner-shape-top-left', value, () => nodeHelper().setCornerShapeTopLeft(this.nativeView, value), () => (this.appleStyle.cornerShapeTopLeft = value));
     }
     get cornerShapeTopRight() {
         if (!this.nativeView)
@@ -5240,13 +5281,13 @@ export class Style {
             return nodeHelper().getCornerShapeTopRight(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.cornerShapeTopRight;
+            return this.appleStyle.cornerShapeTopRight;
         }
         return '';
     }
     set cornerShapeTopRight(value) {
         value = this.coerceCssStringValue(value);
-        this.setPseudoCssStringValue('corner-shape-top-right', value, () => nodeHelper().setCornerShapeTopRight(this.nativeView, value), () => (this.nativeView.style.cornerShapeTopRight = value));
+        this.setPseudoCssStringValue('corner-shape-top-right', value, () => nodeHelper().setCornerShapeTopRight(this.nativeView, value), () => (this.appleStyle.cornerShapeTopRight = value));
     }
     get cornerShapeBottomRight() {
         if (!this.nativeView)
@@ -5255,13 +5296,13 @@ export class Style {
             return nodeHelper().getCornerShapeBottomRight(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.cornerShapeBottomRight;
+            return this.appleStyle.cornerShapeBottomRight;
         }
         return '';
     }
     set cornerShapeBottomRight(value) {
         value = this.coerceCssStringValue(value);
-        this.setPseudoCssStringValue('corner-shape-bottom-right', value, () => nodeHelper().setCornerShapeBottomRight(this.nativeView, value), () => (this.nativeView.style.cornerShapeBottomRight = value));
+        this.setPseudoCssStringValue('corner-shape-bottom-right', value, () => nodeHelper().setCornerShapeBottomRight(this.nativeView, value), () => (this.appleStyle.cornerShapeBottomRight = value));
     }
     get cornerShapeBottomLeft() {
         if (!this.nativeView)
@@ -5270,13 +5311,13 @@ export class Style {
             return nodeHelper().getCornerShapeBottomLeft(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.cornerShapeBottomLeft;
+            return this.appleStyle.cornerShapeBottomLeft;
         }
         return '';
     }
     set cornerShapeBottomLeft(value) {
         value = this.coerceCssStringValue(value);
-        this.setPseudoCssStringValue('corner-shape-bottom-left', value, () => nodeHelper().setCornerShapeBottomLeft(this.nativeView, value), () => (this.nativeView.style.cornerShapeBottomLeft = value));
+        this.setPseudoCssStringValue('corner-shape-bottom-left', value, () => nodeHelper().setCornerShapeBottomLeft(this.nativeView, value), () => (this.appleStyle.cornerShapeBottomLeft = value));
     }
     get objectPosition() {
         if (!this.style_view)
@@ -5418,13 +5459,13 @@ export class Style {
             return nodeHelper().getBorderImage(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.borderImage;
+            return this.appleStyle.borderImage;
         }
         return '';
     }
     set borderImage(value) {
         value = this.coerceCssStringValue(value);
-        this.setPseudoCssStringValue('border-image', value, () => nodeHelper().setBorderImage(this.nativeView, value), () => (this.nativeView.style.borderImage = value));
+        this.setPseudoCssStringValue('border-image', value, () => nodeHelper().setBorderImage(this.nativeView, value), () => (this.appleStyle.borderImage = value));
     }
     set 'border-image'(value) {
         this.borderImage = value;
@@ -5465,13 +5506,13 @@ export class Style {
             return nodeHelper().getFontFeatureSettings(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.fontFeatureSettings;
+            return this.appleStyle.fontFeatureSettings;
         }
         return 'normal';
     }
     set fontFeatureSettings(value) {
         value = this.coerceCssStringValue(value);
-        this.setPseudoCssStringValue('font-feature-settings', value, () => nodeHelper().setFontFeatureSettings(this.nativeView, value), () => (this.nativeView.style.fontFeatureSettings = value));
+        this.setPseudoCssStringValue('font-feature-settings', value, () => nodeHelper().setFontFeatureSettings(this.nativeView, value), () => (this.appleStyle.fontFeatureSettings = value));
     }
     set 'font-feature-settings'(value) {
         this.fontFeatureSettings = value;
@@ -5571,13 +5612,13 @@ export class Style {
             return nodeHelper().getBackdropFilter(this.nativeView);
         }
         if (__APPLE__) {
-            return this.nativeView.style.backdropFilter;
+            return this.appleStyle.backdropFilter;
         }
         return '';
     }
     set backdropFilter(value) {
         value = this.coerceCssStringValue(value);
-        this.setPseudoCssStringValue('backdrop-filter', value, () => nodeHelper().setBackdropFilter(this.nativeView, value), () => (this.nativeView.style.backdropFilter = value));
+        this.setPseudoCssStringValue('backdrop-filter', value, () => nodeHelper().setBackdropFilter(this.nativeView, value), () => (this.appleStyle.backdropFilter = value));
     }
     set 'backdrop-filter'(value) {
         this.backdropFilter = value;