wix · ChrisJamesC · Aug 19, 2026
diff --git a/demo/src/screens/componentScreens/TabControllerScreen/tab1.tsx b/demo/src/screens/componentScreens/TabControllerScreen/tab1.tsx
@@ -8,7 +8,7 @@ class Tab1 extends Component {
     return (
       <View flex padding-20>
         <Image
-          style={StyleSheet.absoluteFillObject}
+          style={StyleSheet.absoluteFill}
           overlayType="top"
           source={{
             uri:

diff --git a/demo/src/screens/componentScreens/TabControllerScreen/tab2.tsx b/demo/src/screens/componentScreens/TabControllerScreen/tab2.tsx
@@ -18,7 +18,7 @@ class Tab2 extends Component {
     return (
       <View flex padding-20>
         <Image
-          style={StyleSheet.absoluteFillObject}
+          style={StyleSheet.absoluteFill}
           overlayType="top"
           source={{
             uri:

diff --git a/docs/foundation/modifiers.md b/docs/foundation/modifiers.md
@@ -128,7 +128,7 @@ Easily control component positioning with our absolute position modifiers:
 ### Stretch Options
 - `absH` - Position absolutely and stretch horizontally
 - `absV` - Position absolutely and stretch vertically
-- `absF` - Position absolutely and fill the entire parent container (equivalent to `StyleSheet.absoluteFillObject`)
+- `absF` - Position absolutely and fill the entire parent container (equivalent to `StyleSheet.absoluteFill`)
 
 ```jsx
 <View absL>

diff --git a/packages/react-native-ui-lib/src/commons/modifiers.ts b/packages/react-native-ui-lib/src/commons/modifiers.ts
@@ -457,7 +457,7 @@ export function getAlteredModifiersOptions(currentProps: any, nextProps: any) {
 
 const styles = StyleSheet.create({
   absolute: {position: 'absolute'},
-  absoluteFill: StyleSheet.absoluteFillObject,
+  absoluteFill: StyleSheet.absoluteFill,
   absoluteTop: {position: 'absolute', top: 0},
   absoluteBottom: {position: 'absolute', bottom: 0},
   absoluteLeft: {position: 'absolute', left: 0},

diff --git a/packages/react-native-ui-lib/src/components/actionBar/index.tsx b/packages/react-native-ui-lib/src/components/actionBar/index.tsx
@@ -90,7 +90,7 @@ function createStyles({height, backgroundColor}: any) {
       height
     },
     absoluteContainer: {
-      ...StyleSheet.absoluteFillObject,
+      ...StyleSheet.absoluteFill,
       top: undefined,
       backgroundColor,
       ...Shadows.white40.top

diff --git a/packages/react-native-ui-lib/src/components/animatedImage/index.tsx b/packages/react-native-ui-lib/src/components/animatedImage/index.tsx
@@ -106,7 +106,7 @@ export default AnimatedImage;
 
 const styles = StyleSheet.create({
   loader: {
-    ...StyleSheet.absoluteFillObject,
+    ...StyleSheet.absoluteFill,
     justifyContent: 'center'
   }
 });
diff --git a/packages/react-native-ui-lib/src/components/animatedScanner/index.js b/packages/react-native-ui-lib/src/components/animatedScanner/index.js
@@ -74,7 +74,7 @@ export default class AnimatedScanner extends BaseComponent {
     const {isDone, animatedProgress} = this.state;
 
     return (
-      <View style={[{...StyleSheet.absoluteFillObject}, containerStyle]}>
+      <View style={[{...StyleSheet.absoluteFill}, containerStyle]}>
         <Animated.View
           style={[
             this.styles.container,
@@ -100,12 +100,12 @@ export default class AnimatedScanner extends BaseComponent {
 function createStyles() {
   return StyleSheet.create({
     container: {
-      ...StyleSheet.absoluteFillObject,
+      ...StyleSheet.absoluteFill,
       backgroundColor: Colors.white,
       opacity: 0.9
     },
     scanner: {
-      ...StyleSheet.absoluteFillObject,
+      ...StyleSheet.absoluteFill,
       borderWidth: StyleSheet.hairlineWidth,
       borderColor: Colors.grey50
     }

diff --git a/packages/react-native-ui-lib/src/components/avatar/index.tsx b/packages/react-native-ui-lib/src/components/avatar/index.tsx
@@ -288,7 +288,7 @@ const Avatar = forwardRef<any, AvatarProps>((props: AvatarProps, ref: React.Forw
   }, [props]);
 
   const _imageStyle = useMemo(() => {
-    return [_baseContainerStyle, StyleSheet.absoluteFillObject, imageStyle];
+    return [_baseContainerStyle, StyleSheet.absoluteFill, imageStyle];
   }, [_baseContainerStyle, imageStyle]);
 
   const renderImage = () => {
@@ -382,7 +382,7 @@ const Avatar = forwardRef<any, AvatarProps>((props: AvatarProps, ref: React.Forw
 
 const styles = StyleSheet.create({
   initialsContainer: {
-    ...StyleSheet.absoluteFillObject,
+    ...StyleSheet.absoluteFill,
     alignItems: 'center',
     justifyContent: 'center',
     borderRadius: BorderRadiuses.br100,

diff --git a/packages/react-native-ui-lib/src/components/card/index.tsx b/packages/react-native-ui-lib/src/components/card/index.tsx
@@ -316,11 +316,11 @@ function createStyles({width, height, borderRadius, selectionOptions}: CardProps
       shadowOffset: {height: 5, width: 0}
     },
     blurView: {
-      ...StyleSheet.absoluteFillObject,
+      ...StyleSheet.absoluteFill,
       borderRadius: brRadius
     },
     selectedBorder: {
-      ...StyleSheet.absoluteFillObject,
+      ...StyleSheet.absoluteFill,
       borderRadius: DEFAULT_BORDER_RADIUS,
       borderWidth: selectionOptionsWithDefaults.borderWidth,
       borderColor: selectionOptionsWithDefaults.color

diff --git a/packages/react-native-ui-lib/src/components/colorSwatch/index.tsx b/packages/react-native-ui-lib/src/components/colorSwatch/index.tsx
@@ -235,7 +235,7 @@ function createStyles({color = DEFAULT_COLOR}) {
       overflow: 'hidden'
     },
     transparentImage: {
-      ...StyleSheet.absoluteFillObject,
+      ...StyleSheet.absoluteFill,
       width: DEFAULT_SIZE,
       height: DEFAULT_SIZE,
       borderWidth: 1,

diff --git a/packages/react-native-ui-lib/src/components/connectionStatusBar/index.tsx b/packages/react-native-ui-lib/src/components/connectionStatusBar/index.tsx
@@ -137,7 +137,7 @@ function createStyles() {
       backgroundColor: Colors.grey30
     },
     absolutePosition: {
-      ...StyleSheet.absoluteFillObject,
+      ...StyleSheet.absoluteFill,
       bottom: undefined
     },
     container: {

diff --git a/packages/react-native-ui-lib/src/components/drawer/Swipeable.tsx b/packages/react-native-ui-lib/src/components/drawer/Swipeable.tsx
@@ -541,11 +541,11 @@ const styles = StyleSheet.create({
     overflow: 'hidden'
   },
   leftActions: {
-    ...StyleSheet.absoluteFillObject,
+    ...StyleSheet.absoluteFill,
     flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row'
   },
   rightActions: {
-    ...StyleSheet.absoluteFillObject,
+    ...StyleSheet.absoluteFill,
     flexDirection: I18nManager.isRTL ? 'row' : 'row-reverse'
   }
 });
diff --git a/packages/react-native-ui-lib/src/components/featureHighlight/index.tsx b/packages/react-native-ui-lib/src/components/featureHighlight/index.tsx
@@ -429,7 +429,7 @@ const styles = StyleSheet.create({
     lineHeight: messageLineHeight
   },
   touchableOverlay: {
-    ...StyleSheet.absoluteFillObject
+    ...StyleSheet.absoluteFill
   }
 });
 export {FeatureHighlight}; // for tests

diff --git a/packages/react-native-ui-lib/src/components/gridView/index.tsx b/packages/react-native-ui-lib/src/components/gridView/index.tsx
@@ -219,7 +219,7 @@ const styles = StyleSheet.create({
     flexWrap: 'wrap'
   },
   overlayContainer: {
-    ...StyleSheet.absoluteFillObject,
+    ...StyleSheet.absoluteFill,
     alignItems: 'center',
     justifyContent: 'center'
   }

diff --git a/packages/react-native-ui-lib/src/components/hint/HintOld.tsx b/packages/react-native-ui-lib/src/components/hint/HintOld.tsx
@@ -468,7 +468,7 @@ class Hint extends Component<HintProps, HintState> {
           testID={`${testID}.overlay`}
         >
           {onBackgroundPress && (
-            <TouchableWithoutFeedback style={StyleSheet.absoluteFillObject} onPress={onBackgroundPress}>
+            <TouchableWithoutFeedback style={StyleSheet.absoluteFill} onPress={onBackgroundPress}>
               <View flex/>
             </TouchableWithoutFeedback>
           )}

diff --git a/packages/react-native-ui-lib/src/components/hint/index.tsx b/packages/react-native-ui-lib/src/components/hint/index.tsx
@@ -129,7 +129,7 @@ const Hint = (props: HintProps) => {
           testID={`${testID}.overlay`}
         >
           {onBackgroundPress && (
-            <TouchableWithoutFeedback style={StyleSheet.absoluteFillObject} onPress={onBackgroundPress}>
+            <TouchableWithoutFeedback style={StyleSheet.absoluteFill} onPress={onBackgroundPress}>
               <View flex/>
             </TouchableWithoutFeedback>
           )}

diff --git a/packages/react-native-ui-lib/src/components/loaderScreen/index.tsx b/packages/react-native-ui-lib/src/components/loaderScreen/index.tsx
@@ -47,7 +47,7 @@ const styles = StyleSheet.create({
     flex: 1
   },
   overlayContainer: {
-    ...StyleSheet.absoluteFillObject,
+    ...StyleSheet.absoluteFill,
     backgroundColor: Colors.rgba(Colors.white, 0.85),
     zIndex: 100
   },

diff --git a/packages/react-native-ui-lib/src/components/maskedInput/index.tsx b/packages/react-native-ui-lib/src/components/maskedInput/index.tsx
@@ -122,7 +122,7 @@ function MaskedInput(props: MaskedInputProps, ref: ForwardedRef<any>) {
 
 const styles = StyleSheet.create({
   hiddenInput: {
-    ...StyleSheet.absoluteFillObject,
+    ...StyleSheet.absoluteFill,
     zIndex: 1,
     color: 'transparent',
     backgroundColor: 'transparent',

diff --git a/packages/react-native-ui-lib/src/components/modal/index.tsx b/packages/react-native-ui-lib/src/components/modal/index.tsx
@@ -152,7 +152,7 @@ class Modal extends Component<ModalProps> {
 
 const styles = StyleSheet.create({
   touchableOverlay: {
-    ...StyleSheet.absoluteFillObject
+    ...StyleSheet.absoluteFill
   },
   fill: {
     flex: 1

diff --git a/packages/react-native-ui-lib/src/components/overlay/index.tsx b/packages/react-native-ui-lib/src/components/overlay/index.tsx
@@ -126,7 +126,7 @@ class Overlay extends PureComponent<OverlayTypes> {
 
 const styles = StyleSheet.create({
   container: {
-    ...StyleSheet.absoluteFillObject,
+    ...StyleSheet.absoluteFill,
     width: Constants.isWeb ? '100%' : undefined
   },
   top: {
@@ -142,7 +142,7 @@ const styles = StyleSheet.create({
     height: '40%'
   },
   customContent: {
-    ...StyleSheet.absoluteFillObject
+    ...StyleSheet.absoluteFill
   }
 });
 

diff --git a/packages/react-native-ui-lib/src/components/slider/index.tsx b/packages/react-native-ui-lib/src/components/slider/index.tsx
@@ -702,7 +702,7 @@ const styles = StyleSheet.create({
     right: 0
   },
   touchArea: {
-    ...StyleSheet.absoluteFillObject,
+    ...StyleSheet.absoluteFill,
     backgroundColor: 'transparent'
   }
 });
diff --git a/packages/react-native-ui-lib/src/components/tabController/TabPage.tsx b/packages/react-native-ui-lib/src/components/tabController/TabPage.tsx
@@ -112,5 +112,5 @@ export default function TabPage({
 }
 
 const styles = StyleSheet.create({
-  page: StyleSheet.absoluteFillObject
+  page: StyleSheet.absoluteFill
 });
diff --git a/packages/react-native-ui-lib/src/incubator/slider/Track.tsx b/packages/react-native-ui-lib/src/incubator/slider/Track.tsx
@@ -95,7 +95,7 @@ const styles = StyleSheet.create({
     right: 0
   },
   touchArea: {
-    ...StyleSheet.absoluteFillObject,
+    ...StyleSheet.absoluteFill,
     backgroundColor: Colors.transparent
   }
 });
diff --git a/packages/uilib-native/components/HighlighterOverlayView/index.tsx b/packages/uilib-native/components/HighlighterOverlayView/index.tsx
@@ -81,7 +81,7 @@ const HighlighterOverlayView = (props: HighlighterOverlayViewProps) => {
     >
       <HighlighterViewNativeComponent
         highlightFrame={highlightFrame}
-        style={[style, {...StyleSheet.absoluteFillObject, backgroundColor: 'transparent'}]}
+        style={[style, {...StyleSheet.absoluteFill, backgroundColor: 'transparent'}]}
         overlayColor={overlayColorToUse}
         borderRadius={borderRadius}
         strokeColor={strokeColorToUse}

diff --git a/packages/uilib-native/components/Keyboard/KeyboardAccessoryView/index.tsx b/packages/uilib-native/components/Keyboard/KeyboardAccessoryView/index.tsx
@@ -236,7 +236,7 @@ const styles = StyleSheet.create({
   trackingToolbarContainer: {
     ...Platform.select({
       ios: {
-        ...StyleSheet.absoluteFillObject,
+        ...StyleSheet.absoluteFill,
         top: undefined
       }
     })