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

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?: "black" | 900 | 600 | "light" | 100 | "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | 200 | 300 | 400 | 500 | 700 | 800 | "ultralight" | "thin" | "medium" | "regular" | "semibold" | "condensedBold" | "condensed" | "heavy" | undefined;
+            fontWeight?: "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | undefined;
             letterSpacing?: number | undefined;
             lineHeight?: number | undefined;
             textAlign?: "auto" | "left" | "right" | "center" | "justify" | undefined;
@@ -36,41 +36,31 @@ 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?: 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;
+            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;
             borderColor?: import("react-native/types").ColorValue | undefined;
             borderCurve?: "circular" | "continuous" | undefined;
             borderEndColor?: import("react-native/types").ColorValue | undefined;
-            borderEndEndRadius?: string | import("react-native/types").AnimatableNumericValue | undefined;
-            borderEndStartRadius?: string | import("react-native/types").AnimatableNumericValue | undefined;
+            borderEndEndRadius?: import("react-native/types").AnimatableNumericValue | undefined;
+            borderEndStartRadius?: import("react-native/types").AnimatableNumericValue | undefined;
             borderLeftColor?: import("react-native/types").ColorValue | undefined;
-            borderRadius?: string | import("react-native/types").AnimatableNumericValue | undefined;
+            borderRadius?: import("react-native/types").AnimatableNumericValue | undefined;
             borderRightColor?: import("react-native/types").ColorValue | undefined;
             borderStartColor?: import("react-native/types").ColorValue | undefined;
-            borderStartEndRadius?: string | import("react-native/types").AnimatableNumericValue | undefined;
-            borderStartStartRadius?: string | import("react-native/types").AnimatableNumericValue | undefined;
+            borderStartEndRadius?: import("react-native/types").AnimatableNumericValue | undefined;
+            borderStartStartRadius?: import("react-native/types").AnimatableNumericValue | undefined;
             borderStyle?: "solid" | "dotted" | "dashed" | undefined;
             borderTopColor?: import("react-native/types").ColorValue | 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;
+            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;
             opacity?: import("react-native/types").AnimatableNumericValue | undefined;
             elevation?: number | undefined;
             pointerEvents?: "auto" | "none" | "box-none" | "box-only" | 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;
+            alignContent?: "center" | "flex-start" | "flex-end" | "stretch" | "space-between" | "space-around" | undefined;
             alignItems?: import("react-native/types").FlexAlignType | undefined;
             alignSelf?: "auto" | import("react-native/types").FlexAlignType | undefined;
             aspectRatio?: string | number | undefined;
@@ -82,15 +72,14 @@ declare const useFieldType: (props: UseFieldTypeProps) => {
             borderTopWidth?: number | undefined;
             borderWidth?: number | undefined;
             bottom?: import("react-native/types").DimensionValue | undefined;
-            boxSizing?: "border-box" | "content-box" | undefined;
-            display?: "none" | "flex" | "contents" | undefined;
+            display?: "none" | "flex" | 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?: string | number | undefined;
-            gap?: string | number | undefined;
-            columnGap?: string | number | undefined;
+            rowGap?: number | undefined;
+            gap?: number | undefined;
+            columnGap?: number | undefined;
             flexGrow?: number | undefined;
             flexShrink?: number | undefined;
             flexWrap?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
@@ -120,32 +109,13 @@ 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" | "static" | undefined;
+            position?: "absolute" | "relative" | 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;
@@ -153,7 +123,7 @@ declare const useFieldType: (props: UseFieldTypeProps) => {
             }> | undefined;
             shadowOpacity?: import("react-native/types").AnimatableNumericValue | undefined;
             shadowRadius?: number | undefined;
-            transform?: string | readonly (({
+            transform?: string | (({
                 perspective: import("react-native/types").AnimatableNumericValue;
             } & {
                 rotate?: undefined;
@@ -274,7 +244,7 @@ declare const useFieldType: (props: UseFieldTypeProps) => {
                 skewY?: undefined;
                 matrix?: undefined;
             }) | ({
-                translateX: import("react-native/types").AnimatableNumericValue | `${number}%`;
+                translateX: import("react-native/types").AnimatableNumericValue;
             } & {
                 perspective?: undefined;
                 rotate?: undefined;
@@ -289,7 +259,7 @@ declare const useFieldType: (props: UseFieldTypeProps) => {
                 skewY?: undefined;
                 matrix?: undefined;
             }) | ({
-                translateY: import("react-native/types").AnimatableNumericValue | `${number}%`;
+                translateY: import("react-native/types").AnimatableNumericValue;
             } & {
                 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' | 'placeholder' | 'accessibilityLabel' | 'accessibilityHint'> {
+interface UsePickerLabelProps extends Pick<PickerProps, 'value' | 'getLabel' | 'getItemLabel' | 'placeholder' | 'accessibilityLabel' | 'accessibilityHint'> {
     items: {
         value: string | number;
         label: string;

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

@@ -14,14 +14,15 @@ 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) ? item?.label : itemsByValue[item]?.label), arr => _join(arr, ', '))(value);
-  }, [items]);
+    return _flow(arr => _map(arr, item => _isPlainObject(item) ? getItemLabel?.(item) || item?.label : itemsByValue[item]?.label), arr => _join(arr, ', '))(value);
+  }, [getItemLabel, 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' | 'onShow'>;
+type UsePickerMigrationWarnings = Pick<PickerProps, 'children' | 'migrate' | 'getItemLabel' | 'getItemValue' | 'onShow'>;
 declare const usePickerMigrationWarnings: (props: UsePickerMigrationWarnings) => void;
 export default usePickerMigrationWarnings;

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

@@ -6,12 +6,24 @@ 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' | 'items'>;
+type UsePickerSearchProps = Pick<PickerProps, 'showSearch' | 'onSearchChange' | 'children' | 'getItemLabel' | '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,12 +1,13 @@
 import _filter from "lodash/filter";
 import _isEmpty from "lodash/isEmpty";
 import { useCallback, useState, useMemo } from 'react';
-import { shouldFilterOut } from "../PickerPresenter";
+import { getItemLabel as getItemLabelPresenter, shouldFilterOut } from "../PickerPresenter";
 const usePickerSearch = props => {
   const {
     showSearch,
     onSearchChange,
     children,
+    getItemLabel,
     items
   } = props;
   const [searchValue, setSearchValue] = useState('');
@@ -14,13 +15,16 @@ const usePickerSearch = props => {
     if (showSearch && !_isEmpty(searchValue)) {
       return _filter(items, item => {
         const {
-          label
+          label,
+          value,
+          getItemLabel: childGetItemLabel
         } = item.props || item;
-        return !shouldFilterOut(searchValue, label);
+        const itemLabel = getItemLabelPresenter(label, value, childGetItemLabel || getItemLabel);
+        return !shouldFilterOut(searchValue, itemLabel);
       });
     }
     return items;
-  }, [showSearch, searchValue]);
+  }, [showSearch, searchValue, getItemLabel]);
   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, 'value' | 'onChange' | 'topBarProps' | 'mode' | 'items'> {
+interface UsePickerSelectionProps extends Pick<PickerProps, 'migrate' | 'value' | 'onChange' | 'getItemValue' | 'topBarProps' | 'mode' | 'items'> {
     pickerExpandableRef: RefObject<any>;
     setSearchValue: (searchValue: string) => void;
 }

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

@@ -1,12 +1,15 @@
 import _xor from "lodash/xor";
+import _xorBy from "lodash/xorBy";
 import { useCallback, useState, useEffect, useMemo } from 'react';
 import { PickerModes } from "../types";
 const usePickerSelection = props => {
   const {
+    migrate,
     value,
     onChange,
     topBarProps,
     pickerExpandableRef,
+    getItemValue,
     setSearchValue,
     mode,
     items
@@ -26,10 +29,15 @@ const usePickerSelection = props => {
     onChange?.(item);
   }, [onChange]);
   const toggleItemSelection = useCallback(item => {
+    let newValue;
     const itemAsArray = [item];
-    const newValue = _xor(multiDraftValue, itemAsArray);
+    if (!migrate) {
+      newValue = _xorBy(multiDraftValue, itemAsArray, getItemValue || 'value');
+    } else {
+      newValue = _xor(multiDraftValue, itemAsArray);
+    }
     setMultiDraftValue(newValue);
-  }, [multiDraftValue]);
+  }, [multiDraftValue, getItemValue]);
   const cancelSelect = useCallback(() => {
     setSearchValue('');
     setMultiDraftValue(multiFinalValue);

package/src/components/picker/index.js

@@ -1,4 +1,5 @@
-import _map from "lodash/map"; // TODO: deprecate all places where we check if _.isPlainObject
+import _map from "lodash/map";
+import _isArray from "lodash/isArray"; // TODO: deprecate all places where we check if _.isPlainObject
 // TODO: Add initialValue prop
 // TODO: consider deprecating renderCustomModal prop
 import React, { useMemo, useState, useRef, useCallback, useEffect } from 'react';
@@ -44,9 +45,13 @@ const Picker = React.forwardRef((props, ref) => {
     listProps,
     value,
     getLabel,
+    getItemLabel,
+    getItemValue,
     renderItem,
     children,
     useSafeArea,
+    // TODO: Remove migrate props and migrate code
+    migrate = true,
     accessibilityLabel,
     accessibilityHint,
     items: propItems,
@@ -73,6 +78,10 @@ const Picker = React.forwardRef((props, ref) => {
   const [items, setItems] = useState(propItems || extractPickerItems(themeProps));
   const pickerExpandable = useRef(null);
   const pickerRef = useImperativePickerHandle(ref, pickerExpandable);
+
+  // TODO: Remove this when migration is completed, starting of v8
+  // usePickerMigrationWarnings({children, migrate, getItemLabel, getItemValue});
+
   useEffect(() => {
     if (propItems) {
       setItems(propItems);
@@ -85,6 +94,7 @@ const Picker = React.forwardRef((props, ref) => {
   } = usePickerSearch({
     showSearch,
     onSearchChange,
+    getItemLabel,
     children,
     items
   });
@@ -97,9 +107,11 @@ const Picker = React.forwardRef((props, ref) => {
     selectedCount,
     toggleAllItemsSelection
   } = usePickerSelection({
+    migrate,
     value,
     onChange,
     pickerExpandableRef: pickerExpandable,
+    getItemValue,
     topBarProps,
     setSearchValue,
     mode,
@@ -120,6 +132,7 @@ const Picker = React.forwardRef((props, ref) => {
   } = usePickerLabel({
     value,
     items,
+    getItemLabel,
     getLabel,
     accessibilityLabel,
     accessibilityHint,
@@ -144,10 +157,15 @@ const Picker = React.forwardRef((props, ref) => {
     setSelectedItemPosition(y);
   }, []);
   const contextValue = useMemo(() => {
+    // @ts-expect-error cleanup after removing migrate prop
+    const pickerValue = !migrate && typeof value === 'object' && !_isArray(value) ? value?.value : value;
     return {
-      value: mode === PickerModes.MULTI ? multiDraftValue : value,
+      migrate,
+      value: mode === PickerModes.MULTI ? multiDraftValue : pickerValue,
       onPress: mode === PickerModes.MULTI ? toggleItemSelection : onDoneSelecting,
       isMultiMode: mode === PickerModes.MULTI,
+      getItemValue,
+      getItemLabel,
       onSelectedLayout: onSelectedItemLayout,
       renderItem,
       selectionLimit,
@@ -155,7 +173,7 @@ const Picker = React.forwardRef((props, ref) => {
       selectedCount,
       toggleAllItemsSelection
     };
-  }, [mode, value, multiDraftValue, renderItem, selectionLimit, onSelectedItemLayout, toggleItemSelection, onDoneSelecting, areAllItemsSelected, selectedCount, toggleAllItemsSelection]);
+  }, [migrate, mode, value, multiDraftValue, renderItem, getItemValue, getItemLabel, selectionLimit, onSelectedItemLayout, toggleItemSelection, onDoneSelecting, areAllItemsSelected, selectedCount, toggleAllItemsSelection]);
   const renderPickerItem = useCallback((item, index) => {
     return <PickerItem key={`${index}-${item.value}`} {...item} />;
   }, []);
@@ -205,7 +223,7 @@ const Picker = React.forwardRef((props, ref) => {
       </PickerItemsList>;
   }, [testID, mode, useDialog, selectedItemPosition, topBarProps, cancelSelect, onDoneSelecting, multiDraftValue, showSearch, searchStyle, searchPlaceholder, _onSearchChange, renderCustomSearch, renderHeader, listProps, accessibleFilteredItems, useSafeArea, useWheelPicker, items, showLoader]);
   return <PickerContext.Provider value={contextValue}>
-      {<ExpandableOverlay ref={pickerExpandable} useDialog={useDialog || useWheelPicker} dialogProps={DEFAULT_DIALOG_PROPS} expandableContent={expandableModalContent} renderCustomOverlay={renderOverlay ? _renderOverlay : undefined} onPress={onPress} testID={testID} {...customPickerProps} disabled={themeProps.editable === false}>
+      {<ExpandableOverlay ref={pickerExpandable} useDialog={useDialog || useWheelPicker} dialogProps={DEFAULT_DIALOG_PROPS} migrateDialog expandableContent={expandableModalContent} renderCustomOverlay={renderOverlay ? _renderOverlay : undefined} onPress={onPress} testID={testID} {...customPickerProps} disabled={themeProps.editable === false}>
           {renderTextField()}
         </ExpandableOverlay>}
     </PickerContext.Provider>;

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

@@ -36,6 +36,21 @@ export interface PickerSearchStyle {
     selectionColor?: string;
 }
 type PickerPropsDeprecation = {
+    /**
+     * @deprecated
+     * Temporary prop required for migration to Picker's new API
+     */
+    migrate?: boolean;
+    /**
+     * @deprecated
+     * A function that extract the unique value out of the value prop in case value has a custom structure (e.g. {myValue, myLabel})
+     */
+    getItemValue?: (value: PickerValue) => any;
+    /**
+     * @deprecated
+     * A function that extract the label out of the value prop in case value has a custom structure (e.g. {myValue, myLabel})
+     */
+    getItemLabel?: (value: PickerValue) => string;
     /**
      * @deprecated
      * Callback for modal onShow event
@@ -275,6 +290,14 @@ export interface PickerItemProps extends Pick<TouchableOpacityProps, 'customValu
      * Item's label style
      */
     labelStyle?: StyleProp<TextStyle>;
+    /**
+     * Custom function for the item label (e.g (value) => customLabel)
+     */
+    getItemLabel?: (value: PickerValue) => string;
+    /**
+     * @deprecated Function to return the value out of the item value prop when value is custom shaped.
+     */
+    getItemValue?: PickerProps['getItemValue'];
     /**
      * Render custom item
      */
@@ -302,7 +325,7 @@ export interface PickerItemProps extends Pick<TouchableOpacityProps, 'customValu
      */
     testID?: string;
 }
-export interface PickerContextProps extends Pick<PickerProps, 'value' | 'renderItem' | 'selectionLimit'> {
+export interface PickerContextProps extends Pick<PickerProps, 'migrate' | 'value' | 'getItemValue' | 'getItemLabel' | 'renderItem' | 'selectionLimit'> {
     onPress: (value: PickerSingleValue) => void;
     isMultiMode: boolean;
     onSelectedLayout: (event: any) => any;

package/src/components/segmentedControl/index.js

@@ -20,7 +20,7 @@ export let SegmentedControlPreset = /*#__PURE__*/function (SegmentedControlPrese
   return SegmentedControlPreset;
 }({});
 export { SegmentedControlItemProps };
-const noneAreUndefined = array => {
+const nonAreUndefined = array => {
   'worklet';
 
   for (const item of array) {
@@ -99,7 +99,7 @@ const SegmentedControl = props => {
       x,
       width
     };
-    if (segmentsDimensions.current.length === segments.length && noneAreUndefined(segmentsDimensions.current)) {
+    if (segmentsDimensions.current.length === segments.length && nonAreUndefined(segmentsDimensions.current)) {
       segmentsStyle.value = [...segmentsDimensions.current];
       // shouldResetOnDimensionsOnNextLayout.current = true;// in case onLayout will be called again (orientation change etc.)
     }
@@ -122,7 +122,7 @@ const SegmentedControl = props => {
     const {
       value: height
     } = containerHeight;
-    if (height !== 0 && value.length === segments.length && noneAreUndefined(value)) {
+    if (height !== 0 && value.length === segments.length && nonAreUndefined(value)) {
       const isFirstElementSelected = animatedSelectedIndex.value === 0;
       const isLastElementSelected = animatedSelectedIndex.value === value.length - 1;
       const isMiddleSelected = !isFirstElementSelected && !isLastElementSelected;

package/src/components/sharedTransition/ShareTransitionContext.js

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export default React.createContext({});

package/src/components/sharedTransition/SharedArea.js

@@ -0,0 +1,153 @@
+import React, {Component} from 'react';
+import {StyleSheet} from 'react-native';
+import Animated, {Easing as _Easing, EasingNode} from 'react-native-reanimated';
+import PropTypes from 'prop-types';
+import _ from 'lodash';
+import TouchableOpacity from '../touchableOpacity';
+import {Colors} from '../../style';
+import ShareTransitionContext from './ShareTransitionContext';
+
+const {interpolate: _interpolate, interpolateNode} = Animated;
+const Easing = EasingNode || _Easing;
+const interpolate = interpolateNode || _interpolate;
+
+// TODO: 2.17 breaks Android (at list the screen, the image is not shown) - move to incubator?
+class SharedArea extends Component {
+  displayName = 'IGNORE';
+  static propTypes = {
+    /**
+     * render details screen
+     */
+    renderDetails: PropTypes.elementType
+  };
+
+  static defaultProps = {
+    renderDetails: _.noop
+  };
+
+  state = {};
+  transition = new Animated.Value(0);
+
+  getProviderContextValue() {
+    const {showDetails} = this.state;
+    return {
+      setSharedData: this.setSharedData,
+      setSource: this.setSource,
+      setTarget: this.setTarget,
+      showDetails
+    };
+  }
+
+  getOverlayStyle() {
+    return {
+      ...StyleSheet.absoluteFillObject,
+      backgroundColor: Colors.white,
+      opacity: interpolate(this.transition, {inputRange: [0, 1], outputRange: [0, 1]})
+    };
+  }
+
+  getDetailsStyle() {
+    return {
+      ...StyleSheet.absoluteFillObject,
+      opacity: interpolate(this.transition, {inputRange: [90, 100], outputRange: [0, 1]})
+    };
+  }
+
+  getElementStyle() {
+    const {sourceLayout, targetLayout} = this.state;
+    if (sourceLayout && this.transition) {
+      return {
+        position: 'absolute',
+        width: interpolate(this.transition, {
+          inputRange: [0, 100],
+          outputRange: [sourceLayout.width, targetLayout.width]
+        }),
+        height: interpolate(this.transition, {
+          inputRange: [0, 100],
+          outputRange: [sourceLayout.height, targetLayout.height]
+        }),
+        top: interpolate(this.transition, {
+          inputRange: [0, 100],
+          outputRange: [sourceLayout.y, targetLayout.y]
+        }),
+        left: interpolate(this.transition, {
+          inputRange: [0, 100],
+          outputRange: [sourceLayout.x, targetLayout.x]
+        })
+      };
+    }
+  }
+
+  setSharedData = data => {
+    this.setState({
+      data
+    });
+  };
+
+  setSource = (sourceLayout, element) => {
+    this.setState({
+      sourceLayout,
+      element,
+      showDetails: true
+    },
+    () => {
+      this.startTransition(true);
+    });
+  };
+
+  setTarget = targetLayout => {
+    this.setState({
+      targetLayout
+    });
+  };
+
+  clearSource = () => {
+    this.startTransition(false, () => {
+      this.setState({
+        showDetails: false,
+        data: undefined,
+        sourceLayout: undefined,
+        element: undefined
+      });
+    });
+  };
+
+  startTransition(show, onAnimationEnd) {
+    Animated.timing(this.transition, {
+      toValue: show ? 100 : 0,
+      duration: 600,
+      easing: Easing.bezier(0.19, 1, 0.22, 1),
+      useNativeDriver: false
+    }).start(onAnimationEnd);
+  }
+
+  renderDetailsOverlay() {
+    const {renderDetails} = this.props;
+    const {data, element} = this.state;
+
+    return (
+      <Animated.View pointerEvents={data ? 'auto' : 'none'} style={this.getOverlayStyle()}>
+        <Animated.View pointerEvents="box-none" style={this.getDetailsStyle()}>
+          {renderDetails(data)}
+        </Animated.View>
+
+        <Animated.View style={this.getElementStyle()}>
+          <TouchableOpacity activeOpacity={1} onPress={this.clearSource} /* _style={[style]} */ style={{flex: 1}}>
+            {element}
+          </TouchableOpacity>
+        </Animated.View>
+      </Animated.View>
+    );
+  }
+
+  render() {
+    return (
+      <ShareTransitionContext.Provider value={this.getProviderContextValue()}>
+        {this.props.children}
+        {this.renderDetailsOverlay()}
+      </ShareTransitionContext.Provider>
+    );
+  }
+}
+
+export default SharedArea;