react-native-ui-lib 7.46.3 → 8.0.0

package/src/components/actionSheet/index.js

@@ -6,15 +6,12 @@ import React, { Component } from 'react';
 import { ActionSheetIOS, StyleSheet } from 'react-native';
 import { Colors } from "../../style";
 import { asBaseComponent, Constants } from "../../commons/new";
-import Dialog from "../dialog";
 import View from "../view";
 import Text from "../text";
 import Image from "../image";
 //@ts-ignore
 import ListItem from "../listItem";
-import PanningProvider from "../panningViews/panningProvider";
-import { Dialog as IncubatorDialog } from "../../incubator";
-import { LogService } from "../../services";
+import Dialog from "../dialog";
 const VERTICAL_PADDING = 8;
 /**
  * @description: Cross platform Action Sheet, with a support for native iOS solution
@@ -130,55 +127,19 @@ class ActionSheet extends Component {
         {this.renderActions()}
       </View>;
   }
-  renderOldDialog() {
+  render() {
     const {
-      useNativeIOS,
       visible,
       onDismiss,
       dialogStyle,
-      onModalDismissed,
       testID,
       useSafeArea,
       dialogProps
     } = this.props;
-    if (Constants.isIOS && useNativeIOS) {
-      return null;
-    }
-    return <Dialog bottom centerH width="100%" panDirection={PanningProvider.Directions.DOWN} {...dialogProps} useSafeArea={useSafeArea} testID={testID} containerStyle={[styles.dialog, dialogStyle]} visible={visible} onDismiss={onDismiss} onDialogDismissed={onModalDismissed}>
+    return <Dialog bottom centerH width="100%" direction={Dialog.directions.DOWN} {...dialogProps} useSafeArea={useSafeArea} testID={testID} containerStyle={[styles.incubatorDialog, dialogStyle]} visible={visible} onDismiss={onDismiss}>
         {this.renderSheet()}
       </Dialog>;
   }
-  renderNewDialog() {
-    const {
-      visible,
-      onDismiss,
-      dialogStyle,
-      onModalDismissed,
-      testID,
-      useSafeArea,
-      dialogProps
-    } = this.props;
-    if (onModalDismissed) {
-      LogService.deprecationWarn({
-        component: 'ActionSheet',
-        oldProp: 'onModalDismissed',
-        newProp: 'onDismiss'
-      });
-    }
-    return <IncubatorDialog bottom centerH width="100%" direction={PanningProvider.Directions.DOWN} {...dialogProps} useSafeArea={useSafeArea} testID={testID} containerStyle={[styles.incubatorDialog, dialogStyle]} visible={visible} onDismiss={onDismiss}>
-        {this.renderSheet()}
-      </IncubatorDialog>;
-  }
-  render() {
-    const {
-      migrateDialog
-    } = this.props;
-    if (migrateDialog) {
-      return this.renderNewDialog();
-    } else {
-      return this.renderOldDialog();
-    }
-  }
 }
 export default asBaseComponent(ActionSheet);
 const styles = StyleSheet.create({

package/src/components/animatedImage/index.js

@@ -1,10 +1,11 @@
 // TODO: consider unify this component functionality with our Image component
-import React, { useState, useCallback, useMemo } from 'react';
+import React, { useState, useCallback, useMemo, useEffect } from 'react';
 import { StyleSheet } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated';
 import View from "../../components/view";
 import Image from "../../components/image";
 import { useDidUpdate } from "../../hooks";
+import Constants from "../../commons/Constants";
 const UIAnimatedImage = Animated.createAnimatedComponent(Image);
 /**
  * @description: Image component that fades-in the image with animation once it's loaded
@@ -31,6 +32,13 @@ const AnimatedImage = props => {
       opacity.value = 1;
     }
   }, [loader]);
+  useEffect(() => {
+    if (Constants.isIOS) {
+      setIsLoading(true);
+      propsOnLoadStart?.();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [source]);
   const onLoad = useCallback(event => {
     setIsLoading(false);
     propsOnLoad?.(event);
@@ -43,6 +51,8 @@ const AnimatedImage = props => {
   },
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [setIsLoading, propsOnLoad, animationDuration]);
+
+  // TODO: RN 77 - revert to this solution when iOS is fixed in future RN releases
   const onLoadStart = useCallback(() => {
     setIsLoading(true);
     propsOnLoadStart?.();
@@ -56,7 +66,7 @@ const AnimatedImage = props => {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const _style = useMemo(() => [style, fadeInStyle], [style]);
   return <View style={containerStyle}>
-      <UIAnimatedImage {...others} style={_style} source={source} onLoad={onLoad} onLoadStart={onLoadStart} testID={testID} imageStyle={undefined} />
+      <UIAnimatedImage {...others} style={_style} source={source} onLoad={onLoad} onLoadStart={Constants.isAndroid ? onLoadStart : undefined} testID={testID} imageStyle={undefined} />
       {isLoading && loader && <View style={styles.loader}>{loader}</View>}
     </View>;
 };

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

@@ -109,7 +109,7 @@ declare function createStyles(props: BadgeProps): {
         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;
@@ -131,31 +131,41 @@ declare function createStyles(props: BadgeProps): {
         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;
@@ -167,14 +177,15 @@ declare function createStyles(props: BadgeProps): {
         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" | 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;
@@ -204,13 +215,32 @@ declare function createStyles(props: BadgeProps): {
         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;
@@ -218,7 +248,7 @@ declare function createStyles(props: BadgeProps): {
         }> | undefined;
         shadowOpacity?: import("react-native").AnimatableNumericValue | undefined;
         shadowRadius?: number | undefined;
-        transform?: string | (({
+        transform?: string | readonly (({
             perspective: import("react-native").AnimatableNumericValue;
         } & {
             rotate?: undefined;
@@ -339,7 +369,7 @@ declare function createStyles(props: BadgeProps): {
             skewY?: undefined;
             matrix?: undefined;
         }) | ({
-            translateX: import("react-native").AnimatableNumericValue;
+            translateX: import("react-native").AnimatableNumericValue | `${number}%`;
         } & {
             perspective?: undefined;
             rotate?: undefined;
@@ -354,7 +384,7 @@ declare function createStyles(props: BadgeProps): {
             skewY?: undefined;
             matrix?: undefined;
         }) | ({
-            translateY: import("react-native").AnimatableNumericValue;
+            translateY: import("react-native").AnimatableNumericValue | `${number}%`;
         } & {
             perspective?: undefined;
             rotate?: undefined;
@@ -431,7 +461,7 @@ declare function createStyles(props: BadgeProps): {
         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;
         textAlign?: "auto" | "left" | "right" | "center" | "justify" | undefined;
         textDecorationLine?: "none" | "underline" | "line-through" | "underline line-through" | undefined;
@@ -453,31 +483,41 @@ declare function createStyles(props: BadgeProps): {
         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;
@@ -489,14 +529,15 @@ declare function createStyles(props: BadgeProps): {
         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" | 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;
@@ -526,13 +567,32 @@ declare function createStyles(props: BadgeProps): {
         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;
@@ -540,7 +600,7 @@ declare function createStyles(props: BadgeProps): {
         }> | undefined;
         shadowOpacity?: import("react-native").AnimatableNumericValue | undefined;
         shadowRadius?: number | undefined;
-        transform?: string | (({
+        transform?: string | readonly (({
             perspective: import("react-native").AnimatableNumericValue;
         } & {
             rotate?: undefined;
@@ -661,7 +721,7 @@ declare function createStyles(props: BadgeProps): {
             skewY?: undefined;
             matrix?: undefined;
         }) | ({
-            translateX: import("react-native").AnimatableNumericValue;
+            translateX: import("react-native").AnimatableNumericValue | `${number}%`;
         } & {
             perspective?: undefined;
             rotate?: undefined;
@@ -676,7 +736,7 @@ declare function createStyles(props: BadgeProps): {
             skewY?: undefined;
             matrix?: undefined;
         }) | ({
-            translateY: import("react-native").AnimatableNumericValue;
+            translateY: import("react-native").AnimatableNumericValue | `${number}%`;
         } & {
             perspective?: undefined;
             rotate?: undefined;
@@ -770,7 +830,7 @@ declare const _default: React.ForwardRefExoticComponent<ViewProps & TouchableOpa
     /**
      * Defines how far a touch event can start away from the badge.
      */
-    hitSlop?: import("react-native").Insets | undefined;
+    hitSlop?: number | import("react-native").Insets | null | undefined;
     /**
      * width of border around the badge
      */

package/src/components/button/button.api.json

@@ -155,7 +155,7 @@
     {
       "name": "animateLayout",
       "type": "boolean",
-      "description": "should animate layout change. Note: For Android you must set 'setLayoutAnimationEnabledExperimental(true)' via RN's 'UIManager'"
+      "description": "should animate layout change"
     },
     {
       "name": "animateTo",

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/colorPicker/ColorPickerDialog.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
-import { DialogProps } from '../../incubator/dialog';
+import { DialogProps } from '../dialog';
 export interface ColorPickerDialogProps extends DialogProps {
     /**
      * The initial color to pass the picker dialog

package/src/components/colorPicker/ColorPickerDialog.js

@@ -3,7 +3,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { LayoutAnimation, StyleSheet, Keyboard } from 'react-native';
 import { Constants, asBaseComponent } from "../../commons/new";
 import { Colors } from "../../style";
-import Dialog from "../../incubator/dialog";
+import Dialog from "../dialog";
 import { getColorValue, getValidColorString, getTextColor, BORDER_RADIUS } from "./ColorPickerPresenter";
 import ColorPickerDialogHeader from "./ColorPickerDialogHeader";
 import ColorPickerPreview from "./ColorPickerPreview";