react-native-ui-lib 7.43.0-snapshot.7157 → 7.43.0-snapshot.7175

package/metro.config.js

@@ -5,9 +5,9 @@ const {assetExts, sourceExts} = defaultConfig.resolver;
 
 /**
  * Metro configuration
- * https://facebook.github.io/metro/docs/configuration
+ * https://reactnative.dev/docs/metro
  *
- * @type {import('metro-config').MetroConfig}
+ * @type {import('@react-native/metro-config').MetroConfig}
  */
 
 const config = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "7.43.0-snapshot.7157",
+  "version": "7.43.0-snapshot.7175",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",
@@ -62,9 +62,9 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.16.8",
-    "@babel/core": "^7.24.4",
+    "@babel/core": "^7.25.2",
     "@babel/plugin-transform-modules-commonjs": "^7.17.9",
-    "@babel/preset-env": "^7.20.0",
+    "@babel/preset-env": "^7.25.3",
     "@babel/preset-react": "^7.10.1",
     "@babel/runtime": "^7.26.10",
     "@formatjs/intl-datetimeformat": "^6.0.3",
@@ -73,28 +73,29 @@
     "@formatjs/intl-numberformat": "^8.0.4",
     "@formatjs/intl-pluralrules": "^5.0.3",
     "@react-native-community/blur": "4.4.1",
+    "@react-native-community/cli": "15.0.1",
+    "@react-native-community/cli-platform-android": "15.0.1",
+    "@react-native-community/cli-platform-ios": "15.0.1",
     "@react-native-community/datetimepicker": "^3.4.6",
-    "@react-native-community/netinfo": "^5.6.2",
-    "@react-native/babel-preset": "0.73.21",
-    "@react-native/eslint-config": "0.73.2",
-    "@react-native/metro-config": "0.73.5",
-    "@react-native/typescript-config": "0.73.1",
+    "@react-native-community/netinfo": "11.3.3",
+    "@react-native/babel-preset": "0.77.2",
+    "@react-native/eslint-config": "0.77.2",
+    "@react-native/metro-config": "0.77.2",
+    "@react-native/typescript-config": "0.77.2",
     "@shopify/flash-list": "1.7.6",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/react-native": "^11.5.1",
     "@types/hoist-non-react-statics": "^3.3.1",
-    "@types/jest": "^29.2.1",
+    "@types/jest": "^29.5.13",
     "@types/lodash": "^4.0.0",
     "@types/prop-types": "^15.5.3",
     "@types/react": "18.3.7",
-    "@types/react-native": "0.73.0",
     "@types/react-test-renderer": "^18.3.0",
     "@types/tinycolor2": "^1.4.2",
     "@types/url-parse": "^1.4.3",
     "@typescript-eslint/eslint-plugin": "^5.3.1",
     "@typescript-eslint/parser": "^5.3.1",
     "@welldone-software/why-did-you-render": "^3.2.1",
-    "babel-jest": "^29.6.3",
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-module-resolver": "^5.0.0",
     "eslint": "8.19.0",
@@ -104,7 +105,6 @@
     "eslint-plugin-react-native": "^4.0.0",
     "jest": "^29.6.3",
     "light-date": "^1.2.0",
-    "metro-react-native-babel-preset": "0.73.10",
     "moment": "^2.24.0",
     "object-hash": "^3.0.0",
     "postcss": "^8.4.21",
@@ -114,27 +114,28 @@
     "react": "18.2.0",
     "react-autobind": "^1.0.6",
     "react-dom": "^18.2.0",
-    "react-native": "0.73.9",
+    "react-native": "0.77.2",
     "react-native-fs": "^2.20.0",
-    "react-native-gesture-handler": "2.14.1",
+    "react-native-gesture-handler": "2.22.1",
     "react-native-haptic-feedback": "^1.11.0",
     "react-native-linear-gradient": "2.6.2",
-    "react-native-mmkv": "2.11.0",
-    "react-native-navigation": "7.40.1",
+    "react-native-mmkv": "3.2.0",
+    "react-native-navigation": "8.1.0-rc01-snapshot.1710",
     "react-native-reanimated": "3.16.7",
     "react-native-shimmer-placeholder": "^2.0.6",
-    "react-native-svg": "15.2.0",
+    "react-native-svg": "15.11.2",
     "react-native-svg-transformer": "1.5.0",
-    "react-test-renderer": "18.2.0",
+    "react-test-renderer": "18.3.1",
     "reassure": "^0.4.1",
+    "setimmediate": "^1.0.5",
     "shell-utils": "^1.0.10",
     "typescript": "5.0.4"
   },
   "peerDependencies": {
     "react": ">=17.0.1",
-    "react-native": ">=0.64.1",
-    "react-native-gesture-handler": ">=2.5.0",
-    "react-native-reanimated": ">=2.0.0",
+    "react-native": ">=0.76.0",
+    "react-native-gesture-handler": ">=2.22.0",
+    "react-native-reanimated": ">=3.16.7",
     "react-native-ui-lib": "*"
   },
   "jest": {
@@ -162,7 +163,6 @@
   "engines": {
     "node": ">=18"
   },
-  "packageManager": "yarn@3.4.1",
   "files": [
     "*.js",
     "*.d.ts",

package/panView.d.ts

@@ -0,0 +1,2 @@
+import {PanView} from './src';
+export default PanView;

package/panView.js

@@ -0,0 +1 @@
+module.exports = require('./src/components/panView').default;

package/react-native.config.js

@@ -10,11 +10,9 @@ module.exports = {
         sourceDir: '../uilib-native/android/',
         packageImportPath: `import com.wix.reactnativeuilib.dynamicfont.DynamicFontPackage;
 import com.wix.reactnativeuilib.highlighterview.HighlighterViewPackage;
-import com.wix.reactnativeuilib.keyboardinput.KeyboardInputPackage;
-import com.wix.reactnativeuilib.textinput.TextInputDelKeyHandlerPackage;`,
+import com.wix.reactnativeuilib.keyboardinput.KeyboardInputPackage;`,
         packageInstance: `new DynamicFontPackage(),
       new HighlighterViewPackage(),
-      new TextInputDelKeyHandlerPackage(),
       new KeyboardInputPackage(getApplication())`
       }
     }

package/src/commons/Constants.js

@@ -26,8 +26,13 @@ function setStatusBarHeight() {
   } = NativeModules;
   statusBarHeight = (StatusBar.currentHeight ?? StatusBarManager?.HEIGHT) || 0;
   if (isIOS && StatusBarManager) {
-    // override guesstimate height with the actual height from StatusBarManager
-    StatusBarManager.getHeight(data => statusBarHeight = data.height);
+    try {
+      // override guesstimate height with the actual height from StatusBarManager
+      StatusBarManager.getHeight(data => statusBarHeight = data.height);
+    } catch (error) {
+      console.warn('Constants: StatusBarManager.getHeight not available in new architecture, using fallback');
+      // Keep the fallback height we already set above
+    }
   }
 }
 function getAspectRatio() {

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

@@ -1,14 +1,9 @@
 import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
-import { DialogProps } from '../dialog';
 import { ButtonProps } from '../button';
-import { DialogProps as IncubatorDialogProps } from '../../incubator';
+import { type DialogProps } from '../dialog';
 type ActionSheetOnOptionPress = (index: number) => void;
 type ActionSheetProps = {
-    /**
-     * Migrate to the Incubator.Dialog component
-     */
-    migrateDialog?: boolean;
     /**
      * Whether to show the action sheet or not
      */
@@ -68,11 +63,6 @@ type ActionSheetProps = {
      * Note: you will need to call onOptionPress so the option's onPress will be called
      */
     renderAction?: (option: ButtonProps, index: number, onOptionPress: ActionSheetOnOptionPress) => JSX.Element;
-    /**
-     * @deprecated
-     * Called once the modal has been dismissed completely
-     */
-    onModalDismissed?: DialogProps['onDialogDismissed'];
     /**
      * Whether or not to handle SafeArea
      */
@@ -80,7 +70,7 @@ type ActionSheetProps = {
     /**
      * Additional props to send to the Dialog
      */
-    dialogProps?: Omit<DialogProps, 'useSafeArea' | 'testID' | 'containerStyle' | 'visible' | 'onDismiss' | 'onDialogDismissed'> | IncubatorDialogProps;
+    dialogProps?: Omit<DialogProps, 'useSafeArea' | 'testID' | 'containerStyle' | 'visible' | 'onDismiss' | 'onDialogDismissed'> | DialogProps;
     /**
      * testID for e2e tests
      */

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/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",