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

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

@@ -17,12 +17,12 @@
  * ✔ htouchmove
  * ✔ vtouchmove
  */
-import { useEffect, forwardRef, useContext, useCallback, useRef, useMemo } from 'react';
+import { useEffect, forwardRef, useContext, useCallback, useRef, useMemo, createElement } from 'react';
 import { StyleSheet } from 'react-native';
 import { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { MovableAreaContext } from './context';
-import { useTransformStyle, splitProps, splitStyle, HIDDEN_STYLE, wrapChildren, flatGesture } from './utils';
+import { useTransformStyle, splitProps, splitStyle, HIDDEN_STYLE, wrapChildren, flatGesture, extendObject } from './utils';
 import { GestureDetector, Gesture } from 'react-native-gesture-handler';
 import Animated, { useSharedValue, useAnimatedStyle, withDecay, runOnJS, runOnUI, useAnimatedReaction, withSpring } from 'react-native-reanimated';
 const styles = StyleSheet.create({
@@ -64,7 +64,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
     const waitForHandlers = flatGesture(waitFor);
     const nodeRef = useRef(null);
     useNodesRef(props, ref, nodeRef, {
-        defaultStyle: styles.container,
+        style: normalStyle,
         gestureRef: movableGestureRef
     });
     const hasSimultaneousHandlersChanged = prevSimultaneousHandlersRef.current.length !== (originSimultaneousHandlers?.length || 0) ||
@@ -416,16 +416,16 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
     };
     const catchEventHandlers = injectCatchEvent(props);
     const layoutStyle = !hasLayoutRef.current && hasSelfPercent ? HIDDEN_STYLE : {};
-    return (<GestureDetector gesture={gesture}>
-      <Animated.View ref={nodeRef} onLayout={onLayout} style={[innerStyle, animatedStyles, layoutStyle]} {...catchEventHandlers}>
-        {wrapChildren(props, {
-            hasVarDec,
-            varContext: varContextRef.current,
-            textStyle,
-            textProps
-        })}
-      </Animated.View>
-    </GestureDetector>);
+    return createElement(GestureDetector, { gesture: gesture }, createElement(Animated.View, extendObject({
+        ref: nodeRef,
+        onLayout: onLayout,
+        style: [innerStyle, animatedStyles, layoutStyle]
+    }, catchEventHandlers), wrapChildren(props, {
+        hasVarDec,
+        varContext: varContextRef.current,
+        textStyle,
+        textProps
+    })));
 });
 _MovableView.displayName = 'MpxMovableView';
 export default _MovableView;

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

@@ -1,4 +1,4 @@
-import { useCallback, forwardRef } from 'react';
+import { useCallback, forwardRef, createElement } from 'react';
 import useInnerProps from './getInnerListeners';
 import { redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy';
 import MpxView from './mpx-view';
@@ -27,9 +27,7 @@ const _Navigator = forwardRef((props, ref) => {
         ref,
         bindtap: handleClick
     });
-    return (<MpxView {...innerProps}>
-      {children}
-    </MpxView>);
+    return createElement(MpxView, innerProps, children);
 });
 _Navigator.displayName = 'MpxNavigator';
 export default _Navigator;

package/lib/runtime/components/react/dist/mpx-picker/date.jsx

@@ -23,12 +23,15 @@ function dateToString(date, fields = 'day') {
     return ret;
 }
 const _DatePicker = forwardRef((props, ref) => {
-    const { children, start = '1970-01-01', end = '2999-01-01', value, bindchange, bindcancel, disabled, fields } = props;
+    const { children, start = '1970-01-01', end = '2999-01-01', value, bindchange, bindcancel, disabled, fields, style } = props;
     const [datevalue, setDateValue] = useState(value);
     // 存储layout布局信息
     const layoutRef = useRef({});
     const viewRef = useRef(null);
-    useNodesRef(props, ref, viewRef, {});
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, {
+        style
+    });
     useEffect(() => {
         value && setDateValue(value);
     }, [value]);
@@ -48,6 +51,7 @@ const _DatePicker = forwardRef((props, ref) => {
         });
     };
     const dateProps = {
+        ref: nodeRef,
         precision: fields,
         value: formatTimeStr(datevalue),
         minDate: formatTimeStr(start),

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

@@ -28,10 +28,12 @@ import { FormContext } from '../context';
  * ✘ bindcolumnchange
  */
 const _Picker = forwardRef((props, ref) => {
-    const { mode = 'selector', value, bindcancel, bindchange, children, bindcolumnchange } = props;
+    const { mode = 'selector', value, bindcancel, bindchange, children, bindcolumnchange, style } = props;
     const innerLayout = useRef({});
     const nodeRef = useRef(null);
-    useNodesRef(props, ref, nodeRef, {});
+    useNodesRef(props, ref, nodeRef, {
+        style
+    });
     const innerProps = useInnerProps(props, {
         ref: nodeRef
     }, [], { layoutRef: innerLayout });
@@ -78,7 +80,7 @@ const _Picker = forwardRef((props, ref) => {
         bindcolumnchange && bindcolumnchange(eventData);
     };
     const commonProps = {
-        ...{ innerProps },
+        ...innerProps,
         mode,
         children,
         bindchange: onChange,

package/lib/runtime/components/react/dist/mpx-picker/multiSelector.jsx

@@ -77,7 +77,7 @@ function getColumnIndexByValue(range = [], column, value = []) {
     return changeIndex;
 }
 const _MultiSelectorPicker = forwardRef((props, ref) => {
-    const { range, value, disabled, bindchange, bindcancel, children, bindcolumnchange } = props;
+    const { range, value, disabled, bindchange, bindcancel, children, bindcolumnchange, style } = props;
     const formatRange = formatRangeFun(range, props['range-key']);
     const initValue = getInnerValueByIndex(formatRange, value);
     // 选中的索引值
@@ -87,7 +87,10 @@ const _MultiSelectorPicker = forwardRef((props, ref) => {
     // 存储layout布局信息
     const layoutRef = useRef({});
     const viewRef = useRef(null);
-    useNodesRef(props, ref, viewRef, {});
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, {
+        style
+    });
     useEffect(() => {
         if (range) {
             const newFormatRange = formatRangeFun(range, props['range-key']);
@@ -117,6 +120,7 @@ const _MultiSelectorPicker = forwardRef((props, ref) => {
         });
     };
     const antPickerProps = {
+        ref: nodeRef,
         data,
         value: selected,
         cols: range.length,

package/lib/runtime/components/react/dist/mpx-picker/region.jsx

@@ -35,13 +35,16 @@ function formateRegionData(clObj = [], customItem, depth = 2) {
     return obj;
 }
 const _RegionPicker = forwardRef((props, ref) => {
-    const { children, value, bindchange, bindcancel, disabled } = props;
+    const { children, value, bindchange, bindcancel, disabled, style } = props;
     const formatRegionData = formateRegionData(regionData, props['custom-item']);
     const [regionvalue, setRegionValue] = useState(value);
     // 存储layout布局信息
     const layoutRef = useRef({});
     const viewRef = useRef(null);
-    useNodesRef(props, ref, viewRef, {});
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, {
+        style
+    });
     const onChange = (value) => {
         // 通过 value 查找 code
         let tmp = regionData;
@@ -75,6 +78,7 @@ const _RegionPicker = forwardRef((props, ref) => {
         bindcancel && bindcancel();
     };
     const regionProps = {
+        ref: nodeRef,
         data: formatRegionData,
         value: regionvalue,
         onChange,

package/lib/runtime/components/react/dist/mpx-picker/selector.jsx

@@ -18,7 +18,7 @@ const formatRangeFun = (range, rangeKey = '') => {
     return newRange;
 };
 const _SelectorPicker = forwardRef((props, ref) => {
-    const { range, children, value, disabled, bindchange, bindcancel } = props;
+    const { range, children, value, disabled, bindchange, bindcancel, style } = props;
     // 格式化数据为Array<*>
     const formatRange = formatRangeFun(range, props['range-key']);
     // 选中的索引值
@@ -28,7 +28,10 @@ const _SelectorPicker = forwardRef((props, ref) => {
     // 存储layout布局信息
     const layoutRef = useRef({});
     const viewRef = useRef(null);
-    useNodesRef(props, ref, viewRef, {});
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, {
+        style
+    });
     useEffect(() => {
         if (range) {
             const newFormatRange = formatRangeFun(range, props['range-key']);
@@ -53,6 +56,7 @@ const _SelectorPicker = forwardRef((props, ref) => {
         });
     };
     const antPickerProps = {
+        ref: nodeRef,
         data,
         value: [selected],
         cols: 1,

package/lib/runtime/components/react/dist/mpx-picker/time.jsx

@@ -1,5 +1,5 @@
 import { View, Text, Modal, TouchableWithoutFeedback } from 'react-native';
-import { PickerView } from '@ant-design/react-native';
+import { PickerView, Portal } from '@ant-design/react-native';
 import React, { forwardRef, useState, useRef, useEffect } from 'react';
 import useNodesRef from '../useNodesRef'; // 引入辅助函数
 // 可见应用窗口的大小。
@@ -11,8 +11,8 @@ const styles = {
     showModal: {
         backgroundColor: 'black',
         opacity: 0.5,
-        position: 'absolute',
-        width: '100%'
+        width: '100%',
+        height: '100%'
     },
     hideModal: {
         opacity: 1,
@@ -117,7 +117,7 @@ function checkSelectedIsValid(strStart, strEnd, selected) {
 */
 // start="02:10" end = 23:01
 const _TimePicker = forwardRef((props, ref) => {
-    const { children, start, end, value, bindchange, bindcancel, disabled } = props;
+    const { children, start, end, value, bindchange, bindcancel, style } = props;
     const defaultProps = {
         start: '00:10',
         end: '23:59'
@@ -127,11 +127,11 @@ const _TimePicker = forwardRef((props, ref) => {
     // 存储layout布局信息
     const layoutRef = useRef({});
     const viewRef = useRef(null);
-    useNodesRef(props, ref, viewRef, {});
+    const nodeRef = useRef(null);
+    useNodesRef(props, ref, nodeRef, { style });
     // 存储modal的布局信息
     const modalLayoutRef = useRef({});
     const modalRef = useRef(null);
-    useNodesRef(props, ref, modalRef, {});
     const [visible, setVisible] = useState(false);
     const columnData = generateColumns();
     const [data, setData] = useState(columnData);
@@ -175,12 +175,6 @@ const _TimePicker = forwardRef((props, ref) => {
         else {
             // [9, 13]
             setTimeValue(date);
-            const strDate = formatStr(date);
-            bindchange && bindchange({
-                detail: {
-                    value: strDate
-                }
-            });
         }
     };
     const onElementLayout = () => {
@@ -197,6 +191,7 @@ const _TimePicker = forwardRef((props, ref) => {
     };
     const renderModalChildren = () => {
         const pickerProps = {
+            ref: nodeRef,
             data,
             value: timevalue,
             defaultValue: timevalue,
@@ -230,15 +225,15 @@ const _TimePicker = forwardRef((props, ref) => {
       </TouchableWithoutFeedback>
     </View>;
     };
-    const strStyle = visible ? styles.showModal : styles.hideModal;
-    const mheight = Math.floor(offsetTop);
     // Animated.View
     return (<>
-    <View style={{ ...strStyle, height: visible ? mheight : 0, bottom: 0 }}>
+    <Portal>
+      <View style={visible ? styles.showModal : styles.hideModal}>
       <Modal animationType="slide" transparent={true} visible={visible}>
         {renderModalChildren()}
       </Modal>
     </View>
+    </Portal>
     {renderChildren()}
   </>);
 });

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

@@ -0,0 +1,39 @@
+import React, { useEffect } from 'react';
+import Reanimated, { Extrapolation, interpolate, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
+import { wrapChildren, extendObject } from './utils';
+import { createFaces } from './pickerFaces';
+import { usePickerViewColumnAnimationContext } from './pickerVIewContext';
+const _PickerViewColumnItem = ({ item, index, itemHeight, itemWidth, textStyleFromParent, textStyle, hasVarDec, varContext, textProps, visibleCount, onItemLayout }) => {
+    const offsetYShared = usePickerViewColumnAnimationContext();
+    const facesShared = useSharedValue(createFaces(itemHeight, visibleCount));
+    useEffect(() => {
+        facesShared.value = createFaces(itemHeight, visibleCount);
+    }, [itemHeight]);
+    const animatedStyles = useAnimatedStyle(() => {
+        const inputRange = facesShared.value.map((f) => itemHeight * (index + f.index));
+        return {
+            opacity: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.opacity), Extrapolation.CLAMP),
+            transform: [
+                { rotateX: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.deg), Extrapolation.CLAMP) + 'deg' },
+                { translateY: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.offsetY), Extrapolation.EXTEND) },
+                { scale: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.scale), Extrapolation.EXTEND) }
+            ]
+        };
+    });
+    const strKey = `picker-column-item-${index}`;
+    const restProps = index === 0 ? { onLayout: onItemLayout } : {};
+    const itemProps = extendObject({
+        style: extendObject({ height: itemHeight, width: '100%' }, textStyleFromParent, textStyle, item.props.style)
+    }, restProps);
+    const realItem = React.cloneElement(item, itemProps);
+    return (<Reanimated.View key={strKey} style={[{ height: itemHeight, width: itemWidth }, animatedStyles]}>
+      {wrapChildren({ children: realItem }, {
+            hasVarDec,
+            varContext,
+            textStyle,
+            textProps
+        })}
+    </Reanimated.View>);
+};
+_PickerViewColumnItem.displayName = 'MpxPickerViewColumnItem';
+export default _PickerViewColumnItem;

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

@@ -1,108 +1,180 @@
-import { View, Animated, SafeAreaView } from 'react-native';
-import React, { forwardRef, useRef, useState, useEffect } from 'react';
-import { useTransformStyle, splitStyle, splitProps, wrapChildren, useLayout } from './utils';
-import useNodesRef from './useNodesRef'; // 引入辅助函数
-const defaultItemHeight = 36;
-// 每个Column 都有个外层的高度, 内部的元素高度
-// 默认的高度
+import React, { forwardRef, useRef, useState, useMemo, useEffect, useCallback } from 'react';
+import { Platform, SafeAreaView, StyleSheet } from 'react-native';
+import Reanimated, { useAnimatedRef, useScrollViewOffset } from 'react-native-reanimated';
+import { vibrateShort } from '@mpxjs/api-proxy';
+import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious } from './utils';
+import useNodesRef from './useNodesRef';
+import PickerOverlay from './pickerViewOverlay';
+import PickerMask from './pickerViewMask';
+import MpxPickerVIewColumnItem from './mpx-picker-view-column-item';
+import { PickerViewColumnAnimationContext } from './pickerVIewContext';
+const visibleCount = 5;
 const _PickerViewColumn = forwardRef((props, ref) => {
-    const { children, selectedIndex, onColumnLayoutChange, onSelectChange, getInnerLayout, style, wrapperStyle, 'enable-var': enableVar, 'external-var-context': externalVarContext } = props;
-    // PickerViewColumn
+    const { columnData, columnIndex, columnStyle, initialIndex, onSelectChange, style, wrapperStyle, pickerMaskStyle, pickerOverlayStyle, 'enable-var': enableVar, 'external-var-context': externalVarContext } = props;
     const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext });
-    const { textStyle } = splitStyle(normalStyle);
+    const { textStyle: textStyleFromParent = {} } = splitStyle(columnStyle);
+    const { textStyle = {} } = splitStyle(normalStyle);
     const { textProps } = splitProps(props);
-    // const { innerStyle } = splitStyle(normalStyle)
-    // scrollView的ref
-    const scrollViewRef = useRef(null);
-    useNodesRef(props, ref, scrollViewRef, {});
-    // 每个元素的高度
-    let [itemH, setItemH] = useState(0);
+    const scrollViewRef = useAnimatedRef();
+    const offsetYShared = useScrollViewOffset(scrollViewRef);
+    useNodesRef(props, ref, scrollViewRef, {
+        style: normalStyle
+    });
+    const { height: pickerH, itemHeight } = wrapperStyle;
+    const [scrollViewWidth, setScrollViewWidth] = useState('100%');
+    const [itemRawW, setItemRawW] = useState('100%');
+    const [itemRawH, setItemRawH] = useState(itemHeight);
+    const maxIndex = useMemo(() => columnData.length - 1, [columnData]);
+    const maxScrollViewWidth = useRef(-1);
+    const prevScrollingInfo = useRef({ index: initialIndex, y: 0 });
+    const touching = useRef(false);
+    const scrolling = useRef(false);
+    const activeIndex = useRef(initialIndex);
+    const prevIndex = usePrevious(initialIndex);
+    const prevMaxIndex = usePrevious(maxIndex);
+    const { layoutProps } = useLayout({
+        props,
+        hasSelfPercent,
+        setWidth,
+        setHeight,
+        nodeRef: scrollViewRef
+    });
+    // console.log('[mpx-picker-view-column], render ---> columnIndex=', columnIndex, 'initialIndex=', initialIndex, 'columnData=', columnData.length)
+    // const initialOffset = useMemo(() => ({
+    //   x: 0,
+    //   y: itemRawH * initialIndex
+    // }), [itemRawH])
+    const snapToOffsets = useMemo(() => columnData.map((_, i) => i * itemRawH), [columnData, itemRawH]);
+    const paddingHeight = useMemo(() => Math.round((pickerH - itemRawH) / 2), [pickerH, itemRawH]);
+    const contentContainerStyle = useMemo(() => {
+        return [{ paddingVertical: paddingHeight }];
+    }, [paddingHeight]);
+    const getIndex = useCallback((y) => {
+        const calc = Math.round(y / itemRawH);
+        return Math.max(0, Math.min(calc, maxIndex));
+    }, [itemRawH, maxIndex]);
     useEffect(() => {
-        if (selectedIndex && itemH) {
-            const offsetY = selectedIndex * itemH;
-            scrollViewRef.current?.scrollTo({ x: 0, y: offsetY, animated: true });
+        if (!scrollViewRef.current ||
+            !itemRawH ||
+            touching.current ||
+            scrolling.current ||
+            prevIndex == null ||
+            initialIndex === prevIndex ||
+            initialIndex === activeIndex.current ||
+            maxIndex !== prevMaxIndex) {
+            return;
+        }
+        // console.log('[mpx-picker-view-column], useEffect ---> columnIndex=', columnIndex, 'initialIndex=', initialIndex, 'y=', itemRawH * initialIndex, `${scrollViewRef.current?.scrollTo}`)
+        setTimeout(() => {
+            scrollViewRef.current?.scrollTo({
+                x: 0,
+                y: itemRawH * initialIndex,
+                animated: false
+            });
+        }, 0);
+        activeIndex.current = initialIndex;
+    }, [itemRawH, initialIndex]);
+    const onContentSizeChange = (_w, h) => {
+        const y = itemRawH * initialIndex;
+        // console.log('[mpx-picker-view-column], onContentSizeChange --->', 'columnIndex=', columnIndex, '_w=', _w, 'h=', h, 'y=', y)
+        if (y <= h) {
+            setTimeout(() => {
+                scrollViewRef.current?.scrollTo({ x: 0, y, animated: false });
+            }, 0);
+        }
+    };
+    const onScrollViewLayout = (e) => {
+        const { width } = e.nativeEvent.layout;
+        const widthInt = Math.ceil(width);
+        // console.log('[mpx-picker-view-column], onScrollViewLayout --->', 'columnIndex=', columnIndex, 'widthInt=', widthInt, 'scrollViewWidth=', scrollViewWidth)
+        if (widthInt !== scrollViewWidth) {
+            const maxW = maxScrollViewWidth.current;
+            if (maxW !== -1 && widthInt > maxW) {
+                return;
+            }
+            if (maxW === -1) {
+                maxScrollViewWidth.current = Math.ceil(widthInt * 1.5);
+            }
+            setScrollViewWidth(widthInt);
+        }
+        if (itemRawW === '100%') {
+            setItemRawW(widthInt);
         }
-    }, [selectedIndex, itemH]);
-    const onScrollViewLayout = () => {
-        getInnerLayout && getInnerLayout(layoutRef);
     };
-    const { 
-    // 存储layout布局信息
-    layoutRef, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout: onScrollViewLayout });
     const onItemLayout = (e) => {
-        const layout = e.nativeEvent.layout;
-        if (layout.height && itemH !== layout.height) {
-            itemH = layout.height;
-            setItemH(layout.height);
-            onColumnLayoutChange && onColumnLayoutChange({ height: layout.height * 5 });
+        const { height: rawH } = e.nativeEvent.layout;
+        if (rawH && itemRawH !== rawH) {
+            setItemRawH(rawH);
         }
     };
+    const onTouchStart = () => {
+        touching.current = true;
+        prevScrollingInfo.current = {
+            index: activeIndex.current,
+            y: activeIndex.current * itemRawH
+        };
+    };
+    const onTouchEnd = () => {
+        touching.current = false;
+    };
+    const onTouchCancel = () => {
+        touching.current = false;
+    };
+    const onMomentumScrollBegin = () => {
+        scrolling.current = true;
+    };
     const onMomentumScrollEnd = (e) => {
-        if (scrollViewRef && itemH) {
-            const { y: scrollY } = e.nativeEvent.contentOffset;
-            const selIndex = Math.floor(scrollY / itemH);
-            onSelectChange(selIndex);
+        scrolling.current = false;
+        if (!itemRawH) {
+            return;
+        }
+        const { y: scrollY } = e.nativeEvent.contentOffset;
+        let calcIndex = Math.round(scrollY / itemRawH);
+        activeIndex.current = calcIndex;
+        if (calcIndex !== initialIndex) {
+            calcIndex = Math.max(0, Math.min(calcIndex, maxIndex)) || 0;
+            onSelectChange(calcIndex);
         }
     };
-    const renderInnerchild = () => {
-        // Fragment 节点
-        let realElement = [];
-        const getRealChilds = () => {
-            if (Array.isArray(children)) {
-                realElement = children;
-            }
-            else {
-                const tempChild = children;
-                if (tempChild.props.children && tempChild.props.children) {
-                    realElement = tempChild.props.children;
-                }
-                else {
-                    realElement = [children];
+    const onScroll = (e) => {
+        if (Platform.OS === 'android') {
+            return;
+        }
+        const { y } = e.nativeEvent.contentOffset;
+        const { index: prevIndex, y: _y } = prevScrollingInfo.current;
+        if (touching.current || scrolling.current) {
+            if (Math.abs(y - _y) >= itemRawH) {
+                const currentId = getIndex(y);
+                if (currentId !== prevIndex) {
+                    prevScrollingInfo.current = {
+                        index: currentId,
+                        y: currentId * itemRawH
+                    };
+                    vibrateShort({ type: 'selection' });
                 }
             }
-            return realElement;
-        };
-        const realChilds = getRealChilds();
-        const arrChild = realChilds.map((item, index) => {
-            const InnerProps = index === 0 ? { onLayout: onItemLayout } : {};
-            const strKey = 'picker' + props.prefix + '-column' + index;
-            const arrHeight = (wrapperStyle.itemHeight + '').match(/\d+/g) || [];
-            const iHeight = (arrHeight[0] || defaultItemHeight);
-            return <View key={strKey} {...InnerProps} style={[{ height: iHeight, width: '100%' }]}>
-        {wrapChildren({
-                    children: item
-                }, {
-                    hasVarDec,
-                    varContext: varContextRef.current,
-                    textStyle,
-                    textProps
-                })}
-      </View>;
-        });
-        const totalHeight = itemH * 5;
-        if (wrapperStyle.height && totalHeight !== wrapperStyle.height) {
-            const fix = Math.ceil((totalHeight - wrapperStyle.height) / 2);
-            arrChild.unshift(<View key="picker-column-0" style={[{ height: itemH - fix }]}></View>);
-            arrChild.unshift(<View key="picker-column-1" style={[{ height: itemH }]}></View>);
-            arrChild.push(<View key="picker-column-2" style={[{ height: itemH }]}></View>);
-            arrChild.push(<View key="picker-column-3" style={[{ height: itemH - fix }]}></View>);
         }
-        else {
-            arrChild.unshift(<View key="picker-column-0" style={[{ height: itemH }]}></View>);
-            arrChild.unshift(<View key="picker-column-1" style={[{ height: itemH }]}></View>);
-            arrChild.push(<View key="picker-column-2" style={[{ height: itemH }]}></View>);
-            arrChild.push(<View key="picker-column-3" style={[{ height: itemH }]}></View>);
-        }
-        return arrChild;
     };
+    const renderInnerchild = () => columnData.map((item, index) => {
+        return (<MpxPickerVIewColumnItem key={index} item={item} index={index} itemHeight={itemHeight} itemWidth={itemRawW} textStyleFromParent={textStyleFromParent} textStyle={textStyle} hasVarDec={hasVarDec} varContext={varContextRef.current} textProps={textProps} visibleCount={visibleCount} onItemLayout={onItemLayout}/>);
+    });
     const renderScollView = () => {
-        return (<Animated.ScrollView horizontal={false} ref={scrollViewRef} bounces={false} scrollsToTop={false} removeClippedSubviews={true} showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false} pagingEnabled={false} snapToInterval={itemH} automaticallyAdjustContentInsets={false} {...layoutProps} onMomentumScrollEnd={onMomentumScrollEnd}>
-        {renderInnerchild()}
-    </Animated.ScrollView>);
+        return (<PickerViewColumnAnimationContext.Provider value={offsetYShared}>
+        <Reanimated.ScrollView ref={scrollViewRef} bounces={true} horizontal={false} nestedScrollEnabled={true} removeClippedSubviews={false} showsVerticalScrollIndicator={false} showsHorizontalScrollIndicator={false} scrollEventThrottle={16} {...layoutProps} style={[{ width: scrollViewWidth }]} decelerationRate="fast" snapToOffsets={snapToOffsets} onScroll={onScroll} onLayout={onScrollViewLayout} onTouchStart={onTouchStart} onTouchEnd={onTouchEnd} onTouchCancel={onTouchCancel} onMomentumScrollBegin={onMomentumScrollBegin} onMomentumScrollEnd={onMomentumScrollEnd} onContentSizeChange={onContentSizeChange} contentContainerStyle={contentContainerStyle}>
+          {renderInnerchild()}
+        </Reanimated.ScrollView>
+      </PickerViewColumnAnimationContext.Provider>);
     };
-    return (<SafeAreaView style={[{ display: 'flex', flex: 1 }]}>
-    {renderScollView()}
-  </SafeAreaView>);
+    const renderOverlay = () => (<PickerOverlay itemHeight={itemHeight} overlayItemStyle={pickerOverlayStyle}/>);
+    const renderMask = () => (<PickerMask itemHeight={itemHeight} maskContainerStyle={pickerMaskStyle}/>);
+    return (<SafeAreaView style={[styles.wrapper, normalStyle]}>
+      {renderScollView()}
+      {renderMask()}
+      {renderOverlay()}
+    </SafeAreaView>);
+});
+const styles = StyleSheet.create({
+    wrapper: { display: 'flex', flex: 1 }
 });
-_PickerViewColumn.displayName = 'mpx-picker-view-column';
+_PickerViewColumn.displayName = 'MpxPickerViewColumn';
 export default _PickerViewColumn;