react-native-ui-lib 7.45.0-snapshot.7266 → 7.46.0

package/src/components/sharedTransition/SourceElement.js

@@ -0,0 +1,44 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import TouchableOpacity from '../touchableOpacity';
+
+import ShareTransitionContext from './ShareTransitionContext';
+
+class SourceElement extends Component {
+  displayName = 'IGNORE';
+  static propTypes = {
+    /**
+     * Data to share between shared element and placeholder
+     */
+    data: PropTypes.object
+  };
+
+  state = {};
+
+  onPress = () => {
+    const {data} = this.props;
+    const {setSharedData, setSource} = this.context;
+    setSharedData(data);
+
+    this.element.measure((_x, _y, width, height, pageX, pageY) => {
+      const sourceLayout = {x: pageX, y: pageY, width, height};
+      setSource(sourceLayout, this.props.children);
+    });
+  };
+
+  setRef = ref => {
+    this.element = ref;
+  };
+
+  render() {
+    const {style, children} = this.props;
+    return (
+      <TouchableOpacity activeOpacity={0.9} style={style} ref={this.setRef} onPress={this.onPress}>
+        {children}
+      </TouchableOpacity>
+    );
+  }
+}
+
+SourceElement.contextType = ShareTransitionContext;
+export default SourceElement;

package/src/components/sharedTransition/TargetElement.js

@@ -0,0 +1,38 @@
+import React, {Component} from 'react';
+import TouchableOpacity from '../touchableOpacity';
+
+import ShareTransitionContext from './ShareTransitionContext';
+
+class TargetElement extends Component {
+  displayName = 'IGNORE';
+  state = {};
+
+  componentDidMount() {
+    const {setTarget} = this.context;
+
+    if (!this.targetLayout) {
+      setTimeout(() => {
+        this.element.measure((_x, _y, width, height, pageX, pageY) => {
+          this.targetLayout = {x: pageX, y: pageY, width, height};
+          setTarget(this.targetLayout);
+        });
+      });
+    }
+  }
+
+  setRef = ref => {
+    this.element = ref;
+  };
+
+  render() {
+    const {style, children} = this.props;
+    return (
+      <TouchableOpacity style={[style, {opacity: 0}]} ref={this.setRef}>
+        {children}
+      </TouchableOpacity>
+    );
+  }
+}
+
+TargetElement.contextType = ShareTransitionContext;
+export default TargetElement;

package/src/components/sharedTransition/index.js

@@ -0,0 +1,9 @@
+import Source from './SourceElement';
+import Target from './TargetElement';
+import Area from './SharedArea';
+
+export default {
+  Area,
+  Source,
+  Target
+};

package/src/components/slider/GradientSlider.d.ts

@@ -6,7 +6,7 @@ import { GradientSliderProps, GradientSliderTypes } from './types';
 type Props<T> = GradientSliderProps<T> & ForwardRefInjectedProps;
 declare const _default: React.ForwardRefExoticComponent<Omit<import("./types").SliderProps, "onValueChange"> & {
     color?: string | import("tinycolor2").ColorFormats.HSLA | undefined;
-    type?: "default" | "hue" | "saturation" | "lightness" | GradientSliderTypes | undefined;
+    type?: "default" | "hue" | "lightness" | "saturation" | GradientSliderTypes | undefined;
     gradientSteps?: number | undefined;
     onValueChange?: ((value: string, alfa: number) => void) | undefined;
     accessible?: boolean | undefined;

package/src/components/sortableGridList/SortableItem.js

@@ -23,8 +23,6 @@ function SortableItem(props) {
   const currIndex = useSharedValue(initialIndex.value);
   const translateX = useSharedValue(0);
   const translateY = useSharedValue(0);
-  const zIndex = useSharedValue(0);
-  const scale = useSharedValue(1);
   const isDragging = useSharedValue(false);
   const tempItemsOrder = useSharedValue(itemsOrder.value);
   const tempTranslateX = useSharedValue(0);
@@ -87,15 +85,6 @@ function SortableItem(props) {
       translateY.value = withTiming(translation.y, animationConfig);
     }
   }, []);
-  useAnimatedReaction(() => isDragging.value, (isDragging, wasDragging) => {
-    if (isDragging && !wasDragging) {
-      zIndex.value = withTiming(100, animationConfig);
-      scale.value = withSpring(1.1);
-    } else if (!isDragging && wasDragging) {
-      zIndex.value = withTiming(0, animationConfig);
-      scale.value = withSpring(1);
-    }
-  }, []);
   const onLayout = useCallback(event => {
     'worklet';
 
@@ -159,14 +148,16 @@ function SortableItem(props) {
     }
   });
   const animatedStyle = useAnimatedStyle(() => {
+    const scale = withSpring(isDragging.value ? 1.1 : 1);
+    const zIndex = isDragging.value ? 100 : withTiming(0, animationConfig);
     return {
-      zIndex: Math.round(zIndex.value),
+      zIndex,
       transform: [{
         translateX: translateX.value
       }, {
         translateY: translateY.value
       }, {
-        scale: scale.value
+        scale
       }]
     };
   });

package/src/components/sortableList/SortableListItem.js

@@ -51,8 +51,6 @@ const SortableListItem = props => {
   });
   const currIndex = useSharedValue(initialIndex.value);
   const translation = useSharedValue(0);
-  const zIndex = useSharedValue(0);
-  const scale = useSharedValue(1);
   const isDragging = useSharedValue(false);
   const draggedItemShadow = useSharedValue(StyleUtils.unpackStyle({
     ...Shadows.sh30.bottom,
@@ -80,15 +78,6 @@ const SortableListItem = props => {
       translation.value = withTiming(_translation, animationConfig);
     }
   }, []);
-  useAnimatedReaction(() => isDragging.value, (isDragging, wasDragging) => {
-    if (isDragging && !wasDragging) {
-      zIndex.value = withTiming(100, animationConfig);
-      scale.value = withSpring(propsScale);
-    } else if (!isDragging && wasDragging) {
-      zIndex.value = withTiming(0, animationConfig);
-      scale.value = withSpring(1);
-    }
-  }, []);
   const dragOnLongPressGesture = Gesture.Pan().activateAfterLongPress(250).enabled(!locked).onStart(() => {
     isDragging.value = true;
     translation.value = getTranslationByIndexChange(currIndex.value, initialIndex.value, itemSize.value);
@@ -154,18 +143,20 @@ const SortableListItem = props => {
     }
   });
   const draggedAnimatedStyle = useAnimatedStyle(() => {
+    const scale = withSpring(isDragging.value ? propsScale : 1);
+    const zIndex = isDragging.value ? 100 : withTiming(0, animationConfig);
     const opacity = isDragging.value ? 0.95 : 1;
     const shadow = isDragging.value ? draggedItemShadow.value : defaultItemShadow.value;
     return {
       backgroundColor: itemProps?.backgroundColor ?? LIST_ITEM_BACKGROUND,
       // required for elevation to work in Android
-      zIndex: Math.round(zIndex.value),
+      zIndex,
       transform: [horizontal ? {
         translateX: translation.value
       } : {
         translateY: translation.value
       }, {
-        scale: scale.value
+        scale
       }],
       opacity,
       ...itemProps?.margins,

package/src/components/stackAggregator/index.js

@@ -27,7 +27,6 @@ const StackAggregator = props => {
     onItemPress,
     contentContainerStyle,
     itemBorderRadius = 0,
-    backgroundColor,
     onCollapseWillChange,
     onCollapseChanged
   } = props;
@@ -37,11 +36,11 @@ const StackAggregator = props => {
   useEffect(() => {
     setIsCollapsed(collapsed);
   }, [collapsed]);
-  useDidUpdate(async () => {
+  useDidUpdate(() => {
     onCollapseWillChange?.(isCollapsed);
-    await animate();
+    animate();
     onCollapseChanged?.(isCollapsed);
-  }, [isCollapsed, itemsCount]);
+  }, [isCollapsed, onCollapseWillChange, onCollapseChanged]);
 
   /** Animations */
 
@@ -53,10 +52,10 @@ const StackAggregator = props => {
   const easeOut = Easing.bezier(0, 0, 0.58, 1);
   const getItemScale = useCallback(index => {
     if (isCollapsed) {
-      if (index === 1) {
+      if (index === itemsCount - 2) {
         return 0.95;
       }
-      if (index === 2) {
+      if (index === itemsCount - 1) {
         return 0.9;
       }
     }
@@ -124,10 +123,10 @@ const StackAggregator = props => {
 
   const getTop = index => {
     let start = 0;
-    if (index === 1) {
+    if (index === itemsCount - 2) {
       start += PEEP;
     }
-    if (index === 2) {
+    if (index === itemsCount - 1) {
       start += PEEP * 2;
     }
     return start;
@@ -150,11 +149,6 @@ const StackAggregator = props => {
       zIndex: itemsCount
     }];
   }, [firstItemHeight, itemsCount]);
-  const cardStyle = useMemo(() => {
-    return backgroundColor ? [styles.card, {
-      backgroundColor
-    }] : styles.card;
-  }, [backgroundColor]);
 
   /** Events */
 
@@ -173,7 +167,7 @@ const StackAggregator = props => {
   /** Renders */
 
   const renderItem = (item, index) => {
-    return <Animated.View onLayout={index === 0 ? onLayout : undefined} style={[Constants.isIOS && (index === 0 || index === 1 || index === 2 || !isCollapsed) && styles.containerShadow, contentContainerStyle,
+    return <Animated.View onLayout={index === 0 ? onLayout : undefined} style={[Constants.isIOS && styles.containerShadow, contentContainerStyle,
     //@ts-expect-error 'position' doesn't match AnimatedInterpolation type
     getItemStyle(index), {
       borderRadius: Constants.isIOS ? itemBorderRadius : undefined,
@@ -185,7 +179,7 @@ const StackAggregator = props => {
       width: Constants.windowWidth - 40,
       height: isCollapsed ? firstItemHeight : undefined
     }]} collapsable={false}>
-        <Card style={cardStyle} onPress={() => _onItemPress(index)} borderRadius={itemBorderRadius} elevation={5}>
+        <Card style={styles.card} onPress={() => _onItemPress(index)} borderRadius={itemBorderRadius} elevation={5}>
           <Animated.View style={index !== 0 ? {
           opacity: animatedContentOpacity
         } : undefined} collapsable={false}>
@@ -237,7 +231,8 @@ const styles = StyleSheet.create({
   },
   card: {
     overflow: 'hidden',
-    flexShrink: 1
+    flexShrink: 1,
+    backgroundColor: 'transparent'
   },
   button: {
     zIndex: 100

package/src/components/text/Text.driver.new.d.ts

@@ -1,6 +1,6 @@
 import { TextStyle } from 'react-native';
-import { ComponentProps, ComponentDriverOptions } from '../../testkit/new/Component.driver';
-export declare const TextDriver: (props: ComponentProps, options?: ComponentDriverOptions) => {
+import { ComponentProps } from '../../testkit/new/Component.driver';
+export declare const TextDriver: (props: ComponentProps) => {
     getText: () => string | (string | import("react-test-renderer").ReactTestInstance)[];
     getStyle: () => TextStyle;
     press: () => void;

package/src/components/text/Text.driver.new.js

@@ -1,8 +1,8 @@
 import { StyleSheet } from 'react-native';
 import { useComponentDriver } from "../../testkit/new/Component.driver";
 import { usePressableDriver } from "../../testkit/new/usePressable.driver";
-export const TextDriver = (props, options) => {
-  const driver = usePressableDriver(useComponentDriver(props, options));
+export const TextDriver = props => {
+  const driver = usePressableDriver(useComponentDriver(props));
   const getText = () => {
     const textChildren = driver.getElement().children;
     if (textChildren.length === 0) {

package/src/components/textField/Input.js

@@ -81,6 +81,7 @@ const styles = StyleSheet.create({
     })
   },
   webStyle: {
+    // @ts-expect-error
     outlineWidth: 0
   }
 });

package/src/components/textField/TextField.driver.new.d.ts

@@ -1,5 +1,5 @@
-import { ComponentProps, ComponentDriverOptions } from '../../testkit/new/Component.driver';
-export declare const TextFieldDriver: (props: ComponentProps, options?: ComponentDriverOptions) => {
+import { ComponentProps } from '../../testkit/new/Component.driver';
+export declare const TextFieldDriver: (props: ComponentProps) => {
     getValue: () => string | undefined;
     changeText: (text: string) => void;
     focus: () => void;
@@ -113,6 +113,7 @@ export declare const TextFieldDriver: (props: ComponentProps, options?: Componen
         getLabelStyle: () => import("react-native").TextStyle;
         getIconStyle: () => any;
         getIcon: () => import("../../testkit/new/Component.driver").ComponentDriverResult;
+        isDisabled: () => boolean;
     };
     press: () => void;
     hasOnPress: () => boolean;

package/src/components/textField/TextField.driver.new.js

@@ -7,8 +7,8 @@ import { TextDriver } from "../text/Text.driver.new";
 import { ImageDriver } from "../image/Image.driver.new";
 import { ButtonDriver } from "../button/Button.driver.new";
 import { ViewDriver } from "../view/View.driver.new";
-export const TextFieldDriver = (props, options) => {
-  const driver = usePressableDriver(useComponentDriver(props, options));
+export const TextFieldDriver = props => {
+  const driver = usePressableDriver(useComponentDriver(props));
   const floatingPlaceholderDriver = TextDriver({
     renderTree: props.renderTree,
     testID: `${props.testID}.floatingPlaceholder`

package/src/components/textField/presets/outline.d.ts

@@ -36,7 +36,7 @@ declare const _default: {
         fontFamily?: string | undefined;
         fontSize?: number | undefined;
         fontStyle?: "normal" | "italic" | undefined;
-        fontWeight?: "black" | 900 | 600 | "light" | 100 | "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | 200 | 300 | 400 | 500 | 700 | 800 | "ultralight" | "thin" | "medium" | "regular" | "semibold" | "condensedBold" | "condensed" | "heavy" | undefined;
+        fontWeight?: "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
         letterSpacing?: number | undefined;
         textAlign?: "auto" | "left" | "right" | "center" | "justify" | undefined;
         textDecorationLine?: "none" | "underline" | "line-through" | "underline line-through" | undefined;
@@ -58,41 +58,31 @@ declare const _default: {
         borderBlockEndColor?: import("react-native").ColorValue | undefined;
         borderBlockStartColor?: import("react-native").ColorValue | undefined;
         borderBottomColor?: import("react-native").ColorValue | undefined;
-        borderBottomEndRadius?: string | import("react-native").AnimatableNumericValue | undefined;
-        borderBottomLeftRadius?: string | import("react-native").AnimatableNumericValue | undefined;
-        borderBottomRightRadius?: string | import("react-native").AnimatableNumericValue | undefined;
-        borderBottomStartRadius?: string | import("react-native").AnimatableNumericValue | undefined;
+        borderBottomEndRadius?: import("react-native").AnimatableNumericValue | undefined;
+        borderBottomLeftRadius?: import("react-native").AnimatableNumericValue | undefined;
+        borderBottomRightRadius?: import("react-native").AnimatableNumericValue | undefined;
+        borderBottomStartRadius?: import("react-native").AnimatableNumericValue | undefined;
         borderColor?: import("react-native").ColorValue | undefined;
         borderCurve?: "circular" | "continuous" | undefined;
         borderEndColor?: import("react-native").ColorValue | undefined;
-        borderEndEndRadius?: string | import("react-native").AnimatableNumericValue | undefined;
-        borderEndStartRadius?: string | import("react-native").AnimatableNumericValue | undefined;
+        borderEndEndRadius?: import("react-native").AnimatableNumericValue | undefined;
+        borderEndStartRadius?: import("react-native").AnimatableNumericValue | undefined;
         borderLeftColor?: import("react-native").ColorValue | undefined;
-        borderRadius?: string | import("react-native").AnimatableNumericValue | undefined;
+        borderRadius?: import("react-native").AnimatableNumericValue | undefined;
         borderRightColor?: import("react-native").ColorValue | undefined;
         borderStartColor?: import("react-native").ColorValue | undefined;
-        borderStartEndRadius?: string | import("react-native").AnimatableNumericValue | undefined;
-        borderStartStartRadius?: string | import("react-native").AnimatableNumericValue | undefined;
+        borderStartEndRadius?: import("react-native").AnimatableNumericValue | undefined;
+        borderStartStartRadius?: import("react-native").AnimatableNumericValue | undefined;
         borderStyle?: "solid" | "dotted" | "dashed" | undefined;
         borderTopColor?: import("react-native").ColorValue | undefined;
-        borderTopEndRadius?: string | import("react-native").AnimatableNumericValue | undefined;
-        borderTopLeftRadius?: string | import("react-native").AnimatableNumericValue | undefined;
-        borderTopRightRadius?: string | import("react-native").AnimatableNumericValue | undefined;
-        borderTopStartRadius?: string | import("react-native").AnimatableNumericValue | undefined;
-        outlineColor?: import("react-native").ColorValue | undefined;
-        outlineOffset?: import("react-native").AnimatableNumericValue | undefined;
-        outlineStyle?: "solid" | "dotted" | "dashed" | undefined;
-        outlineWidth?: import("react-native").AnimatableNumericValue | undefined;
+        borderTopEndRadius?: import("react-native").AnimatableNumericValue | undefined;
+        borderTopLeftRadius?: import("react-native").AnimatableNumericValue | undefined;
+        borderTopRightRadius?: import("react-native").AnimatableNumericValue | undefined;
+        borderTopStartRadius?: import("react-native").AnimatableNumericValue | undefined;
         opacity?: import("react-native").AnimatableNumericValue | undefined;
         elevation?: number | undefined;
         pointerEvents?: "auto" | "none" | "box-none" | "box-only" | undefined;
-        isolation?: "auto" | "isolate" | undefined;
-        cursor?: import("react-native").CursorValue | undefined;
-        boxShadow?: string | readonly import("react-native").BoxShadowValue[] | undefined;
-        filter?: string | readonly import("react-native").FilterFunction[] | undefined;
-        mixBlendMode?: import("react-native").BlendMode | undefined;
-        experimental_backgroundImage?: string | readonly import("react-native").GradientValue[] | undefined;
-        alignContent?: "center" | "flex-start" | "flex-end" | "stretch" | "space-between" | "space-around" | "space-evenly" | undefined;
+        alignContent?: "center" | "flex-start" | "flex-end" | "stretch" | "space-between" | "space-around" | undefined;
         alignItems?: import("react-native").FlexAlignType | undefined;
         alignSelf?: "auto" | import("react-native").FlexAlignType | undefined;
         aspectRatio?: string | number | undefined;
@@ -104,15 +94,14 @@ declare const _default: {
         borderTopWidth?: number | undefined;
         borderWidth?: number | undefined;
         bottom?: import("react-native").DimensionValue | undefined;
-        boxSizing?: "border-box" | "content-box" | undefined;
-        display?: "none" | "flex" | "contents" | undefined;
+        display?: "none" | "flex" | undefined;
         end?: import("react-native").DimensionValue | undefined;
         flex?: number | undefined;
         flexBasis?: import("react-native").DimensionValue | undefined;
         flexDirection?: "row" | "column" | "row-reverse" | "column-reverse" | undefined;
-        rowGap?: string | number | undefined;
-        gap?: string | number | undefined;
-        columnGap?: string | number | undefined;
+        rowGap?: number | undefined;
+        gap?: number | undefined;
+        columnGap?: number | undefined;
         flexGrow?: number | undefined;
         flexShrink?: number | undefined;
         flexWrap?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
@@ -141,32 +130,13 @@ declare const _default: {
         paddingStart?: import("react-native").DimensionValue | undefined;
         paddingTop?: import("react-native").DimensionValue | undefined;
         paddingVertical?: import("react-native").DimensionValue | undefined;
-        position?: "absolute" | "relative" | "static" | undefined;
+        position?: "absolute" | "relative" | undefined;
         right?: import("react-native").DimensionValue | undefined;
         start?: import("react-native").DimensionValue | undefined;
         top?: import("react-native").DimensionValue | undefined;
         width?: import("react-native").DimensionValue | undefined;
         zIndex?: number | undefined;
         direction?: "ltr" | "rtl" | "inherit" | undefined;
-        inset?: import("react-native").DimensionValue | undefined;
-        insetBlock?: import("react-native").DimensionValue | undefined;
-        insetBlockEnd?: import("react-native").DimensionValue | undefined;
-        insetBlockStart?: import("react-native").DimensionValue | undefined;
-        insetInline?: import("react-native").DimensionValue | undefined;
-        insetInlineEnd?: import("react-native").DimensionValue | undefined;
-        insetInlineStart?: import("react-native").DimensionValue | undefined;
-        marginBlock?: import("react-native").DimensionValue | undefined;
-        marginBlockEnd?: import("react-native").DimensionValue | undefined;
-        marginBlockStart?: import("react-native").DimensionValue | undefined;
-        marginInline?: import("react-native").DimensionValue | undefined;
-        marginInlineEnd?: import("react-native").DimensionValue | undefined;
-        marginInlineStart?: import("react-native").DimensionValue | undefined;
-        paddingBlock?: import("react-native").DimensionValue | undefined;
-        paddingBlockEnd?: import("react-native").DimensionValue | undefined;
-        paddingBlockStart?: import("react-native").DimensionValue | undefined;
-        paddingInline?: import("react-native").DimensionValue | undefined;
-        paddingInlineEnd?: import("react-native").DimensionValue | undefined;
-        paddingInlineStart?: import("react-native").DimensionValue | undefined;
         shadowColor?: import("react-native").ColorValue | undefined;
         shadowOffset?: Readonly<{
             width: number;
@@ -174,7 +144,7 @@ declare const _default: {
         }> | undefined;
         shadowOpacity?: import("react-native").AnimatableNumericValue | undefined;
         shadowRadius?: number | undefined;
-        transform?: string | readonly (({
+        transform?: string | (({
             perspective: import("react-native").AnimatableNumericValue;
         } & {
             rotate?: undefined;
@@ -295,7 +265,7 @@ declare const _default: {
             skewY?: undefined;
             matrix?: undefined;
         }) | ({
-            translateX: import("react-native").AnimatableNumericValue | `${number}%`;
+            translateX: import("react-native").AnimatableNumericValue;
         } & {
             perspective?: undefined;
             rotate?: undefined;
@@ -310,7 +280,7 @@ declare const _default: {
             skewY?: undefined;
             matrix?: undefined;
         }) | ({
-            translateY: import("react-native").AnimatableNumericValue | `${number}%`;
+            translateY: import("react-native").AnimatableNumericValue;
         } & {
             perspective?: undefined;
             rotate?: undefined;
@@ -386,7 +356,7 @@ declare const _default: {
         fontFamily?: string | undefined;
         fontSize?: number | undefined;
         fontStyle?: "normal" | "italic" | undefined;
-        fontWeight?: "black" | 900 | 600 | "light" | 100 | "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | 200 | 300 | 400 | 500 | 700 | 800 | "ultralight" | "thin" | "medium" | "regular" | "semibold" | "condensedBold" | "condensed" | "heavy" | undefined;
+        fontWeight?: "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
         letterSpacing?: number | undefined;
         lineHeight?: number | undefined;
         textAlign?: "auto" | "left" | "right" | "center" | "justify" | undefined;
@@ -409,41 +379,31 @@ declare const _default: {
         borderBlockEndColor?: import("react-native").ColorValue | undefined;
         borderBlockStartColor?: import("react-native").ColorValue | undefined;
         borderBottomColor?: import("react-native").ColorValue | undefined;
-        borderBottomEndRadius?: string | import("react-native").AnimatableNumericValue | undefined;
-        borderBottomLeftRadius?: string | import("react-native").AnimatableNumericValue | undefined;
-        borderBottomRightRadius?: string | import("react-native").AnimatableNumericValue | undefined;
-        borderBottomStartRadius?: string | import("react-native").AnimatableNumericValue | undefined;
+        borderBottomEndRadius?: import("react-native").AnimatableNumericValue | undefined;
+        borderBottomLeftRadius?: import("react-native").AnimatableNumericValue | undefined;
+        borderBottomRightRadius?: import("react-native").AnimatableNumericValue | undefined;
+        borderBottomStartRadius?: import("react-native").AnimatableNumericValue | undefined;
         borderColor?: import("react-native").ColorValue | undefined;
         borderCurve?: "circular" | "continuous" | undefined;
         borderEndColor?: import("react-native").ColorValue | undefined;
-        borderEndEndRadius?: string | import("react-native").AnimatableNumericValue | undefined;
-        borderEndStartRadius?: string | import("react-native").AnimatableNumericValue | undefined;
+        borderEndEndRadius?: import("react-native").AnimatableNumericValue | undefined;
+        borderEndStartRadius?: import("react-native").AnimatableNumericValue | undefined;
         borderLeftColor?: import("react-native").ColorValue | undefined;
-        borderRadius?: string | import("react-native").AnimatableNumericValue | undefined;
+        borderRadius?: import("react-native").AnimatableNumericValue | undefined;
         borderRightColor?: import("react-native").ColorValue | undefined;
         borderStartColor?: import("react-native").ColorValue | undefined;
-        borderStartEndRadius?: string | import("react-native").AnimatableNumericValue | undefined;
-        borderStartStartRadius?: string | import("react-native").AnimatableNumericValue | undefined;
+        borderStartEndRadius?: import("react-native").AnimatableNumericValue | undefined;
+        borderStartStartRadius?: import("react-native").AnimatableNumericValue | undefined;
         borderStyle?: "solid" | "dotted" | "dashed" | undefined;
         borderTopColor?: import("react-native").ColorValue | undefined;
-        borderTopEndRadius?: string | import("react-native").AnimatableNumericValue | undefined;
-        borderTopLeftRadius?: string | import("react-native").AnimatableNumericValue | undefined;
-        borderTopRightRadius?: string | import("react-native").AnimatableNumericValue | undefined;
-        borderTopStartRadius?: string | import("react-native").AnimatableNumericValue | undefined;
-        outlineColor?: import("react-native").ColorValue | undefined;
-        outlineOffset?: import("react-native").AnimatableNumericValue | undefined;
-        outlineStyle?: "solid" | "dotted" | "dashed" | undefined;
-        outlineWidth?: import("react-native").AnimatableNumericValue | undefined;
+        borderTopEndRadius?: import("react-native").AnimatableNumericValue | undefined;
+        borderTopLeftRadius?: import("react-native").AnimatableNumericValue | undefined;
+        borderTopRightRadius?: import("react-native").AnimatableNumericValue | undefined;
+        borderTopStartRadius?: import("react-native").AnimatableNumericValue | undefined;
         opacity?: import("react-native").AnimatableNumericValue | undefined;
         elevation?: number | undefined;
         pointerEvents?: "auto" | "none" | "box-none" | "box-only" | undefined;
-        isolation?: "auto" | "isolate" | undefined;
-        cursor?: import("react-native").CursorValue | undefined;
-        boxShadow?: string | readonly import("react-native").BoxShadowValue[] | undefined;
-        filter?: string | readonly import("react-native").FilterFunction[] | undefined;
-        mixBlendMode?: import("react-native").BlendMode | undefined;
-        experimental_backgroundImage?: string | readonly import("react-native").GradientValue[] | undefined;
-        alignContent?: "center" | "flex-start" | "flex-end" | "stretch" | "space-between" | "space-around" | "space-evenly" | undefined;
+        alignContent?: "center" | "flex-start" | "flex-end" | "stretch" | "space-between" | "space-around" | undefined;
         alignItems?: import("react-native").FlexAlignType | undefined;
         alignSelf?: "auto" | import("react-native").FlexAlignType | undefined;
         aspectRatio?: string | number | undefined;
@@ -455,15 +415,14 @@ declare const _default: {
         borderTopWidth?: number | undefined;
         borderWidth?: number | undefined;
         bottom?: import("react-native").DimensionValue | undefined;
-        boxSizing?: "border-box" | "content-box" | undefined;
-        display?: "none" | "flex" | "contents" | undefined;
+        display?: "none" | "flex" | undefined;
         end?: import("react-native").DimensionValue | undefined;
         flex?: number | undefined;
         flexBasis?: import("react-native").DimensionValue | undefined;
         flexDirection?: "row" | "column" | "row-reverse" | "column-reverse" | undefined;
-        rowGap?: string | number | undefined;
-        gap?: string | number | undefined;
-        columnGap?: string | number | undefined;
+        rowGap?: number | undefined;
+        gap?: number | undefined;
+        columnGap?: number | undefined;
         flexGrow?: number | undefined;
         flexShrink?: number | undefined;
         flexWrap?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
@@ -493,32 +452,13 @@ declare const _default: {
         paddingStart?: import("react-native").DimensionValue | undefined;
         paddingTop?: import("react-native").DimensionValue | undefined;
         paddingVertical?: import("react-native").DimensionValue | undefined;
-        position?: "absolute" | "relative" | "static" | undefined;
+        position?: "absolute" | "relative" | undefined;
         right?: import("react-native").DimensionValue | undefined;
         start?: import("react-native").DimensionValue | undefined;
         top?: import("react-native").DimensionValue | undefined;
         width?: import("react-native").DimensionValue | undefined;
         zIndex?: number | undefined;
         direction?: "ltr" | "rtl" | "inherit" | undefined;
-        inset?: import("react-native").DimensionValue | undefined;
-        insetBlock?: import("react-native").DimensionValue | undefined;
-        insetBlockEnd?: import("react-native").DimensionValue | undefined;
-        insetBlockStart?: import("react-native").DimensionValue | undefined;
-        insetInline?: import("react-native").DimensionValue | undefined;
-        insetInlineEnd?: import("react-native").DimensionValue | undefined;
-        insetInlineStart?: import("react-native").DimensionValue | undefined;
-        marginBlock?: import("react-native").DimensionValue | undefined;
-        marginBlockEnd?: import("react-native").DimensionValue | undefined;
-        marginBlockStart?: import("react-native").DimensionValue | undefined;
-        marginInline?: import("react-native").DimensionValue | undefined;
-        marginInlineEnd?: import("react-native").DimensionValue | undefined;
-        marginInlineStart?: import("react-native").DimensionValue | undefined;
-        paddingBlock?: import("react-native").DimensionValue | undefined;
-        paddingBlockEnd?: import("react-native").DimensionValue | undefined;
-        paddingBlockStart?: import("react-native").DimensionValue | undefined;
-        paddingInline?: import("react-native").DimensionValue | undefined;
-        paddingInlineEnd?: import("react-native").DimensionValue | undefined;
-        paddingInlineStart?: import("react-native").DimensionValue | undefined;
         shadowColor?: import("react-native").ColorValue | undefined;
         shadowOffset?: Readonly<{
             width: number;
@@ -526,7 +466,7 @@ declare const _default: {
         }> | undefined;
         shadowOpacity?: import("react-native").AnimatableNumericValue | undefined;
         shadowRadius?: number | undefined;
-        transform?: string | readonly (({
+        transform?: string | (({
             perspective: import("react-native").AnimatableNumericValue;
         } & {
             rotate?: undefined;
@@ -647,7 +587,7 @@ declare const _default: {
             skewY?: undefined;
             matrix?: undefined;
         }) | ({
-            translateX: import("react-native").AnimatableNumericValue | `${number}%`;
+            translateX: import("react-native").AnimatableNumericValue;
         } & {
             perspective?: undefined;
             rotate?: undefined;
@@ -662,7 +602,7 @@ declare const _default: {
             skewY?: undefined;
             matrix?: undefined;
         }) | ({
-            translateY: import("react-native").AnimatableNumericValue | `${number}%`;
+            translateY: import("react-native").AnimatableNumericValue;
         } & {
             perspective?: undefined;
             rotate?: undefined;