react-native-ui-lib 7.43.0 → 7.44.0-snapshot.7204

package/src/components/button/index.d.ts

@@ -39,7 +39,7 @@ declare class Button extends PureComponent<Props, ButtonState> {
             fontFamily?: string | undefined;
             fontSize?: number | undefined;
             fontStyle?: "normal" | "italic" | undefined;
-            fontWeight?: "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | 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;
             letterSpacing?: number | undefined;
             lineHeight?: number | undefined;
             textAlign?: "auto" | "left" | "right" | "center" | "justify" | undefined;
@@ -62,31 +62,41 @@ declare class Button extends PureComponent<Props, ButtonState> {
             borderBlockEndColor?: import("react-native").ColorValue | undefined;
             borderBlockStartColor?: import("react-native").ColorValue | undefined;
             borderBottomColor?: import("react-native").ColorValue | 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;
+            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;
             borderColor?: import("react-native").ColorValue | undefined;
             borderCurve?: "circular" | "continuous" | undefined;
             borderEndColor?: import("react-native").ColorValue | undefined;
-            borderEndEndRadius?: import("react-native").AnimatableNumericValue | undefined;
-            borderEndStartRadius?: import("react-native").AnimatableNumericValue | undefined;
+            borderEndEndRadius?: string | import("react-native").AnimatableNumericValue | undefined;
+            borderEndStartRadius?: string | import("react-native").AnimatableNumericValue | undefined;
             borderLeftColor?: import("react-native").ColorValue | undefined;
-            borderRadius?: import("react-native").AnimatableNumericValue | undefined;
+            borderRadius?: string | import("react-native").AnimatableNumericValue | undefined;
             borderRightColor?: import("react-native").ColorValue | undefined;
             borderStartColor?: import("react-native").ColorValue | undefined;
-            borderStartEndRadius?: import("react-native").AnimatableNumericValue | undefined;
-            borderStartStartRadius?: import("react-native").AnimatableNumericValue | undefined;
+            borderStartEndRadius?: string | import("react-native").AnimatableNumericValue | undefined;
+            borderStartStartRadius?: string | import("react-native").AnimatableNumericValue | undefined;
             borderStyle?: "solid" | "dotted" | "dashed" | undefined;
             borderTopColor?: import("react-native").ColorValue | 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;
+            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;
             opacity?: import("react-native").AnimatableNumericValue | undefined;
             elevation?: number | undefined;
             pointerEvents?: "auto" | "none" | "box-none" | "box-only" | undefined;
-            alignContent?: "center" | "flex-start" | "flex-end" | "stretch" | "space-between" | "space-around" | 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;
             alignItems?: import("react-native").FlexAlignType | undefined;
             alignSelf?: "auto" | import("react-native").FlexAlignType | undefined;
             aspectRatio?: string | number | undefined;
@@ -98,14 +108,15 @@ declare class Button extends PureComponent<Props, ButtonState> {
             borderTopWidth?: number | undefined;
             borderWidth?: number | undefined;
             bottom?: import("react-native").DimensionValue | undefined;
-            display?: "none" | "flex" | undefined;
+            boxSizing?: "border-box" | "content-box" | undefined;
+            display?: "none" | "flex" | "contents" | undefined;
             end?: import("react-native").DimensionValue | undefined;
             flex?: number | undefined;
             flexBasis?: import("react-native").DimensionValue | undefined;
             flexDirection: "row" | "column" | "row-reverse" | "column-reverse";
-            rowGap?: number | undefined;
-            gap?: number | undefined;
-            columnGap?: number | undefined;
+            rowGap?: string | number | undefined;
+            gap?: string | number | undefined;
+            columnGap?: string | number | undefined;
             flexGrow?: number | undefined;
             flexShrink?: number | undefined;
             flexWrap?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
@@ -135,13 +146,32 @@ declare class Button extends PureComponent<Props, ButtonState> {
             paddingStart?: import("react-native").DimensionValue | undefined;
             paddingTop?: import("react-native").DimensionValue | undefined;
             paddingVertical?: import("react-native").DimensionValue | undefined;
-            position?: "absolute" | "relative" | undefined;
+            position?: "absolute" | "relative" | "static" | 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;
@@ -149,7 +179,7 @@ declare class Button extends PureComponent<Props, ButtonState> {
             }> | undefined;
             shadowOpacity?: import("react-native").AnimatableNumericValue | undefined;
             shadowRadius?: number | undefined;
-            transform?: string | (({
+            transform?: string | readonly (({
                 perspective: import("react-native").AnimatableNumericValue;
             } & {
                 rotate?: undefined;
@@ -270,7 +300,7 @@ declare class Button extends PureComponent<Props, ButtonState> {
                 skewY?: undefined;
                 matrix?: undefined;
             }) | ({
-                translateX: import("react-native").AnimatableNumericValue;
+                translateX: import("react-native").AnimatableNumericValue | `${number}%`;
             } & {
                 perspective?: undefined;
                 rotate?: undefined;
@@ -285,7 +315,7 @@ declare class Button extends PureComponent<Props, ButtonState> {
                 skewY?: undefined;
                 matrix?: undefined;
             }) | ({
-                translateY: import("react-native").AnimatableNumericValue;
+                translateY: import("react-native").AnimatableNumericValue | `${number}%`;
             } & {
                 perspective?: undefined;
                 rotate?: undefined;

package/src/components/button/types.d.ts

@@ -131,7 +131,6 @@ export type ButtonProps = TouchableOpacityProps & TypographyModifiers & ColorsMo
     getActiveBackgroundColor?: (backgroundColor: string, props: any) => string;
     /**
      * should animate layout change
-     * Note?: For Android you must set 'setLayoutAnimationEnabledExperimental(true)' via RN's 'UIManager'
      */
     animateLayout?: boolean;
     /**

package/src/components/chip/index.js

@@ -1,5 +1,4 @@
-import _get from "lodash/get";
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { StyleSheet } from 'react-native';
 import Assets from "../../assets";
 import { asBaseComponent } from "../../commons/new";
@@ -57,8 +56,8 @@ const Chip = ({
   }, [badgeProps]);
   const renderOnDismiss = useCallback(() => {
     return <TouchableOpacity style={[getMargins('dismiss'), dismissContainerStyle]} onPress={onDismiss} hitSlop={{
-      top: 10,
-      bottom: 10,
+      top: 16,
+      bottom: 16,
       left: 10,
       right: 10
     }} testID={`${testID}.dismiss`}>
@@ -138,23 +137,47 @@ const Chip = ({
       }
     }
   }, [avatarProps, badgeProps, iconSource, rightIconSource, onDismiss]);
-  const getContainerSize = useCallback(() => {
-    const width = useSizeAsMinimum ? 'minWidth' : 'width';
-    const height = useSizeAsMinimum ? 'minHeight' : 'height';
-    return typeof size === 'object' ? {
-      [width]: _get(size, 'width'),
-      [height]: _get(size, 'height')
-    } : {
-      [width]: size,
-      [height]: size
+  const chipSize = useMemo(() => {
+    const width = typeof size === 'object' ? size.width : size;
+    const height = typeof size === 'object' ? size.height : size;
+    return {
+      width,
+      height
     };
   }, [size]);
+  const containerSizeStyle = useMemo(() => {
+    const {
+      width,
+      height
+    } = chipSize;
+    return useSizeAsMinimum ? {
+      minWidth: width,
+      minHeight: height
+    } : {
+      width,
+      height
+    };
+  }, [chipSize]);
   const Container = onPress ? TouchableOpacity : View;
+  const hitSlop = useMemo(() => {
+    const {
+      width = 48,
+      height = 48
+    } = chipSize;
+    const verticalHitSlop = Math.max(0, (48 - height) / 2);
+    const horizontalHitSlop = Math.max(0, (48 - width) / 2);
+    return {
+      top: verticalHitSlop,
+      bottom: verticalHitSlop,
+      left: horizontalHitSlop,
+      right: horizontalHitSlop
+    };
+  }, [chipSize]);
   return <Container activeOpacity={1} onPress={onPress} style={[styles.container, {
     backgroundColor
   }, {
     borderRadius
-  }, containerStyle, getContainerSize()]} testID={testID} {...others}>
+  }, containerStyle, containerSizeStyle]} testID={testID} hitSlop={hitSlop} {...others}>
       {avatarProps && renderAvatar()}
       {iconSource && renderIcon('left')}
       {leftElement}

package/src/components/drawer/Swipeable.js

@@ -26,8 +26,7 @@ class Swipeable extends Component {
   static defaultProps = {
     friction: 1,
     overshootFriction: 1,
-    useNativeAnimations: false,
-    // issue in iPhone5
+    useNativeAnimations: true,
     fullLeftThreshold: 0.45,
     fullRightThreshold: 0.45
   };

package/src/components/drawer/index.js

@@ -220,30 +220,33 @@ class Drawer extends PureComponent {
       outputRange,
       extrapolate: 'clamp'
     });
-    return <RectButton key={index} testID={item.testID} style={[styles.action, item.style, {
-      backgroundColor: item.background || DEFAULT_BG,
-      width: item.width,
-      minWidth: itemsMinWidth
-    }]} onPress={() => this.onActionPress(item)}>
-        {item.customElement}
-        {!item.customElement && item.icon && <Animated.Image source={item.icon} style={[styles.actionIcon, {
-        width: itemsIconSize,
-        height: itemsIconSize,
-        tintColor: item.iconColor || itemsTintColor,
-        opacity,
-        transform: [{
-          scale
-        }]
-      }]} />}
-        {!item.customElement && item.text && <Animated.Text style={[styles.actionText, {
-        color: item.textColor || itemsTintColor,
-        opacity,
-        transform: [{
-          scale
-        }]
-      }, itemsTextStyle]} accessibilityElementsHidden importantForAccessibility="no-hide-descendants" accessible={false}>
-            {item.text}
-          </Animated.Text>}
+    return <RectButton key={index} testID={item.testID} onPress={() => this.onActionPress(item)}>
+        <View style={[styles.action, item.style, {
+        backgroundColor: item.background || DEFAULT_BG,
+        height: '100%',
+        width: item.width,
+        minWidth: itemsMinWidth
+      }]}>
+          {item.customElement}
+          {!item.customElement && item.icon && <Animated.Image source={item.icon} style={[styles.actionIcon, {
+          width: itemsIconSize,
+          height: itemsIconSize,
+          tintColor: item.iconColor || itemsTintColor,
+          opacity,
+          transform: [{
+            scale
+          }]
+        }]} />}
+          {!item.customElement && item.text && <Animated.Text style={[styles.actionText, {
+          color: item.textColor || itemsTintColor,
+          opacity,
+          transform: [{
+            scale
+          }]
+        }, itemsTextStyle]} accessibilityElementsHidden importantForAccessibility="no-hide-descendants" accessible={false}>
+              {item.text}
+            </Animated.Text>}
+        </View>
       </RectButton>;
   };
   render() {
@@ -255,7 +258,7 @@ class Drawer extends PureComponent {
       onToggleSwipeLeft,
       ...others
     } = this.props;
-    return <GestureHandlerRootView>
+    return <GestureHandlerRootView style={styles.container}>
         <Swipeable {...others} ref={this._swipeableRow} friction={1} containerStyle={style} animationOptions={this.animationOptions} renderLeftActions={this.leftRender} renderRightActions={this.rightRender} rightActionsContainerStyle={this.getRightActionsContainerStyle(rightItems, leftItem)} leftActionsContainerStyle={this.getLeftActionsContainerStyle(leftItem, rightItems)} onSwipeableWillOpen={this.onSwipeableWillOpen} onSwipeableWillClose={this.onSwipeableWillClose} onToggleSwipeLeft={onToggleSwipeLeft && this.onToggleSwipeLeft}>
           <View accessible accessibilityActions={this.getAccessibilityActions()} onAccessibilityAction={this.onAccessibilityAction} {...extractAccessibilityProps(this.props)}>
             {children}
@@ -266,6 +269,9 @@ class Drawer extends PureComponent {
 }
 export default asBaseComponent(Drawer);
 const styles = StyleSheet.create({
+  container: {
+    flex: 0
+  },
   leftAction: {
     flex: 1,
     justifyContent: 'center',

package/src/components/expandableSection/index.js

@@ -58,12 +58,13 @@ function ExpandableSection(props) {
         </View>
       </View>;
   };
+  const Container = onPress ? TouchableOpacity : View;
   if (shouldShowSectionHeader) {
     return <View style={styles.hidden}>
         {top && renderChildren()}
-        <TouchableOpacity onPress={onPress} testID={testID} accessibilityState={accessibilityState}>
+        <Container onPress={onPress} testID={testID} accessibilityState={accessibilityState}>
           {sectionHeader}
-        </TouchableOpacity>
+        </Container>
         {!top && renderChildren()}
       </View>;
   } else {

package/src/components/fadedScrollView/index.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useRef, useImperativeHandle } from 'react';
-import { ScrollView as RNScrollView } from 'react-native';
+import { ScrollView as RNScrollView, StyleSheet } from 'react-native';
 import { ScrollView as GestureScrollView, GestureHandlerRootView } from 'react-native-gesture-handler';
 import Fader from "../fader";
 import useScrollEnabler from "../../hooks/useScrollEnabler";
@@ -60,7 +60,7 @@ const FadedScrollView = props => {
     isScrollEnabled
   }));
   if (children) {
-    return <GestureHandlerRootView>
+    return <GestureHandlerRootView style={styles.container}>
         <ScrollView scrollEventThrottle={16} decelerationRate={'fast'} {...others} horizontal={horizontal} scrollEnabled={scrollEnabled} onContentSizeChange={_onContentSizeChange} onLayout={_onLayout} onScroll={onScroll}
       // @ts-expect-error
       ref={scrollViewRef}>
@@ -72,5 +72,10 @@ const FadedScrollView = props => {
   }
   return null;
 };
+const styles = StyleSheet.create({
+  container: {
+    flex: 0
+  }
+});
 FadedScrollView.displayName = 'IGNORE';
 export default forwardRef(FadedScrollView);

package/src/components/picker/helpers/useFieldType.d.ts

@@ -13,7 +13,7 @@ declare const useFieldType: (props: UseFieldTypeProps) => {
             fontFamily?: string | undefined;
             fontSize?: number | undefined;
             fontStyle?: "normal" | "italic" | undefined;
-            fontWeight?: "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | 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;
             letterSpacing?: number | undefined;
             lineHeight?: number | undefined;
             textAlign?: "auto" | "left" | "right" | "center" | "justify" | undefined;
@@ -36,31 +36,41 @@ declare const useFieldType: (props: UseFieldTypeProps) => {
             borderBlockEndColor?: import("react-native/types").ColorValue | undefined;
             borderBlockStartColor?: import("react-native/types").ColorValue | undefined;
             borderBottomColor?: import("react-native/types").ColorValue | undefined;
-            borderBottomEndRadius?: import("react-native/types").AnimatableNumericValue | undefined;
-            borderBottomLeftRadius?: import("react-native/types").AnimatableNumericValue | undefined;
-            borderBottomRightRadius?: import("react-native/types").AnimatableNumericValue | undefined;
-            borderBottomStartRadius?: import("react-native/types").AnimatableNumericValue | undefined;
+            borderBottomEndRadius?: string | import("react-native/types").AnimatableNumericValue | undefined;
+            borderBottomLeftRadius?: string | import("react-native/types").AnimatableNumericValue | undefined;
+            borderBottomRightRadius?: string | import("react-native/types").AnimatableNumericValue | undefined;
+            borderBottomStartRadius?: string | import("react-native/types").AnimatableNumericValue | undefined;
             borderColor?: import("react-native/types").ColorValue | undefined;
             borderCurve?: "circular" | "continuous" | undefined;
             borderEndColor?: import("react-native/types").ColorValue | undefined;
-            borderEndEndRadius?: import("react-native/types").AnimatableNumericValue | undefined;
-            borderEndStartRadius?: import("react-native/types").AnimatableNumericValue | undefined;
+            borderEndEndRadius?: string | import("react-native/types").AnimatableNumericValue | undefined;
+            borderEndStartRadius?: string | import("react-native/types").AnimatableNumericValue | undefined;
             borderLeftColor?: import("react-native/types").ColorValue | undefined;
-            borderRadius?: import("react-native/types").AnimatableNumericValue | undefined;
+            borderRadius?: string | import("react-native/types").AnimatableNumericValue | undefined;
             borderRightColor?: import("react-native/types").ColorValue | undefined;
             borderStartColor?: import("react-native/types").ColorValue | undefined;
-            borderStartEndRadius?: import("react-native/types").AnimatableNumericValue | undefined;
-            borderStartStartRadius?: import("react-native/types").AnimatableNumericValue | undefined;
+            borderStartEndRadius?: string | import("react-native/types").AnimatableNumericValue | undefined;
+            borderStartStartRadius?: string | import("react-native/types").AnimatableNumericValue | undefined;
             borderStyle?: "solid" | "dotted" | "dashed" | undefined;
             borderTopColor?: import("react-native/types").ColorValue | undefined;
-            borderTopEndRadius?: import("react-native/types").AnimatableNumericValue | undefined;
-            borderTopLeftRadius?: import("react-native/types").AnimatableNumericValue | undefined;
-            borderTopRightRadius?: import("react-native/types").AnimatableNumericValue | undefined;
-            borderTopStartRadius?: import("react-native/types").AnimatableNumericValue | undefined;
+            borderTopEndRadius?: string | import("react-native/types").AnimatableNumericValue | undefined;
+            borderTopLeftRadius?: string | import("react-native/types").AnimatableNumericValue | undefined;
+            borderTopRightRadius?: string | import("react-native/types").AnimatableNumericValue | undefined;
+            borderTopStartRadius?: string | import("react-native/types").AnimatableNumericValue | undefined;
+            outlineColor?: import("react-native/types").ColorValue | undefined;
+            outlineOffset?: import("react-native/types").AnimatableNumericValue | undefined;
+            outlineStyle?: "solid" | "dotted" | "dashed" | undefined;
+            outlineWidth?: import("react-native/types").AnimatableNumericValue | undefined;
             opacity?: import("react-native/types").AnimatableNumericValue | undefined;
             elevation?: number | undefined;
             pointerEvents?: "auto" | "none" | "box-none" | "box-only" | undefined;
-            alignContent?: "center" | "flex-start" | "flex-end" | "stretch" | "space-between" | "space-around" | undefined;
+            isolation?: "auto" | "isolate" | undefined;
+            cursor?: import("react-native/types").CursorValue | undefined;
+            boxShadow?: string | readonly import("react-native/types").BoxShadowValue[] | undefined;
+            filter?: string | readonly import("react-native/types").FilterFunction[] | undefined;
+            mixBlendMode?: import("react-native/types").BlendMode | undefined;
+            experimental_backgroundImage?: string | readonly import("react-native/types").GradientValue[] | undefined;
+            alignContent?: "center" | "flex-start" | "flex-end" | "stretch" | "space-between" | "space-around" | "space-evenly" | undefined;
             alignItems?: import("react-native/types").FlexAlignType | undefined;
             alignSelf?: "auto" | import("react-native/types").FlexAlignType | undefined;
             aspectRatio?: string | number | undefined;
@@ -72,14 +82,15 @@ declare const useFieldType: (props: UseFieldTypeProps) => {
             borderTopWidth?: number | undefined;
             borderWidth?: number | undefined;
             bottom?: import("react-native/types").DimensionValue | undefined;
-            display?: "none" | "flex" | undefined;
+            boxSizing?: "border-box" | "content-box" | undefined;
+            display?: "none" | "flex" | "contents" | undefined;
             end?: import("react-native/types").DimensionValue | undefined;
             flex?: number | undefined;
             flexBasis?: import("react-native/types").DimensionValue | undefined;
             flexDirection?: "row" | "column" | "row-reverse" | "column-reverse" | undefined;
-            rowGap?: number | undefined;
-            gap?: number | undefined;
-            columnGap?: number | undefined;
+            rowGap?: string | number | undefined;
+            gap?: string | number | undefined;
+            columnGap?: string | number | undefined;
             flexGrow?: number | undefined;
             flexShrink?: number | undefined;
             flexWrap?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
@@ -109,13 +120,32 @@ declare const useFieldType: (props: UseFieldTypeProps) => {
             paddingStart?: import("react-native/types").DimensionValue | undefined;
             paddingTop?: import("react-native/types").DimensionValue | undefined;
             paddingVertical?: import("react-native/types").DimensionValue | undefined;
-            position?: "absolute" | "relative" | undefined;
+            position?: "absolute" | "relative" | "static" | undefined;
             right?: import("react-native/types").DimensionValue | undefined;
             start?: import("react-native/types").DimensionValue | undefined;
             top?: import("react-native/types").DimensionValue | undefined;
             width?: import("react-native/types").DimensionValue | undefined;
             zIndex?: number | undefined;
             direction?: "ltr" | "rtl" | "inherit" | undefined;
+            inset?: import("react-native/types").DimensionValue | undefined;
+            insetBlock?: import("react-native/types").DimensionValue | undefined;
+            insetBlockEnd?: import("react-native/types").DimensionValue | undefined;
+            insetBlockStart?: import("react-native/types").DimensionValue | undefined;
+            insetInline?: import("react-native/types").DimensionValue | undefined;
+            insetInlineEnd?: import("react-native/types").DimensionValue | undefined;
+            insetInlineStart?: import("react-native/types").DimensionValue | undefined;
+            marginBlock?: import("react-native/types").DimensionValue | undefined;
+            marginBlockEnd?: import("react-native/types").DimensionValue | undefined;
+            marginBlockStart?: import("react-native/types").DimensionValue | undefined;
+            marginInline?: import("react-native/types").DimensionValue | undefined;
+            marginInlineEnd?: import("react-native/types").DimensionValue | undefined;
+            marginInlineStart?: import("react-native/types").DimensionValue | undefined;
+            paddingBlock?: import("react-native/types").DimensionValue | undefined;
+            paddingBlockEnd?: import("react-native/types").DimensionValue | undefined;
+            paddingBlockStart?: import("react-native/types").DimensionValue | undefined;
+            paddingInline?: import("react-native/types").DimensionValue | undefined;
+            paddingInlineEnd?: import("react-native/types").DimensionValue | undefined;
+            paddingInlineStart?: import("react-native/types").DimensionValue | undefined;
             shadowColor?: import("react-native/types").ColorValue | undefined;
             shadowOffset?: Readonly<{
                 width: number;
@@ -123,7 +153,7 @@ declare const useFieldType: (props: UseFieldTypeProps) => {
             }> | undefined;
             shadowOpacity?: import("react-native/types").AnimatableNumericValue | undefined;
             shadowRadius?: number | undefined;
-            transform?: string | (({
+            transform?: string | readonly (({
                 perspective: import("react-native/types").AnimatableNumericValue;
             } & {
                 rotate?: undefined;
@@ -244,7 +274,7 @@ declare const useFieldType: (props: UseFieldTypeProps) => {
                 skewY?: undefined;
                 matrix?: undefined;
             }) | ({
-                translateX: import("react-native/types").AnimatableNumericValue;
+                translateX: import("react-native/types").AnimatableNumericValue | `${number}%`;
             } & {
                 perspective?: undefined;
                 rotate?: undefined;
@@ -259,7 +289,7 @@ declare const useFieldType: (props: UseFieldTypeProps) => {
                 skewY?: undefined;
                 matrix?: undefined;
             }) | ({
-                translateY: import("react-native/types").AnimatableNumericValue;
+                translateY: import("react-native/types").AnimatableNumericValue | `${number}%`;
             } & {
                 perspective?: undefined;
                 rotate?: undefined;

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" | "lightness" | "saturation" | GradientSliderTypes | undefined;
+    type?: "default" | "hue" | "saturation" | "lightness" | GradientSliderTypes | undefined;
     gradientSteps?: number | undefined;
     onValueChange?: ((value: string, alfa: number) => void) | undefined;
     accessible?: boolean | undefined;

package/src/components/sortableGridList/SortableItem.js

@@ -23,6 +23,8 @@ 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);
@@ -85,6 +87,15 @@ 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';
 
@@ -148,16 +159,14 @@ function SortableItem(props) {
     }
   });
   const animatedStyle = useAnimatedStyle(() => {
-    const scale = withSpring(isDragging.value ? 1.1 : 1);
-    const zIndex = isDragging.value ? 100 : withTiming(0, animationConfig);
     return {
-      zIndex,
+      zIndex: Math.round(zIndex.value),
       transform: [{
         translateX: translateX.value
       }, {
         translateY: translateY.value
       }, {
-        scale
+        scale: scale.value
       }]
     };
   });

package/src/components/sortableList/SortableListItem.js

@@ -51,6 +51,8 @@ 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,
@@ -78,6 +80,15 @@ 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);
@@ -143,20 +154,18 @@ 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,
+      zIndex: Math.round(zIndex.value),
       transform: [horizontal ? {
         translateX: translation.value
       } : {
         translateY: translation.value
       }, {
-        scale
+        scale: scale.value
       }],
       opacity,
       ...itemProps?.margins,