react-native-ui-lib 7.46.3 → 8.0.0

package/src/components/hint/index.js

@@ -22,8 +22,8 @@ const HINT_MIN_WIDTH = 68;
 const Hint = props => {
   const {
     visible,
-    useModal,
-    position,
+    useModal = true,
+    position = HintPositions.BOTTOM,
     children,
     message,
     containerWidth = Constants.windowWidth,
@@ -69,6 +69,7 @@ const Hint = props => {
     if (targetRef.current && hintRef.current) {
       focusAccessibilityOnHint(targetRef.current, hintRef.current);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   const targetLayout = useMemo(() => {
     return isUsingModal ? targetLayoutInWindowState : targetLayoutState;
@@ -78,6 +79,7 @@ const Hint = props => {
     if (hintRef.current) {
       focusAccessibilityOnHint(targetRef.current, hintRef.current);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   const showHint = !!targetLayout;
   const {
@@ -240,10 +242,6 @@ const styles = StyleSheet.create({
   }
 });
 Hint.displayName = 'Hint';
-Hint.defaultProps = {
-  position: HintPositions.BOTTOM,
-  useModal: true
-};
 Hint.positions = HintPositions;
 export { HintProps, Hint };
 

package/src/components/image/index.js

@@ -95,6 +95,10 @@ class Image extends PureComponent {
   };
   onError = event => {
     if (event.nativeEvent.error) {
+      // TODO: RN 77 hack - test in future releases (ticket 4835)
+      if (Constants.isIOS && this.props.source === undefined) {
+        return;
+      }
       this.setState({
         error: true
       });

package/src/components/index.js

@@ -110,21 +110,6 @@ export default {
   get PageControl() {
     return require('./pageControl').default;
   },
-  get PanningProvider() {
-    return require('./panningViews/panningProvider').default;
-  },
-  get PanGestureView() {
-    return require('./panningViews/panGestureView').default;
-  },
-  get PanListenerView() {
-    return require('./panningViews/panListenerView').default;
-  },
-  get PanDismissibleView() {
-    return require('./panningViews/panDismissibleView').default;
-  },
-  get PanResponderView() {
-    return require('./panningViews/panResponderView').default;
-  },
   get Picker() {
     return require('./picker').default;
   },
@@ -158,10 +143,6 @@ export default {
   get RadioGroup() {
     return require('./radioButton').RadioGroup;
   },
-
-  get SharedTransition() {
-    return require('./sharedTransition').default;
-  },
   get StackAggregator() {
     return require('./stackAggregator').default;
   },

package/src/components/marquee/types.js

@@ -1,7 +1,10 @@
 export let MarqueeDirections = /*#__PURE__*/function (MarqueeDirections) {
   MarqueeDirections["RIGHT"] = "RIGHT";
+  //LTR
   MarqueeDirections["LEFT"] = "LEFT";
+  //RTL
   MarqueeDirections["UP"] = "UP";
-  MarqueeDirections["DOWN"] = "DOWN";
+  //Bottom Up
+  MarqueeDirections["DOWN"] = "DOWN"; //Up To Bottom
   return MarqueeDirections;
 }({});

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

@@ -40,6 +40,11 @@ export interface ModalProps extends RNModalProps {
      * Send additional props to the KeyboardAvoidingView (iOS only)
      */
     keyboardAvoidingViewProps?: KeyboardAvoidingViewProps;
+    /**
+     * Fix RNModal's interaction with react-native-reanimated (Android only, default: true)
+     * See this https://github.com/software-mansion/react-native-reanimated/issues/6659#issuecomment-2704931585
+     */
+    fixReanimatedInteraction?: boolean;
 }
 /**
  * @description: Component that present content on top of the invoking screen

package/src/components/modal/index.js

@@ -55,6 +55,7 @@ class Modal extends Component {
   }
   render() {
     const {
+      fixReanimatedInteraction = true,
       blurView,
       enableModalBlur,
       visible,
@@ -76,16 +77,19 @@ class Modal extends Component {
       style: [styles.fill, keyboardAvoidingViewProps?.style]
     } : {};
     const Container = blurView ? blurView : defaultContainer;
-    return <RNModal visible={Boolean(visible)} {...others}>
-        <GestureContainer {...gestureContainerProps}>
-          <KeyboardAvoidingContainer {...keyboardAvoidingContainerProps}>
-            <Container style={styles.fill} blurType="light">
-              {this.renderTouchableOverlay()}
-              {this.props.children}
-            </Container>
-          </KeyboardAvoidingContainer>
-        </GestureContainer>
-      </RNModal>;
+    const HackContainer = fixReanimatedInteraction && Constants.isAndroid ? View : React.Fragment;
+    return <HackContainer>
+        <RNModal visible={Boolean(visible)} {...others}>
+          <GestureContainer {...gestureContainerProps}>
+            <KeyboardAvoidingContainer {...keyboardAvoidingContainerProps}>
+              <Container style={styles.fill} blurType="light">
+                {this.renderTouchableOverlay()}
+                {this.props.children}
+              </Container>
+            </KeyboardAvoidingContainer>
+          </GestureContainer>
+        </RNModal>
+      </HackContainer>;
   }
 }
 const styles = StyleSheet.create({

package/src/components/modal/modal.api.json

@@ -38,6 +38,11 @@
       "name": "keyboardAvoidingViewProps",
       "type": "object",
       "description": "Send additional props to the KeyboardAvoidingView (iOS only)"
+    },
+    {
+      "name": "fixReanimatedInteraction",
+      "type": "boolean",
+      "description": "Fix RNModal's interaction with react-native-reanimated (Android only, default: true)"
     }
   ],
   "snippet": [

package/src/{incubator → components}/panView/index.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
-import { ViewProps } from '../../components/view';
+import { ViewProps } from '../view';
 import { PanningDirections, PanningDirectionsEnum } from './panningUtil';
-import { PanGestureProps, PanViewDirections, PanViewDirectionsEnum, PanViewDismissThreshold, DEFAULT_DIRECTIONS, DEFAULT_ANIMATION_CONFIG } from './usePanGesture';
-export { PanningDirections, PanningDirectionsEnum, PanViewDirections, PanViewDirectionsEnum, PanViewDismissThreshold, DEFAULT_DIRECTIONS, DEFAULT_ANIMATION_CONFIG };
+import { PanGestureProps, PanViewDirections, PanViewDirectionsEnum, PanViewDismissThreshold } from './usePanGesture';
+export { PanningDirections, PanningDirectionsEnum, PanViewDirections, PanViewDirectionsEnum, PanViewDismissThreshold };
 export interface PanViewProps extends Omit<PanGestureProps, 'hiddenLocation'>, ViewProps {
     /**
      * Add a style to the container

package/src/{incubator → components}/panView/index.js

@@ -2,11 +2,11 @@ import React from 'react';
 import { useAnimatedStyle } from 'react-native-reanimated';
 import { GestureDetector, gestureHandlerRootHOC } from 'react-native-gesture-handler';
 import { asBaseComponent } from "../../commons/new";
-import View from "../../components/view";
-import useHiddenLocation from "../hooks/useHiddenLocation";
+import View from "../view";
+import useHiddenLocation from "../../hooks/useHiddenLocation";
 import { PanningDirections, PanningDirectionsEnum } from "./panningUtil";
-import usePanGesture, { PanViewDirections, PanViewDirectionsEnum, PanViewDismissThreshold, DEFAULT_DIRECTIONS, DEFAULT_ANIMATION_CONFIG } from "./usePanGesture";
-export { PanningDirections, PanningDirectionsEnum, PanViewDirections, PanViewDirectionsEnum, PanViewDismissThreshold, DEFAULT_DIRECTIONS, DEFAULT_ANIMATION_CONFIG };
+import usePanGesture, { PanViewDirections, PanViewDirectionsEnum, PanViewDismissThreshold, DEFAULT_DIRECTIONS } from "./usePanGesture";
+export { PanningDirections, PanningDirectionsEnum, PanViewDirections, PanViewDirectionsEnum, PanViewDismissThreshold };
 const PanView = props => {
   const {
     directions = DEFAULT_DIRECTIONS,

package/src/{incubator → components}/panView/usePanGesture.d.ts

@@ -1,5 +1,5 @@
 import { PanningDirections, PanningDirectionsEnum, PanningDismissThreshold } from './panningUtil';
-import type { HiddenLocation } from '../hooks/useHiddenLocation';
+import type { HiddenLocation } from '../../hooks/useHiddenLocation';
 export type PanViewDirections = PanningDirections;
 export declare const PanViewDirectionsEnum: typeof PanningDirectionsEnum;
 export type PanViewDismissThreshold = PanningDismissThreshold;

package/src/components/picker/Picker.driver.new.d.ts

@@ -1,5 +1,5 @@
-import { ComponentProps } from '../../testkit/new/Component.driver';
-export declare const PickerDriver: (props: ComponentProps, useDialog: boolean) => {
+import { ComponentDriverOptions, ComponentProps } from '../../testkit/new/Component.driver';
+export declare const PickerDriver: (props: ComponentProps, useDialog: boolean, options?: ComponentDriverOptions) => {
     exists: () => boolean;
     getValue: () => string | undefined;
     open: () => void;

package/src/components/picker/Picker.driver.new.js

@@ -1,9 +1,9 @@
 import { TextFieldDriver } from "../textField/TextField.driver.new";
 import { ModalDriver } from "../modal/Modal.driver.new";
-import { DialogDriver } from "../../incubator/dialog/Dialog.driver.new";
+import { DialogDriver } from "../dialog/Dialog.driver.new";
 import { ButtonDriver } from "../button/Button.driver.new";
 import { ExpandableOverlayDriver } from "../../incubator/expandableOverlay/ExpandableOverlay.driver";
-export const PickerDriver = (props, useDialog) => {
+export const PickerDriver = (props, useDialog, options) => {
   const expandableOverlayDriver = ExpandableOverlayDriver({
     renderTree: props.renderTree,
     testID: props.testID
@@ -11,7 +11,7 @@ export const PickerDriver = (props, useDialog) => {
   const textFieldDriver = TextFieldDriver({
     renderTree: props.renderTree,
     testID: `${props.testID}.input`
-  });
+  }, options);
   const modalDriver = ModalDriver({
     renderTree: props.renderTree,
     testID: `${props.testID}.overlay`

package/src/components/picker/PickerItem.js

@@ -11,7 +11,7 @@ import View from "../view";
 import TouchableOpacity from "../touchableOpacity";
 import Image from "../image";
 import Text from "../text";
-import { getItemLabel, isItemSelected } from "./PickerPresenter";
+import { isItemSelected } from "./PickerPresenter";
 import PickerContext from "./PickerContext";
 /**
  * @description: Picker.Item, for configuring the Picker's selectable options
@@ -29,14 +29,8 @@ const PickerItem = props => {
     testID
   } = props;
   const context = useContext(PickerContext);
-  const {
-    migrate
-  } = context;
   const customRenderItem = props.renderItem || context.renderItem;
-  // @ts-expect-error TODO: fix after removing migrate prop completely
-  const itemValue = !migrate && typeof value === 'object' ? value?.value : value;
-  const isSelected = isItemSelected(itemValue, context.value);
-  const itemLabel = getItemLabel(label, value, props.getItemLabel || context.getItemLabel);
+  const isSelected = isItemSelected(value, context.value);
   const selectedCounter = context.selectionLimit && _isArray(context.value) && context.value?.length;
   const accessibilityProps = {
     accessibilityState: isSelected ? {
@@ -67,23 +61,15 @@ const PickerItem = props => {
     if (onPress && (await onPress(context.isMultiMode ? !isSelected : undefined, props)) === false) {
       return;
     }
-    if (migrate) {
-      context.onPress(value);
-    } else {
-      // @ts-expect-error TODO: fix after removing migrate prop completely
-      context.onPress(typeof value === 'object' || context.isMultiMode ? value : {
-        value,
-        label: itemLabel
-      });
-    }
-  }, [migrate, value, context.onPress, onPress]);
+    context.onPress(value);
+  }, [value, context.onPress, onPress]);
   const onSelectedLayout = useCallback((...args) => {
     _invoke(context, 'onSelectedLayout', ...args);
   }, []);
   const _renderItem = () => {
     return <View style={styles.container} flex row spread centerV>
         <Text numberOfLines={1} style={itemLabelStyle}>
-          {itemLabel}
+          {label}
         </Text>
         {selectedIndicator}
       </View>;
@@ -93,7 +79,7 @@ const PickerItem = props => {
       ...props,
       isSelected,
       isItemDisabled
-    }, itemLabel) : _renderItem()}
+    }, label) : _renderItem()}
     </TouchableOpacity>;
 };
 const styles = StyleSheet.create({

package/src/components/picker/PickerPresenter.d.ts

@@ -4,5 +4,4 @@ export declare function extractPickerItems(props: PickerProps): {
     label: any;
 }[];
 export declare function isItemSelected(childValue: PickerSingleValue, selectedValue?: PickerValue): boolean;
-export declare function getItemLabel(label: string, value: PickerValue, getItemLabel?: PickerProps['getItemLabel']): string | undefined;
 export declare function shouldFilterOut(searchValue: string, itemLabel?: string): boolean;

package/src/components/picker/PickerPresenter.js

@@ -1,7 +1,5 @@
 import _lowerCase from "lodash/lowerCase";
 import _includes from "lodash/includes";
-import _get from "lodash/get";
-import _isObject from "lodash/isObject";
 import _find from "lodash/find";
 import React from 'react';
 export function extractPickerItems(props) {
@@ -20,33 +18,13 @@ export function isItemSelected(childValue, selectedValue) {
   let isSelected = false;
   if (Array.isArray(selectedValue)) {
     isSelected = _find(selectedValue, v => {
-      // @ts-expect-error TODO: fix after removing migrate prop completely
-      return v === childValue || typeof v === 'object' && v?.value === childValue;
+      return v === childValue;
     }) !== undefined;
   } else {
     isSelected = childValue === selectedValue;
   }
   return isSelected;
 }
-
-// export function getItemValue(props) {
-//   if (_.isArray(props.value)) {
-//     return props.getItemValue ? _.map(props.value, item => props.getItemValue(item)) : _.map(props.value, 'value');
-//   } else if (!_.isObject(props.value)) {
-//     return props.value;
-//   }
-//   return _.invoke(props, 'getItemValue', props.value) || _.get(props.value, 'value');
-// }
-
-export function getItemLabel(label, value, getItemLabel) {
-  if (_isObject(value)) {
-    if (getItemLabel) {
-      return getItemLabel(value);
-    }
-    return _get(value, 'label');
-  }
-  return label;
-}
 export function shouldFilterOut(searchValue, itemLabel) {
   return !_includes(_lowerCase(itemLabel), _lowerCase(searchValue));
 }

package/src/components/picker/api/picker.api.json

@@ -11,7 +11,6 @@
     "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Picker/CustomPicker.gif?raw=true"
   ],
   "props": [
-    {"name": "migrate", "type": "boolean", "description": "Temporary prop required for migration to Picker's new API"},
     {"name": "value", "type": "string | number", "description": "Picker current value"},
     {
       "name": "onChange",

package/src/components/picker/api/pickerItem.api.json

@@ -13,11 +13,6 @@
     {"name": "value", "type": "string | number", "description": "Item's value"},
     {"name": "label", "type": "string", "description": "Item's label"},
     {"name": "labelStyle", "type": "ViewStyle", "description": "Item's label style"},
-    {
-      "name": "getItemLabel",
-      "type": "(value: string | number) => string",
-      "description": "Custom function for the item label"
-    },
     {"name": "isSelected", "type": "boolean", "description": "Is the item selected"},
     {"name": "selectedIcon", "type": "string", "description": "Pass to change the selected icon"},
     {"name": "selectedIconColor", "type": "ImageSource", "description": "Pass to change the selected icon color"},

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/picker/helpers/usePickerLabel.d.ts

@@ -1,5 +1,5 @@
 import { PickerProps, PickerValue } from '../types';
-interface UsePickerLabelProps extends Pick<PickerProps, 'value' | 'getLabel' | 'getItemLabel' | 'placeholder' | 'accessibilityLabel' | 'accessibilityHint'> {
+interface UsePickerLabelProps extends Pick<PickerProps, 'value' | 'getLabel' | 'placeholder' | 'accessibilityLabel' | 'accessibilityHint'> {
     items: {
         value: string | number;
         label: string;

package/src/components/picker/helpers/usePickerLabel.js

@@ -14,15 +14,14 @@ const usePickerLabel = props => {
     value,
     items,
     getLabel,
-    getItemLabel,
     placeholder,
     accessibilityLabel,
     accessibilityHint
   } = props;
   const getLabelsFromArray = useCallback(value => {
     const itemsByValue = _keyBy(items, 'value');
-    return _flow(arr => _map(arr, item => _isPlainObject(item) ? getItemLabel?.(item) || item?.label : itemsByValue[item]?.label), arr => _join(arr, ', '))(value);
-  }, [getItemLabel, items]);
+    return _flow(arr => _map(arr, item => _isPlainObject(item) ? item?.label : itemsByValue[item]?.label), arr => _join(arr, ', '))(value);
+  }, [items]);
   const _getLabel = useCallback(value => {
     if (_isFunction(getLabel) && !_isUndefined(getLabel(value))) {
       return getLabel(value);

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

@@ -1,4 +1,4 @@
 import { PickerProps } from '../types';
-type UsePickerMigrationWarnings = Pick<PickerProps, 'children' | 'migrate' | 'getItemLabel' | 'getItemValue' | 'onShow'>;
+type UsePickerMigrationWarnings = Pick<PickerProps, 'children' | 'onShow'>;
 declare const usePickerMigrationWarnings: (props: UsePickerMigrationWarnings) => void;
 export default usePickerMigrationWarnings;

package/src/components/picker/helpers/usePickerMigrationWarnings.js

@@ -6,24 +6,12 @@ import { LogService } from "../../../services";
 const usePickerMigrationWarnings = props => {
   const {
     children,
-    migrate,
-    getItemLabel,
-    getItemValue,
     onShow
   } = props;
   useEffect(() => {
     if (children) {
       LogService.warn(`UILib Picker will stop supporting the 'children' prop in the next major version, please pass 'items' prop instead`);
     }
-    if (migrate) {
-      LogService.warn(`UILib Picker will stop supporting the 'migrate' prop in the next major version, please stop using it. The picker uses the new implementation by default.`);
-    }
-    if (getItemLabel) {
-      LogService.warn(`UILib Picker will stop supporting the 'getItemLabel' prop in the next major version, please pass the 'getItemLabel' prop to the specific item instead`);
-    }
-    if (getItemValue) {
-      LogService.warn(`UILib Picker will stop supporting the 'getItemValue' prop in the next major version, please stop using it. The value will be extract from 'items' prop instead`);
-    }
     if (onShow) {
       LogService.warn(`UILib Picker will stop supporting the 'onShow' prop in the next major version, please pass the 'onShow' prop from the 'pickerModalProps' instead`);
     }

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { PickerProps } from '../types';
-type UsePickerSearchProps = Pick<PickerProps, 'showSearch' | 'onSearchChange' | 'children' | 'getItemLabel' | 'items'>;
+type UsePickerSearchProps = Pick<PickerProps, 'showSearch' | 'onSearchChange' | 'children' | 'items'>;
 declare const usePickerSearch: (props: UsePickerSearchProps) => {
     setSearchValue: import("react").Dispatch<import("react").SetStateAction<string>>;
     onSearchChange: (searchValue: string) => void;

package/src/components/picker/helpers/usePickerSearch.js

@@ -1,13 +1,12 @@
 import _filter from "lodash/filter";
 import _isEmpty from "lodash/isEmpty";
 import { useCallback, useState, useMemo } from 'react';
-import { getItemLabel as getItemLabelPresenter, shouldFilterOut } from "../PickerPresenter";
+import { shouldFilterOut } from "../PickerPresenter";
 const usePickerSearch = props => {
   const {
     showSearch,
     onSearchChange,
     children,
-    getItemLabel,
     items
   } = props;
   const [searchValue, setSearchValue] = useState('');
@@ -15,16 +14,13 @@ const usePickerSearch = props => {
     if (showSearch && !_isEmpty(searchValue)) {
       return _filter(items, item => {
         const {
-          label,
-          value,
-          getItemLabel: childGetItemLabel
+          label
         } = item.props || item;
-        const itemLabel = getItemLabelPresenter(label, value, childGetItemLabel || getItemLabel);
-        return !shouldFilterOut(searchValue, itemLabel);
+        return !shouldFilterOut(searchValue, label);
       });
     }
     return items;
-  }, [showSearch, searchValue, getItemLabel]);
+  }, [showSearch, searchValue]);
   const filteredItems = useMemo(() => {
     return filterItems(children || items);
   }, [filterItems, items, children]);

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

@@ -1,6 +1,6 @@
 import { RefObject } from 'react';
 import { PickerProps, PickerValue, PickerSingleValue, PickerMultiValue } from '../types';
-interface UsePickerSelectionProps extends Pick<PickerProps, 'migrate' | 'value' | 'onChange' | 'getItemValue' | 'topBarProps' | 'mode' | 'items'> {
+interface UsePickerSelectionProps extends Pick<PickerProps, 'value' | 'onChange' | 'topBarProps' | 'mode' | 'items'> {
     pickerExpandableRef: RefObject<any>;
     setSearchValue: (searchValue: string) => void;
 }