From 2396c9f93b61dc7f7260499f1b72e6ea059e9e62 Mon Sep 17 00:00:00 2001 From: Mathieu Acthernoene Date: Thu, 5 Mar 2026 10:55:13 +0100 Subject: [PATCH 1/2] Remove StyleSheet.absoluteFillObject --- packages/benchmarks/src/app/App.js | 2 +- .../src/pages/docs/apis/style-sheet.md | 4 ---- .../react-native-web/src/exports/CheckBox/index.js | 2 +- .../react-native-web/src/exports/Image/index.js | 4 ++-- .../src/exports/StyleSheet/__tests__/index-test.js | 12 ------------ .../src/exports/StyleSheet/index.js | 14 +++----------- .../react-native-web/src/exports/Switch/index.js | 4 ++-- 7 files changed, 9 insertions(+), 33 deletions(-) diff --git a/packages/benchmarks/src/app/App.js b/packages/benchmarks/src/app/App.js index 1728c049e8..44b53c4bb4 100644 --- a/packages/benchmarks/src/app/App.js +++ b/packages/benchmarks/src/app/App.js @@ -293,7 +293,7 @@ const styles = StyleSheet.create({ color: colors.deepGray }, picker: { - ...StyleSheet.absoluteFillObject, + ...StyleSheet.absoluteFill, appearance: 'none', opacity: 0, width: '100%' diff --git a/packages/react-native-web-docs/src/pages/docs/apis/style-sheet.md b/packages/react-native-web-docs/src/pages/docs/apis/style-sheet.md index 3b15ed7191..aada0065e0 100644 --- a/packages/react-native-web-docs/src/pages/docs/apis/style-sheet.md +++ b/packages/react-native-web-docs/src/pages/docs/apis/style-sheet.md @@ -33,10 +33,6 @@ import { StyleSheet } from 'react-native'; A very common pattern is to create overlays with position absolute and zero positioning, so `absoluteFill` can be used for convenience and to reduce duplication of these repeated styles. {% endcall %} -{% call macro.prop('absoluteFillObject', '?Object') %} -Sometimes you may want `absoluteFill` but with a couple tweaks - `absoluteFillObject` can be used to create a customized entry in a StyleSheet. -{% endcall %} - {% call macro.prop('hairlineWidth', '?Object') %} Equal to 1px. This is not implemented using screen density as browsers may round sub-pixel values down to `0`, causing the line not to be rendered. {% endcall %} diff --git a/packages/react-native-web/src/exports/CheckBox/index.js b/packages/react-native-web/src/exports/CheckBox/index.js index 144eb90c3b..f24ef24b19 100644 --- a/packages/react-native-web/src/exports/CheckBox/index.js +++ b/packages/react-native-web/src/exports/CheckBox/index.js @@ -131,7 +131,7 @@ const styles = StyleSheet.create({ borderColor: '#AAB8C2' }, nativeControl: { - ...StyleSheet.absoluteFillObject, + ...StyleSheet.absoluteFill, height: '100%', margin: 0, appearance: 'none', diff --git a/packages/react-native-web/src/exports/Image/index.js b/packages/react-native-web/src/exports/Image/index.js index f99faa7ec3..a6a59aa57c 100644 --- a/packages/react-native-web/src/exports/Image/index.js +++ b/packages/react-native-web/src/exports/Image/index.js @@ -398,7 +398,7 @@ const styles = StyleSheet.create({ resizeMode: null }, image: { - ...StyleSheet.absoluteFillObject, + ...StyleSheet.absoluteFill, backgroundColor: 'transparent', backgroundPosition: 'center', backgroundRepeat: 'no-repeat', @@ -408,7 +408,7 @@ const styles = StyleSheet.create({ zIndex: -1 }, accessibilityImage$raw: { - ...StyleSheet.absoluteFillObject, + ...StyleSheet.absoluteFill, height: '100%', opacity: 0, width: '100%', diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/index-test.js b/packages/react-native-web/src/exports/StyleSheet/__tests__/index-test.js index 888de2624e..162d48df00 100644 --- a/packages/react-native-web/src/exports/StyleSheet/__tests__/index-test.js +++ b/packages/react-native-web/src/exports/StyleSheet/__tests__/index-test.js @@ -40,18 +40,6 @@ describe('StyleSheet', () => { `); }); - test('absoluteFillObject', () => { - expect(StyleSheet.absoluteFillObject).toMatchInlineSnapshot(` - { - "bottom": 0, - "left": 0, - "position": "absolute", - "right": 0, - "top": 0, - } - `); - }); - describe('create', () => { test('returns original style objects', () => { const style = StyleSheet.create({ root: { position: 'absolute' } }); diff --git a/packages/react-native-web/src/exports/StyleSheet/index.js b/packages/react-native-web/src/exports/StyleSheet/index.js index a13393665b..3b339bfdbe 100644 --- a/packages/react-native-web/src/exports/StyleSheet/index.js +++ b/packages/react-native-web/src/exports/StyleSheet/index.js @@ -63,15 +63,9 @@ function compileAndInsertReset(style, key) { /* ----- API ----- */ -const absoluteFillObject = { - position: 'absolute', - left: 0, - right: 0, - top: 0, - bottom: 0 -}; - -const absoluteFill = create({ x: { ...absoluteFillObject } }).x; +const absoluteFill = create({ + x: { position: 'absolute', left: 0, right: 0, top: 0, bottom: 0 } +}).x; /** * create @@ -168,7 +162,6 @@ function StyleSheet(styles: any, options?: Options = {}): StyleProps { } StyleSheet.absoluteFill = absoluteFill; -StyleSheet.absoluteFillObject = absoluteFillObject; StyleSheet.create = create; StyleSheet.compose = compose; StyleSheet.flatten = flatten; @@ -184,7 +177,6 @@ if (canUseDOM && window.__REACT_DEVTOOLS_GLOBAL_HOOK__) { export type IStyleSheet = { (styles: $ReadOnlyArray, options?: Options): StyleProps, absoluteFill: Object, - absoluteFillObject: Object, create: typeof create, compose: typeof compose, flatten: typeof flatten, diff --git a/packages/react-native-web/src/exports/Switch/index.js b/packages/react-native-web/src/exports/Switch/index.js index 93282f621e..099d1a62fb 100644 --- a/packages/react-native-web/src/exports/Switch/index.js +++ b/packages/react-native-web/src/exports/Switch/index.js @@ -205,7 +205,7 @@ const styles = StyleSheet.create({ }, track: { forcedColorAdjust: 'none', - ...StyleSheet.absoluteFillObject, + ...StyleSheet.absoluteFill, height: '70%', margin: 'auto', transitionDuration: '0.1s', @@ -224,7 +224,7 @@ const styles = StyleSheet.create({ insetInlineStart: '100%' }, nativeControl: { - ...StyleSheet.absoluteFillObject, + ...StyleSheet.absoluteFill, height: '100%', margin: 0, appearance: 'none', From 266d1d84fd76836a5b60642d628fb96e3b08e645 Mon Sep 17 00:00:00 2001 From: Mathieu Acthernoene Date: Thu, 5 Mar 2026 10:55:32 +0100 Subject: [PATCH 2/2] Update lock file --- package-lock.json | 43 ------------------------------------------- 1 file changed, 43 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9027a0c7b4..52518e3772 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3365,42 +3365,6 @@ "dev": true, "license": "MIT" }, - "node_modules/@types/prop-types": { - "version": "15.7.5", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true - }, - "node_modules/@types/react": { - "version": "18.0.28", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true, - "dependencies": { - "@types/prop-types": "*", - "@types/scheduler": "*", - "csstype": "^3.0.2" - } - }, - "node_modules/@types/react-dom": { - "version": "18.0.10", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true, - "dependencies": { - "@types/react": "*" - } - }, - "node_modules/@types/scheduler": { - "version": "0.16.2", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true - }, "node_modules/@types/stack-utils": { "version": "2.0.3", "dev": true, @@ -5410,13 +5374,6 @@ "dev": true, "license": "MIT" }, - "node_modules/csstype": { - "version": "3.1.1", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true - }, "node_modules/d3-color": { "version": "3.1.0", "license": "ISC",