@mpxjs/webpack-plugin 2.9.66 → 2.9.69

package/lib/runtime/components/react/dist/mpx-scroll-view.jsx

@@ -5,7 +5,7 @@
  * ✔ lower-threshold
  * ✔ scroll-top
  * ✔ scroll-left
- * ✘ scroll-into-view
+ * ✔ scroll-into-view
  * ✔ scroll-with-animation
  * ✔ enable-back-to-top
  * ✘ enable-passive
@@ -38,11 +38,13 @@ import { useAnimatedRef } from 'react-native-reanimated';
 import { warn } from '@mpxjs/utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
-import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren } from './utils';
+import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, flatGesture } from './utils';
 import { IntersectionObserverContext } from './context';
 const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(scrollViewProps);
-    const { enhanced = false, bounces = true, style = {}, 'scroll-x': scrollX = false, 'scroll-y': scrollY = false, 'enable-back-to-top': enableBackToTop = false, 'enable-trigger-intersection-observer': enableTriggerIntersectionObserver = false, 'paging-enabled': pagingEnabled = false, 'upper-threshold': upperThreshold = 50, 'lower-threshold': lowerThreshold = 50, 'scroll-with-animation': scrollWithAnimation, 'refresher-enabled': refresherEnabled, 'refresher-default-style': refresherDefaultStyle, 'refresher-background': refresherBackground, 'show-scrollbar': showScrollbar = true, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const { enhanced = false, bounces = true, style = {}, binddragstart, binddragging, binddragend, bindtouchstart, bindtouchmove, bindtouchend, 'scroll-x': scrollX = false, 'scroll-y': scrollY = false, 'enable-back-to-top': enableBackToTop = false, 'enable-trigger-intersection-observer': enableTriggerIntersectionObserver = false, 'paging-enabled': pagingEnabled = false, 'upper-threshold': upperThreshold = 50, 'lower-threshold': lowerThreshold = 50, 'scroll-with-animation': scrollWithAnimation, 'refresher-enabled': refresherEnabled, 'refresher-default-style': refresherDefaultStyle, 'refresher-background': refresherBackground, 'show-scrollbar': showScrollbar = true, 'scroll-into-view': scrollIntoView = '', 'scroll-top': scrollTop = 0, 'scroll-left': scrollLeft = 0, 'refresher-triggered': refresherTriggered, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'simultaneous-handlers': originSimultaneousHandlers, 'wait-for': waitFor, __selectRef } = props;
+    const simultaneousHandlers = flatGesture(originSimultaneousHandlers);
+    const waitForHandlers = flatGesture(waitFor);
     const [refreshing, setRefreshing] = useState(true);
     const snapScrollTop = useRef(0);
     const snapScrollLeft = useRef(0);
@@ -58,6 +60,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
     const hasCallScrollToLower = useRef(false);
     const initialTimeout = useRef(null);
     const intersectionObservers = useContext(IntersectionObserverContext);
+    const snapScrollIntoView = useRef('');
     const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
     const { textStyle, innerStyle } = splitStyle(normalStyle);
     const scrollViewRef = useAnimatedRef();
@@ -71,30 +74,42 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
             fastDeceleration: false,
             decelerationDisabled: false,
             scrollTo: scrollToOffset
-        }
+        },
+        gestureRef: scrollViewRef
     });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout });
     if (scrollX && scrollY) {
         warn('scroll-x and scroll-y cannot be set to true at the same time, Mpx will use the value of scroll-y as the criterion');
     }
     useEffect(() => {
-        if (snapScrollTop.current !== props['scroll-top'] ||
-            snapScrollLeft.current !== props['scroll-left']) {
-            snapScrollTop.current = props['scroll-top'] || 0;
-            snapScrollLeft.current = props['scroll-left'] || 0;
+        if (snapScrollTop.current !== scrollTop || snapScrollLeft.current !== scrollLeft) {
             initialTimeout.current = setTimeout(() => {
-                scrollToOffset(snapScrollLeft.current, snapScrollTop.current);
+                scrollToOffset(scrollLeft, scrollTop);
             }, 0);
             return () => {
                 initialTimeout.current && clearTimeout(initialTimeout.current);
             };
         }
-    }, [props['scroll-top'], props['scroll-left']]);
+    }, [scrollTop, scrollLeft]);
+    useEffect(() => {
+        if (refreshing !== refresherTriggered) {
+            setRefreshing(!!refresherTriggered);
+        }
+    }, [refresherTriggered]);
     useEffect(() => {
-        if (refreshing !== props['refresher-triggered']) {
-            setRefreshing(!!props['refresher-triggered']);
+        if (scrollIntoView && __selectRef && snapScrollIntoView.current !== scrollIntoView) {
+            snapScrollIntoView.current = scrollIntoView || '';
+            setTimeout(() => {
+                const refs = __selectRef(`#${scrollIntoView}`, 'node');
+                if (refs) {
+                    const { nodeRef } = refs.getNodeInstance();
+                    nodeRef.current?.measureLayout(scrollViewRef.current, (left, top) => {
+                        scrollToOffset(left, top);
+                    });
+                }
+            });
         }
-    }, [props['refresher-triggered']]);
+    }, [scrollIntoView]);
     function selectLength(size) {
         return !scrollX ? size.height : size.width;
     }
@@ -204,6 +219,8 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
             scrollViewRef.current.scrollTo({ x, y, animated: !!scrollWithAnimation });
             scrollOptions.current.scrollLeft = x;
             scrollOptions.current.scrollTop = y;
+            snapScrollLeft.current = x;
+            snapScrollTop.current = y;
         }
     }
     function onRefresh() {
@@ -212,7 +229,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
             bindrefresherrefresh(getCustomEvent('refresherrefresh', {}, { layoutRef }, props));
     }
     function onScrollTouchStart(e) {
-        const { binddragstart, bindtouchstart, enhanced } = props;
+        const { bindtouchstart } = props;
         bindtouchstart && bindtouchstart(e);
         if (enhanced) {
             binddragstart &&
@@ -226,7 +243,6 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         }
     }
     function onScrollTouchMove(e) {
-        const { binddragging, bindtouchmove, enhanced } = props;
         bindtouchmove && bindtouchmove(e);
         if (enhanced) {
             binddragging &&
@@ -239,24 +255,23 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
                 }, props));
         }
     }
-    function onScrollEndDrag(e) {
-        const { binddragend, enhanced } = props;
+    function onScrollTouchEnd(e) {
+        bindtouchend && bindtouchend(e);
         if (enhanced) {
-            const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset;
-            const { width: scrollWidth, height: scrollHeight } = e.nativeEvent.contentSize;
             binddragend &&
                 binddragend(getCustomEvent('dragend', e, {
                     detail: {
-                        scrollLeft: scrollLeft,
-                        scrollTop: scrollTop,
-                        scrollHeight,
-                        scrollWidth
+                        scrollLeft: scrollOptions.current.scrollLeft || 0,
+                        scrollTop: scrollOptions.current.scrollTop || 0
                     },
                     layoutRef
                 }, props));
-            updateScrollOptions(e, { scrollLeft, scrollTop });
         }
     }
+    function onScrollDrag(e) {
+        const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset;
+        updateScrollOptions(e, { scrollLeft, scrollTop });
+    }
     let scrollAdditionalProps = {
         style: { ...innerStyle, ...layoutStyle },
         pinchGestureEnabled: false,
@@ -269,11 +284,15 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         ref: scrollViewRef,
         onScroll: onScroll,
         onContentSizeChange: onContentSizeChange,
-        bindtouchstart: onScrollTouchStart,
-        bindtouchmove: onScrollTouchMove,
-        onScrollEndDrag,
+        bindtouchstart: ((enhanced && binddragstart) || bindtouchstart) ? onScrollTouchStart : undefined,
+        bindtouchmove: ((enhanced && binddragging) || bindtouchend) ? onScrollTouchMove : undefined,
+        bindtouchend: ((enhanced && binddragend) || bindtouchend) ? onScrollTouchEnd : undefined,
+        onScrollBeginDrag: onScrollDrag,
+        onScrollEndDrag: onScrollDrag,
         onMomentumScrollEnd: onScrollEnd,
-        ...layoutProps
+        ...layoutProps,
+        ...(simultaneousHandlers ? { simultaneousHandlers } : {}),
+        ...(waitForHandlers ? { waitFor: waitForHandlers } : {})
     };
     if (enhanced) {
         scrollAdditionalProps = {
@@ -283,6 +302,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         };
     }
     const innerProps = useInnerProps(props, scrollAdditionalProps, [
+        'id',
         'scroll-x',
         'scroll-y',
         'enable-back-to-top',
@@ -323,5 +343,5 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
         })}
     </ScrollView>);
 });
-_ScrollView.displayName = 'mpx-scroll-view';
+_ScrollView.displayName = 'MpxScrollView';
 export default _ScrollView;

package/lib/runtime/components/react/dist/mpx-swiper/carouse.jsx

@@ -474,5 +474,5 @@ const _Carouse = forwardRef((props, ref) => {
       {props.showsPagination && renderPagination()}
   </View>);
 });
-_Carouse.displayName = '_Carouse';
+_Carouse.displayName = 'MpxCarouse';
 export default _Carouse;

package/lib/runtime/components/react/dist/mpx-swiper/index.jsx

@@ -64,5 +64,5 @@ const _SwiperWrapper = forwardRef((props, ref) => {
     {children}
   </Carouse>;
 });
-_SwiperWrapper.displayName = 'mpx-swiper';
+_SwiperWrapper.displayName = 'MpxSwiper';
 export default _SwiperWrapper;

package/lib/runtime/components/react/dist/mpx-swiper-item.jsx

@@ -30,5 +30,5 @@ const _SwiperItem = forwardRef((props, ref) => {
         })}
     </View>);
 });
-_SwiperItem.displayName = 'mpx-swiper-item';
+_SwiperItem.displayName = 'MpxSwiperItem';
 export default _SwiperItem;

package/lib/runtime/components/react/dist/mpx-switch.jsx

@@ -58,6 +58,13 @@ const _Switch = forwardRef((props, ref) => {
             formValuesMap.set(props.name, { getValue, resetValue });
         }
     }
+    useEffect(() => {
+        return () => {
+            if (formValuesMap && props.name) {
+                formValuesMap.delete(props.name);
+            }
+        };
+    }, []);
     const innerProps = useInnerProps(props, {
         ref: nodeRef,
         style: { ...normalStyle, ...layoutStyle },
@@ -76,5 +83,5 @@ const _Switch = forwardRef((props, ref) => {
     }
     return <Switch {...innerProps} style={normalStyle} value={isChecked} trackColor={{ false: '#FFF', true: color }} thumbColor={isChecked ? '#FFF' : '#f4f3f4'} ios_backgroundColor="#FFF"/>;
 });
-_Switch.displayName = 'mpx-switch';
+_Switch.displayName = 'MpxSwitch';
 export default _Switch;

package/lib/runtime/components/react/dist/mpx-text.jsx

@@ -36,5 +36,5 @@ const _Text = forwardRef((props, ref) => {
         })}
     </Text>);
 });
-_Text.displayName = 'mpx-text';
+_Text.displayName = 'MpxText';
 export default _Text;

package/lib/runtime/components/react/dist/mpx-textarea.jsx

@@ -23,5 +23,5 @@ const Textarea = forwardRef((props, ref) => {
     ]);
     return (<Input ref={ref} multiline confirm-type='next' bindblur={() => Keyboard.dismiss()} {...restProps}/>);
 });
-Textarea.displayName = 'mpx-textarea';
+Textarea.displayName = 'MpxTextarea';
 export default Textarea;

package/lib/runtime/components/react/dist/mpx-view.jsx

@@ -10,7 +10,7 @@ import useInnerProps from './getInnerListeners';
 import Animated from 'react-native-reanimated';
 import useAnimationHooks from './useAnimationHooks';
 import useNodesRef from './useNodesRef';
-import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout } from './utils';
+import { parseUrl, PERCENT_REGEX, splitStyle, splitProps, useTransformStyle, wrapChildren, useLayout, renderImage, pickStyle } from './utils';
 import LinearGradient from 'react-native-linear-gradient';
 const linearMap = new Map([
     ['top', 0],
@@ -201,7 +201,7 @@ function backgroundSize(imageProps, preImageInfo, imageSize, layoutInfo) {
         }
         else { // 数值类型      ImageStyle
             // 数值类型设置为 stretch
-            imageProps.style.resizeMode = 'stretch';
+            imageProps.resizeMode = 'stretch';
             dimensions = {
                 width: isPercent(width) ? width : +width,
                 height: isPercent(height) ? height : +height
@@ -216,8 +216,9 @@ function backgroundSize(imageProps, preImageInfo, imageSize, layoutInfo) {
 }
 // background-image转换为source
 function backgroundImage(imageProps, preImageInfo) {
-    if (preImageInfo.src) {
-        imageProps.src = preImageInfo.src;
+    const src = preImageInfo.src;
+    if (src) {
+        imageProps.source = { uri: src };
     }
 }
 // 渐变的转换
@@ -241,8 +242,8 @@ function linearGradient(imageProps, preImageInfo, imageSize, layoutInfo) {
 const imageStyleToProps = (preImageInfo, imageSize, layoutInfo) => {
     // 初始化
     const imageProps = {
+        resizeMode: 'cover',
         style: {
-            resizeMode: 'cover',
             position: 'absolute'
             // ...StyleSheet.absoluteFillObject
         },
@@ -430,7 +431,23 @@ function preParseImage(imageStyle) {
 function isDiagonalAngle(linearInfo) {
     return !!(linearInfo?.direction && diagonalAngleMap[linearInfo.direction]);
 }
-function wrapImage(imageStyle) {
+function inheritStyle(innerStyle = {}) {
+    const { borderWidth, borderRadius } = innerStyle;
+    const borderStyles = ['borderRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomRightRadius', 'borderBottomLeftRadius'];
+    return pickStyle(innerStyle, borderStyles, borderWidth && borderRadius
+        ? (key, val) => {
+            // 盒子内圆角borderWith与borderRadius的关系
+            // 当borderRadius 小于 当borderWith 内边框为直角
+            // 当borderRadius 大于等于 当borderWith 内边框为圆角
+            if (borderStyles.includes(key)) {
+                const borderVal = +val - borderWidth;
+                return borderVal > 0 ? borderVal : 0;
+            }
+            return val;
+        }
+        : undefined);
+}
+function wrapImage(imageStyle, innerStyle, enableFastImage) {
     // 预处理数据
     const preImageInfo = preParseImage(imageStyle);
     // 预解析
@@ -510,12 +527,12 @@ function wrapImage(imageStyle) {
             setShow(true);
         }
     };
-    return <View key='backgroundImage' {...needLayout ? { onLayout } : null} style={{ ...StyleSheet.absoluteFillObject, overflow: 'hidden' }}>
+    return <View key='backgroundImage' {...needLayout ? { onLayout } : null} style={{ ...inheritStyle(innerStyle), ...StyleSheet.absoluteFillObject, overflow: 'hidden' }}>
     {show && type === 'linear' && <LinearGradient useAngle={true} {...imageStyleToProps(preImageInfo, sizeInfo.current, layoutInfo.current)}/>}
-    {show && type === 'image' && <Image {...imageStyleToProps(preImageInfo, sizeInfo.current, layoutInfo.current)}/>}
+    {show && type === 'image' && (renderImage(imageStyleToProps(preImageInfo, sizeInfo.current, layoutInfo.current), enableFastImage))}
   </View>;
 }
-function wrapWithChildren(props, { hasVarDec, enableBackground, textStyle, backgroundStyle, varContext, textProps }) {
+function wrapWithChildren(props, { hasVarDec, enableBackground, textStyle, backgroundStyle, varContext, textProps, innerStyle, enableFastImage }) {
     const children = wrapChildren(props, {
         hasVarDec,
         varContext,
@@ -523,13 +540,13 @@ function wrapWithChildren(props, { hasVarDec, enableBackground, textStyle, backg
         textProps
     });
     return [
-        enableBackground ? wrapImage(backgroundStyle) : null,
+        enableBackground ? wrapImage(backgroundStyle, innerStyle, enableFastImage) : null,
         children
     ];
 }
 const _View = forwardRef((viewProps, ref) => {
     const { textProps, innerProps: props = {} } = splitProps(viewProps);
-    let { style = {}, 'hover-style': hoverStyle, 'hover-start-time': hoverStartTime = 50, 'hover-stay-time': hoverStayTime = 400, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'enable-background': enableBackground, 'enable-animation': enableAnimation, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, animation } = props;
+    let { style = {}, 'hover-style': hoverStyle, 'hover-start-time': hoverStartTime = 50, 'hover-stay-time': hoverStayTime = 400, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'enable-background': enableBackground, 'enable-fast-image': enableFastImage, 'enable-animation': enableAnimation, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, animation } = props;
     const [isHover, setIsHover] = useState(false);
     // 默认样式
     const defaultStyle = {
@@ -595,9 +612,20 @@ const _View = forwardRef((viewProps, ref) => {
     }
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
     const viewStyle = Object.assign({}, innerStyle, layoutStyle);
+    enableAnimation = enableAnimation || !!animation;
+    const enableAnimationRef = useRef(enableAnimation);
+    if (enableAnimationRef.current !== enableAnimation) {
+        throw new Error('[Mpx runtime error]: animation use should be stable in the component lifecycle, or you can set [enable-animation] with true.');
+    }
+    const finalStyle = enableAnimation
+        ? useAnimationHooks({
+            animation,
+            style: viewStyle
+        })
+        : viewStyle;
     const innerProps = useInnerProps(props, {
         ref: nodeRef,
-        style: viewStyle,
+        style: finalStyle,
         ...layoutProps,
         ...(hoverStyle && {
             bindtouchstart: onTouchStart,
@@ -611,32 +639,23 @@ const _View = forwardRef((viewProps, ref) => {
     ], {
         layoutRef
     });
-    enableAnimation = enableAnimation || !!animation;
-    const enableAnimationRef = useRef(enableAnimation);
-    if (enableAnimationRef.current !== enableAnimation) {
-        throw new Error('[Mpx runtime error]: animation use should be stable in the component lifecycle, or you can set [enable-animation] with true.');
-    }
-    const finalStyle = enableAnimation
-        ? useAnimationHooks({
-            animation,
-            style: viewStyle
-        })
-        : viewStyle;
     const childNode = wrapWithChildren(props, {
         hasVarDec,
         enableBackground: enableBackgroundRef.current,
         textStyle,
         backgroundStyle,
         varContext: varContextRef.current,
-        textProps
+        textProps,
+        innerStyle,
+        enableFastImage
     });
-    return animation?.actions?.length
-        ? (<Animated.View {...innerProps} style={finalStyle}>
+    return enableAnimation
+        ? (<Animated.View {...innerProps}>
       {childNode}
     </Animated.View>)
         : (<View {...innerProps}>
       {childNode}
     </View>);
 });
-_View.displayName = 'mpx-view';
+_View.displayName = 'MpxView';
 export default _View;

package/lib/runtime/components/react/dist/mpx-web-view.jsx

@@ -1,15 +1,19 @@
-import { forwardRef, useEffect, useRef } from 'react';
+import { forwardRef, useEffect, useRef, useContext, useMemo } from 'react';
 import { noop, warn } from '@mpxjs/utils';
 import { Portal } from '@ant-design/react-native';
 import { getCustomEvent } from './getInnerListeners';
 import { promisify, redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy';
 import { WebView } from 'react-native-webview';
 import useNodesRef from './useNodesRef';
+import { getCurrentPage } from './utils';
+import { RouteContext } from './context';
 const _WebView = forwardRef((props, ref) => {
     const { src = '', bindmessage = noop, bindload = noop, binderror = noop } = props;
     if (props.style) {
         warn('The web-view component does not support the style prop.');
     }
+    const pageId = useContext(RouteContext);
+    const currentPage = useMemo(() => getCurrentPage(pageId), [pageId]);
     const defaultWebViewStyle = {
         position: 'absolute',
         left: 0,
@@ -21,16 +25,21 @@ const _WebView = forwardRef((props, ref) => {
     useNodesRef(props, ref, webViewRef, {
         defaultStyle: defaultWebViewStyle
     });
-    const _messageList = [];
+    const _messageList = useRef([]);
     const handleUnload = () => {
         // 这里是 WebView 销毁前执行的逻辑
         bindmessage(getCustomEvent('messsage', {}, {
             detail: {
-                data: _messageList
+                data: _messageList.current
             },
             layoutRef: webViewRef
         }));
     };
+    useEffect(() => {
+        if (currentPage) {
+            currentPage.__webViewUrl = src;
+        }
+    }, [src, currentPage]);
     useEffect(() => {
         // 组件卸载时执行
         return () => {
@@ -57,6 +66,11 @@ const _WebView = forwardRef((props, ref) => {
         };
         binderror(result);
     };
+    const _changeUrl = function (navState) {
+        if (currentPage) {
+            currentPage.__webViewUrl = navState.url;
+        }
+    };
     const _message = function (res) {
         let data = {};
         let asyncCallback;
@@ -73,7 +87,7 @@ const _WebView = forwardRef((props, ref) => {
         const postData = data.payload || {};
         switch (data.type) {
             case 'postMessage':
-                _messageList.push(postData.data);
+                _messageList.current.push(postData.data);
                 asyncCallback = Promise.resolve({
                     errMsg: 'invokeWebappApi:ok'
                 });
@@ -106,8 +120,8 @@ const _WebView = forwardRef((props, ref) => {
         });
     };
     return (<Portal>
-    <WebView style={defaultWebViewStyle} source={{ uri: src }} ref={webViewRef} onLoad={_load} onError={_error} onMessage={_message} javaScriptEnabled={true}></WebView>
+    <WebView style={defaultWebViewStyle} source={{ uri: src }} ref={webViewRef} onLoad={_load} onError={_error} onMessage={_message} onNavigationStateChange={_changeUrl} javaScriptEnabled={true}></WebView>
   </Portal>);
 });
-_WebView.displayName = 'mpx-web-view';
+_WebView.displayName = 'MpxWebview';
 export default _WebView;

package/lib/runtime/components/react/dist/pickerFaces.js

@@ -0,0 +1,75 @@
+/**
+ * Borrowed from open-source code: https://github.com/quidone/react-native-wheel-picker
+ * Special thanks to the authors for their contribution to the open-source community.
+ */
+export const degToRad = (deg) => (Math.PI * deg) / 180;
+// Calculates the height of the element after rotating it relative to the user's screen.
+const calcHeight = (degree, itemHeight) => itemHeight * Math.cos(degToRad(degree));
+export const calcPickerHeight = (faces, itemHeight) => {
+    if (faces.length === 7) {
+        return itemHeight * 5;
+    }
+    return faces.reduce((r, v) => r + calcHeight(Math.abs(v.deg), itemHeight), 0);
+};
+export const createFaces = (itemHeight, visibleCount) => {
+    // e.g [30, 60, 90]
+    const getDegreesRelativeCenter = () => {
+        const maxStep = Math.trunc((visibleCount + 2) / 2); // + 2 because there are 2 more faces at 90 degrees
+        const stepDegree = 90 / maxStep;
+        const result = [];
+        for (let i = 1; i <= maxStep; i++) {
+            result.push(i * stepDegree);
+        }
+        return result;
+    };
+    const getScreenHeightsAndOffsets = (degrees) => {
+        const screenHeights = degrees.map((deg) => calcHeight(deg, itemHeight));
+        const freeSpaces = screenHeights.map((screenHeight) => itemHeight - screenHeight);
+        const offsets = freeSpaces.map((freeSpace, index) => {
+            let offset = freeSpace / 2;
+            for (let i = 0; i < index; i++) {
+                offset += freeSpaces[i];
+            }
+            return offset;
+        });
+        return [screenHeights, offsets];
+    };
+    const getOpacity = (index) => {
+        const map = {
+            0: 0,
+            1: 0.2,
+            2: 0.35,
+            3: 0.45,
+            4: 0.5
+        };
+        return map[index] ?? Math.min(1, map[4] + index * 0.5);
+    };
+    const degrees = getDegreesRelativeCenter();
+    const [screenHeight, offsets] = getScreenHeightsAndOffsets(degrees);
+    return [
+        // top items
+        ...degrees
+            .map((degree, index) => {
+            return {
+                index: -1 * (index + 1),
+                deg: degree,
+                opacity: getOpacity(degrees.length - 1 - index),
+                offsetY: -1 * offsets[index],
+                screenHeight: screenHeight[index]
+            };
+        })
+            .reverse(),
+        // center item
+        { index: 0, deg: 0, opacity: 1, offsetY: 0, screenHeight: itemHeight },
+        // bottom items
+        ...degrees.map((degree, index) => {
+            return {
+                index: index + 1,
+                deg: -1 * degree,
+                opacity: getOpacity(degrees.length - 1 - index),
+                offsetY: offsets[index],
+                screenHeight: screenHeight[index]
+            };
+        })
+    ];
+};

package/lib/runtime/components/react/dist/pickerOverlay.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+const Overlay = ({ itemHeight, overlayItemStyle, overlayContainerStyle }) => {
+    return (<View style={[styles.overlayContainer, overlayContainerStyle]} pointerEvents={'none'}>
+      <View style={[styles.selection, { height: itemHeight }, overlayItemStyle]}/>
+    </View>);
+};
+const styles = StyleSheet.create({
+    overlayContainer: {
+        ...StyleSheet.absoluteFillObject,
+        justifyContent: 'center',
+        alignItems: 'center'
+    },
+    selection: {
+        borderTopWidth: 1,
+        borderBottomWidth: 1,
+        borderColor: 'rgba(0, 0, 0, 0.05)',
+        alignSelf: 'stretch'
+    }
+});
+export default React.memo(Overlay);