@mpxjs/webpack-plugin 2.9.67 → 2.9.69-beta.0

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

@@ -4,12 +4,12 @@
  * ✘ decode
  */
 import { Text } from 'react-native';
-import { useRef, forwardRef } from 'react';
+import { useRef, forwardRef, createElement } from 'react';
 import useInnerProps from './getInnerListeners';
 import useNodesRef from './useNodesRef'; // 引入辅助函数
 import { useTransformStyle, wrapChildren } from './utils';
 const _Text = forwardRef((props, ref) => {
-    const { style = {}, selectable, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'user-select': userSelect, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const { style = {}, allowFontScaling = false, selectable, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'user-select': userSelect, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
     const layoutRef = useRef({});
     const { normalStyle, hasVarDec, varContextRef } = useTransformStyle(style, {
         enableVar,
@@ -19,22 +19,23 @@ const _Text = forwardRef((props, ref) => {
         parentHeight
     });
     const nodeRef = useRef(null);
-    useNodesRef(props, ref, nodeRef);
+    useNodesRef(props, ref, nodeRef, {
+        style: normalStyle
+    });
     const innerProps = useInnerProps(props, {
         ref: nodeRef,
         style: normalStyle,
-        selectable: !!selectable || !!userSelect
+        selectable: !!selectable || !!userSelect,
+        allowFontScaling
     }, [
         'user-select'
     ], {
         layoutRef
     });
-    return (<Text {...innerProps}>
-      {wrapChildren(props, {
-            hasVarDec,
-            varContext: varContextRef.current
-        })}
-    </Text>);
+    return createElement(Text, innerProps, wrapChildren(props, {
+        hasVarDec,
+        varContext: varContextRef.current
+    }));
 });
 _Text.displayName = 'MpxText';
 export default _Text;

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

@@ -9,10 +9,10 @@
  *     ✘ show-confirm-bar
  *     ✔ bindlinechange: No `heightRpx` info.
  */
-import { forwardRef } from 'react';
+import { forwardRef, createElement } from 'react';
 import { Keyboard } from 'react-native';
 import Input from './mpx-input';
-import { omit } from './utils';
+import { omit, extendObject } from './utils';
 const Textarea = forwardRef((props, ref) => {
     const restProps = omit(props, [
         'ref',
@@ -21,7 +21,12 @@ const Textarea = forwardRef((props, ref) => {
         'multiline',
         'confirm-hold'
     ]);
-    return (<Input ref={ref} multiline confirm-type='next' bindblur={() => Keyboard.dismiss()} {...restProps}/>);
+    return createElement(Input, extendObject({
+        ref: ref,
+        multiline: true,
+        confirmType: 'next',
+        bindblur: () => Keyboard.dismiss()
+    }, restProps));
 });
 Textarea.displayName = 'MpxTextarea';
 export default Textarea;

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

@@ -5,12 +5,13 @@
  * ✔ hover-stay-time
  */
 import { View, StyleSheet, Image } from 'react-native';
-import { useRef, useState, useEffect, forwardRef } from 'react';
+import { useRef, useState, useEffect, forwardRef, createElement } from 'react';
 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, extendObject } from './utils';
+import { error } from '@mpxjs/utils';
 import LinearGradient from 'react-native-linear-gradient';
 const linearMap = new Map([
     ['top', 0],
@@ -148,10 +149,7 @@ function backgroundPosition(imageProps, preImageInfo, imageSize, layoutInfo) {
             style[key] = val;
         }
     }
-    imageProps.style = {
-        ...imageProps.style,
-        ...style
-    };
+    extendObject(imageProps.style, style);
 }
 // background-size 转换
 function backgroundSize(imageProps, preImageInfo, imageSize, layoutInfo) {
@@ -201,7 +199,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
@@ -209,15 +207,13 @@ function backgroundSize(imageProps, preImageInfo, imageSize, layoutInfo) {
         }
     }
     // 样式合并
-    imageProps.style = {
-        ...imageProps.style,
-        ...dimensions
-    };
+    extendObject(imageProps.style, dimensions);
 }
 // 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 +237,8 @@ function linearGradient(imageProps, preImageInfo, imageSize, layoutInfo) {
 const imageStyleToProps = (preImageInfo, imageSize, layoutInfo) => {
     // 初始化
     const imageProps = {
+        resizeMode: 'cover',
         style: {
-            resizeMode: 'cover',
             position: 'absolute'
             // ...StyleSheet.absoluteFillObject
         },
@@ -384,10 +380,9 @@ function parseLinearGradient(text) {
         !isNaN(numberVal) && locations.push(numberVal);
         return prev;
     }, { colors: [], locations: [] });
-    return {
-        ...linearInfo,
+    return extendObject({}, linearInfo, {
         direction: direction.trim()
-    };
+    });
 }
 function parseBgImage(text) {
     if (!text)
@@ -430,7 +425,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 +521,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,29 +534,24 @@ 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 = {
-        // flex 布局相关的默认样式
-        ...style.display === 'flex' && {
+    const defaultStyle = style.display === 'flex'
+        ? {
             flexDirection: 'row',
             flexBasis: 'auto',
             flexShrink: 1,
             flexWrap: 'nowrap'
         }
-    };
-    const styleObj = {
-        ...defaultStyle,
-        ...style,
-        ...(isHover ? hoverStyle : null)
-    };
+        : {};
+    const styleObj = extendObject({}, defaultStyle, style, isHover ? hoverStyle : {});
     const { normalStyle, hasSelfPercent, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, {
         enableVar,
         externalVarContext,
@@ -553,15 +559,15 @@ const _View = forwardRef((viewProps, ref) => {
         parentWidth,
         parentHeight
     });
-    const { textStyle, backgroundStyle, innerStyle } = splitStyle(normalStyle);
+    const { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle);
     enableBackground = enableBackground || !!backgroundStyle;
     const enableBackgroundRef = useRef(enableBackground);
     if (enableBackgroundRef.current !== enableBackground) {
-        throw new Error('[Mpx runtime error]: background use should be stable in the component lifecycle, or you can set [enable-background] with true.');
+        error('[Mpx runtime error]: background use should be stable in the component lifecycle, or you can set [enable-background] with true.');
     }
     const nodeRef = useRef(null);
     useNodesRef(props, ref, nodeRef, {
-        defaultStyle
+        style: normalStyle
     });
     const dataRef = useRef({});
     useEffect(() => {
@@ -594,16 +600,27 @@ const _View = forwardRef((viewProps, ref) => {
         setStayTimer();
     }
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
-    const viewStyle = Object.assign({}, innerStyle, layoutStyle);
-    const innerProps = useInnerProps(props, {
+    const viewStyle = extendObject({}, innerStyle, layoutStyle);
+    enableAnimation = enableAnimation || !!animation;
+    const enableAnimationRef = useRef(enableAnimation);
+    if (enableAnimationRef.current !== enableAnimation) {
+        error('[Mpx runtime error]: animation use should be stable in the component lifecycle, or you can set [enable-animation] with true.');
+    }
+    const finalStyle = enableAnimationRef.current
+        ? [viewStyle, useAnimationHooks({
+                animation,
+                style: viewStyle
+            })]
+        : viewStyle;
+    const innerProps = useInnerProps(props, extendObject({
         ref: nodeRef,
-        style: viewStyle,
-        ...layoutProps,
-        ...(hoverStyle && {
+        style: finalStyle
+    }, layoutProps, hoverStyle
+        ? {
             bindtouchstart: onTouchStart,
             bindtouchend: onTouchEnd
-        })
-    }, [
+        }
+        : {}), [
         'hover-start-time',
         'hover-stay-time',
         'hover-style',
@@ -611,32 +628,19 @@ 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}>
-      {childNode}
-    </Animated.View>)
-        : (<View {...innerProps}>
-      {childNode}
-    </View>);
+    return enableAnimation
+        ? createElement(Animated.View, innerProps, childNode)
+        : createElement(View, innerProps, childNode);
 });
 _View.displayName = 'MpxView';
 export default _View;

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

@@ -1,15 +1,21 @@
-import { forwardRef, useEffect, useRef } from 'react';
-import { noop, warn } from '@mpxjs/utils';
+import { forwardRef, useRef, useContext, useMemo, createElement } from 'react';
+import { warn, getFocusedNavigation, isFunction } 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, extendObject } from './utils';
+import { RouteContext } from './context';
 const _WebView = forwardRef((props, ref) => {
-    const { src = '', bindmessage = noop, bindload = noop, binderror = noop } = props;
+    const { src, bindmessage, bindload, binderror } = props;
+    const mpx = global.__mpx;
     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 webViewRef = useRef(null);
     const defaultWebViewStyle = {
         position: 'absolute',
         left: 0,
@@ -17,26 +23,12 @@ const _WebView = forwardRef((props, ref) => {
         top: 0,
         bottom: 0
     };
-    const webViewRef = useRef(null);
     useNodesRef(props, ref, webViewRef, {
-        defaultStyle: defaultWebViewStyle
+        style: defaultWebViewStyle
     });
-    const _messageList = [];
-    const handleUnload = () => {
-        // 这里是 WebView 销毁前执行的逻辑
-        bindmessage(getCustomEvent('messsage', {}, {
-            detail: {
-                data: _messageList
-            },
-            layoutRef: webViewRef
-        }));
-    };
-    useEffect(() => {
-        // 组件卸载时执行
-        return () => {
-            handleUnload();
-        };
-    }, []);
+    if (!src) {
+        return null;
+    }
     const _load = function (res) {
         const result = {
             type: 'load',
@@ -57,6 +49,36 @@ const _WebView = forwardRef((props, ref) => {
         };
         binderror(result);
     };
+    const injectedJavaScript = `
+    if (window.ReactNativeWebView && window.ReactNativeWebView.postMessage) {
+      var _documentTitle = document.title;
+      window.ReactNativeWebView.postMessage(JSON.stringify({
+        type: 'setTitle',
+        payload: {
+          _documentTitle: _documentTitle
+        }
+      }))
+      Object.defineProperty(document, 'title', {
+        set (val) {
+          _documentTitle = val
+          window.ReactNativeWebView.postMessage(JSON.stringify({
+            type: 'setTitle',
+            payload: {
+              _documentTitle: _documentTitle
+            }
+          }))
+        },
+        get () {
+          return _documentTitle
+        }
+      });
+    }
+  `;
+    const _changeUrl = function (navState) {
+        if (navState.navigationType) { // navigationType这个事件在页面开始加载时和页面加载完成时都会被触发所以判断这个避免其他无效触发执行该逻辑
+            currentPage.__webViewUrl = navState.url;
+        }
+    };
     const _message = function (res) {
         let data = {};
         let asyncCallback;
@@ -67,47 +89,102 @@ const _WebView = forwardRef((props, ref) => {
                 data = JSON.parse(nativeEventData);
             }
         }
-        catch (e) {
-            data = {};
-        }
+        catch (e) { }
+        const args = data.args;
         const postData = data.payload || {};
-        switch (data.type) {
+        const params = Array.isArray(args) ? args : [postData];
+        const type = data.type;
+        switch (type) {
+            case 'setTitle':
+                { // case下不允许直接声明，包个块解决该问题
+                    const title = postData._documentTitle;
+                    if (title) {
+                        const navigation = getFocusedNavigation();
+                        navigation && navigation.setOptions({ title });
+                    }
+                }
+                break;
             case 'postMessage':
-                _messageList.push(postData.data);
+                bindmessage && bindmessage(getCustomEvent('messsage', {}, {
+                    detail: {
+                        data: params[0]?.data
+                    }
+                }));
                 asyncCallback = Promise.resolve({
                     errMsg: 'invokeWebappApi:ok'
                 });
                 break;
             case 'navigateTo':
-                asyncCallback = navObj.navigateTo(postData);
+                asyncCallback = navObj.navigateTo(...params);
                 break;
             case 'navigateBack':
-                asyncCallback = navObj.navigateBack(postData);
+                asyncCallback = navObj.navigateBack(...params);
                 break;
             case 'redirectTo':
-                asyncCallback = navObj.redirectTo(postData);
+                asyncCallback = navObj.redirectTo(...params);
                 break;
             case 'switchTab':
-                asyncCallback = navObj.switchTab(postData);
+                asyncCallback = navObj.switchTab(...params);
                 break;
             case 'reLaunch':
-                asyncCallback = navObj.reLaunch(postData);
+                asyncCallback = navObj.reLaunch(...params);
+                break;
+            default:
+                if (type) {
+                    const implement = mpx.config.webviewConfig.apiImplementations && mpx.config.webviewConfig.apiImplementations[type];
+                    if (isFunction(implement)) {
+                        asyncCallback = Promise.resolve(implement(...params));
+                    }
+                    else {
+                        /* eslint-disable prefer-promise-reject-errors */
+                        asyncCallback = Promise.reject({
+                            errMsg: `未在apiImplementations中配置${type}方法`
+                        });
+                    }
+                }
                 break;
         }
         asyncCallback && asyncCallback.then((res) => {
             if (webViewRef.current?.postMessage) {
                 const test = JSON.stringify({
-                    type: data.type,
+                    type,
                     callbackId: data.callbackId,
                     result: res
                 });
                 webViewRef.current.postMessage(test);
             }
+        }).catch((error) => {
+            if (webViewRef.current?.postMessage) {
+                const test = JSON.stringify({
+                    type,
+                    callbackId: data.callbackId,
+                    error
+                });
+                webViewRef.current.postMessage(test);
+            }
         });
     };
-    return (<Portal>
-    <WebView style={defaultWebViewStyle} source={{ uri: src }} ref={webViewRef} onLoad={_load} onError={_error} onMessage={_message} javaScriptEnabled={true}></WebView>
-  </Portal>);
+    const events = {};
+    if (bindload) {
+        extendObject(events, {
+            onLoad: _load
+        });
+    }
+    if (binderror) {
+        extendObject(events, {
+            onError: _error
+        });
+    }
+    extendObject(events, {
+        onMessage: _message
+    });
+    return createElement(Portal, null, createElement(WebView, extendObject({
+        style: defaultWebViewStyle,
+        source: { uri: src },
+        ref: webViewRef,
+        javaScriptEnabled: true,
+        onNavigationStateChange: _changeUrl
+    }, events)));
 });
 _WebView.displayName = 'MpxWebview';
 export default _WebView;

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

@@ -0,0 +1,81 @@
+/**
+ * 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];
+            }
+            if (index === 0) {
+                offset *= 0.6;
+            }
+            return offset;
+        });
+        return [screenHeights, offsets];
+    };
+    const getOpacity = (index) => {
+        const map = {
+            0: 0,
+            1: 0.8,
+            2: 0.9 // 0.35
+            // 3: 0.45, // 0.45
+            // 4: 0.5 // 0.5
+        };
+        return map[index] ?? Math.min(1, map[2] + index * 0.05);
+    };
+    const degrees = getDegreesRelativeCenter();
+    const [screenHeight, offsets] = getScreenHeightsAndOffsets(degrees);
+    const scales = [1, 0.925, 0.8];
+    return [
+        // top items
+        ...degrees
+            .map((degree, index) => {
+            return {
+                index: -1 * (index + 1),
+                deg: degree,
+                opacity: getOpacity(degrees.length - 1 - index),
+                offsetY: -1 * offsets[index],
+                scale: scales[index],
+                screenHeight: screenHeight[index]
+            };
+        })
+            .reverse(),
+        // center item
+        { index: 0, deg: 0, opacity: 1, offsetY: 0, scale: 1.031, screenHeight: itemHeight },
+        // bottom items
+        ...degrees.map((degree, index) => {
+            return {
+                index: index + 1,
+                deg: -1 * degree,
+                opacity: getOpacity(degrees.length - 1 - index),
+                offsetY: offsets[index],
+                scale: scales[index],
+                screenHeight: screenHeight[index]
+            };
+        })
+    ];
+};

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

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react';
+export const PickerViewColumnAnimationContext = createContext(undefined);
+export const usePickerViewColumnAnimationContext = () => {
+    const value = useContext(PickerViewColumnAnimationContext);
+    if (value === undefined) {
+        throw new Error('usePickerViewColumnAnimationContext must be called from within PickerViewColumnAnimationContext.Provider!');
+    }
+    return value;
+};

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+const _PickerViewMask = ({ itemHeight, maskContainerStyle }) => {
+    return (<View style={[styles.overlayContainer, maskContainerStyle]} pointerEvents={'none'}>
+      <LinearGradient colors={['rgba(255,255,255,1)', 'rgba(255,255,255,0.5)']} style={{ flex: 1 }}/>
+      <View style={{ height: itemHeight }}/>
+      <LinearGradient colors={['rgba(255,255,255,0.5)', 'rgba(255,255,255,1)']} style={{ flex: 1 }}/>
+    </View>);
+};
+const styles = StyleSheet.create({
+    overlayContainer: {
+        ...StyleSheet.absoluteFillObject,
+        zIndex: 100
+    }
+});
+_PickerViewMask.displayName = 'MpxPickerViewMask';
+export default _PickerViewMask;

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+const _PickerViewOverlay = ({ 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',
+        zIndex: 200
+    },
+    selection: {
+        borderTopWidth: 1,
+        borderBottomWidth: 1,
+        borderColor: 'rgba(0, 0, 0, 0.05)',
+        alignSelf: 'stretch'
+    }
+});
+_PickerViewOverlay.displayName = 'MpxPickerViewOverlay';
+export default _PickerViewOverlay;