@mpxjs/webpack-plugin 2.10.15-prelease.1 → 2.10.16-beta.10

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

@@ -40,7 +40,16 @@ const ModeMap = new Map([
     ...cropMode.map(mode => [mode, 'stretch'])
 ]);
 const isNumber = (value) => typeof value === 'number';
-const relativeCenteredSize = (viewSize, imageSize) => (viewSize - imageSize) / 2;
+const relativeCenteredSize = (viewSize, imageSize) => {
+    return (viewSize - imageSize) / 2;
+};
+// 获取能完全显示图片的缩放比例：长宽方向的缩放比例最小值即为能完全展示的比例
+function getFitScale(width1, height1, width2, height2) {
+    return Math.min(width2 / width1, height2 / height1);
+}
+function getFillScale(width1, height1, width2, height2) {
+    return Math.max(width2 / width1, height2 / height1);
+}
 function noMeetCalcRule(isSvg, mode, viewWidth, viewHeight, ratio) {
     const isMeetSize = viewWidth && viewHeight && ratio;
     if (isSvg && !isMeetSize)
@@ -49,6 +58,16 @@ function noMeetCalcRule(isSvg, mode, viewWidth, viewHeight, ratio) {
         return true;
     return false;
 }
+const getFixedWidth = (viewWidth, viewHeight, ratio) => {
+    if (!ratio)
+        return viewWidth;
+    const fixed = viewHeight / ratio;
+    return !fixed ? viewWidth : fixed;
+};
+const getFixedHeight = (viewWidth, viewHeight, ratio) => {
+    const fixed = viewWidth * ratio;
+    return !fixed ? viewHeight : fixed;
+};
 const Image = forwardRef((props, ref) => {
     const { src = '', mode = 'scaleToFill', style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'enable-fast-image': enableFastImage, 'parent-width': parentWidth, 'parent-height': parentHeight, bindload, binderror } = props;
     const defaultStyle = {
@@ -56,7 +75,6 @@ const Image = forwardRef((props, ref) => {
         height: DEFAULT_IMAGE_HEIGHT
     };
     const styleObj = extendObject({}, defaultStyle, style, { overflow: 'hidden' });
-    const state = useRef({});
     const nodeRef = useRef(null);
     useNodesRef(props, ref, nodeRef, {
         defaultStyle
@@ -70,13 +88,19 @@ const Image = forwardRef((props, ref) => {
     const onLayout = ({ nativeEvent: { layout: { width, height } } }) => {
         state.current.viewWidth = width;
         state.current.viewHeight = height;
+        // 实际渲染尺寸可能会指定的值不一致，误差低于 0.5 则认为没有变化
+        if (Math.abs(viewHeight - height) < 0.5 && Math.abs(viewWidth - width) < 0.5) {
+            if (state.current.imageWidth && state.current.imageHeight && state.current.ratio) {
+                if (!loaded)
+                    setLoaded(true);
+            }
+            return;
+        }
         if (state.current.imageWidth && state.current.imageHeight && state.current.ratio) {
-            setViewWidth(width);
-            setViewHeight(height);
             setRatio(state.current.ratio);
             setImageWidth(state.current.imageWidth);
             setImageHeight(state.current.imageHeight);
-            state.current = {};
+            setViewSize(state.current.viewWidth, state.current.viewHeight, state.current.ratio);
             setLoaded(true);
         }
     };
@@ -96,43 +120,56 @@ const Image = forwardRef((props, ref) => {
     const [imageHeight, setImageHeight] = useState(0);
     const [ratio, setRatio] = useState(0);
     const [loaded, setLoaded] = useState(!isLayoutMode);
-    const fixedHeight = useMemo(() => {
-        const fixed = viewWidth * ratio;
-        return !fixed ? viewHeight : fixed;
-    }, [ratio, viewWidth, viewHeight]);
-    const fixedWidth = useMemo(() => {
-        if (!ratio)
-            return viewWidth;
-        const fixed = viewHeight / ratio;
-        return !fixed ? viewWidth : fixed;
-    }, [ratio, viewWidth, viewHeight]);
+    const state = useRef({
+        viewWidth,
+        viewHeight
+    });
+    function setViewSize(viewWidth, viewHeight, ratio) {
+        // 在特定模式下可预测 view 的变化，在onLayout触发时能以此避免重复render
+        switch (mode) {
+            case 'widthFix': {
+                setViewWidth(viewWidth);
+                const fixedHeight = getFixedHeight(viewWidth, viewHeight, ratio);
+                setViewHeight(fixedHeight);
+                break;
+            }
+            case 'heightFix': {
+                setViewHeight(viewHeight);
+                const fixedWidth = getFixedWidth(viewWidth, viewHeight, ratio);
+                setViewWidth(fixedWidth);
+                break;
+            }
+            default:
+                setViewHeight(viewHeight);
+                setViewWidth(viewWidth);
+                break;
+        }
+    }
     const modeStyle = useMemo(() => {
         if (noMeetCalcRule(isSvg, mode, viewWidth, viewHeight, ratio))
             return {};
         switch (mode) {
-            case 'scaleToFill':
+            case 'scaleToFill': // wx 中 svg 图片的 scaleToFill 模式效果与 aspectFit 一致，不会就行图片缩放，此处保持一致
             case 'aspectFit':
                 if (isSvg) {
-                    const scale = ratio <= 1
-                        ? imageWidth >= viewWidth ? viewWidth / imageWidth : imageWidth / viewWidth
-                        : imageHeight >= viewHeight ? viewHeight / imageHeight : imageHeight / viewHeight;
+                    const scale = getFitScale(imageWidth, imageHeight, viewWidth, viewHeight);
                     return {
                         transform: [
-                            { scale },
-                            ratio <= 1 ? { translateY: -(imageHeight * scale - viewHeight) / 2 / scale } : { translateX: -(imageWidth * scale - viewWidth) / 2 / scale }
+                            { translateY: relativeCenteredSize(viewHeight, imageHeight * scale) },
+                            { translateX: relativeCenteredSize(viewWidth, imageWidth * scale) },
+                            { scale }
                         ]
                     };
                 }
                 return {};
             case 'aspectFill':
                 if (isSvg) {
-                    const scale = ratio >= 1
-                        ? imageWidth >= viewWidth ? viewWidth / imageWidth : imageWidth / viewWidth
-                        : imageHeight >= viewHeight ? viewHeight / imageHeight : imageHeight / viewHeight;
+                    const scale = getFillScale(imageWidth, imageHeight, viewWidth, viewHeight);
                     return {
                         transform: [
-                            { scale },
-                            ratio >= 1 ? { translateY: -(imageHeight * scale - viewHeight) / 2 / scale } : { translateX: -(imageWidth * scale - viewWidth) / 2 / scale }
+                            { translateY: relativeCenteredSize(viewHeight, imageHeight * scale) },
+                            { translateX: relativeCenteredSize(viewWidth, imageWidth * scale) },
+                            { scale }
                         ]
                     };
                 }
@@ -140,9 +177,7 @@ const Image = forwardRef((props, ref) => {
             case 'widthFix':
             case 'heightFix':
                 if (isSvg) {
-                    const scale = ratio >= 1
-                        ? imageWidth >= fixedWidth ? fixedWidth / imageWidth : imageWidth / fixedWidth
-                        : imageHeight >= fixedHeight ? fixedHeight / imageHeight : imageHeight / fixedHeight;
+                    const scale = getFitScale(imageWidth, imageHeight, viewWidth, viewHeight);
                     return {
                         transform: [{ scale }]
                     };
@@ -205,12 +240,23 @@ const Image = forwardRef((props, ref) => {
             default:
                 return {};
         }
-    }, [isSvg, mode, viewWidth, viewHeight, imageWidth, imageHeight, ratio, fixedWidth, fixedHeight]);
+    }, [isSvg, mode, viewWidth, viewHeight, imageWidth, imageHeight, ratio]);
     const onSvgLoad = (evt) => {
         const { width, height } = evt.nativeEvent.layout;
-        setRatio(!width ? 0 : height / width);
-        setImageWidth(width);
+        state.current.imageHeight = height;
         setImageHeight(height);
+        state.current.ratio = !width ? 0 : height / width;
+        if (isWidthFixMode
+            ? state.current.viewWidth
+            : isHeightFixMode
+                ? state.current.viewHeight
+                : state.current.viewWidth && state.current.viewHeight) {
+            setRatio(state.current.ratio);
+            setImageWidth(width);
+            setImageHeight(height);
+            setViewSize(state.current.viewWidth, state.current.viewHeight, state.current.ratio);
+            setLoaded(true);
+        }
         bindload && bindload(getCustomEvent('load', evt, {
             detail: { width, height },
             layoutRef
@@ -248,12 +294,10 @@ const Image = forwardRef((props, ref) => {
                     : isHeightFixMode
                         ? state.current.viewHeight
                         : state.current.viewWidth && state.current.viewHeight) {
-                    state.current.viewWidth && setViewWidth(state.current.viewWidth);
-                    state.current.viewHeight && setViewHeight(state.current.viewHeight);
-                    setRatio(!width ? 0 : height / width);
+                    setRatio(state.current.ratio);
                     setImageWidth(width);
                     setImageHeight(height);
-                    state.current = {};
+                    setViewSize(state.current.viewWidth, state.current.viewHeight, state.current.ratio);
                     setLoaded(true);
                 }
             }, () => {
@@ -263,7 +307,7 @@ const Image = forwardRef((props, ref) => {
     }, [src, isSvg, isLayoutMode]);
     const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         ref: nodeRef,
-        style: extendObject({}, normalStyle, layoutStyle, isHeightFixMode ? { width: fixedWidth } : {}, isWidthFixMode ? { height: fixedHeight } : {})
+        style: extendObject({}, normalStyle, layoutStyle, isHeightFixMode ? { width: viewWidth } : {}, isWidthFixMode ? { height: viewHeight } : {})
     }), [
         'src',
         'mode',

package/lib/runtime/components/react/dist/mpx-inline-text.d.ts

@@ -0,0 +1,8 @@
+import { TextProps } from 'react-native';
+import { JSX } from 'react';
+declare const InlineText: {
+    (props: TextProps): JSX.Element;
+    displayName: string;
+};
+export default InlineText;
+//# sourceMappingURL=mpx-inline-text.d.ts.map

package/lib/runtime/components/react/dist/mpx-inline-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mpx-inline-text.d.ts","sourceRoot":"","sources":["../mpx-inline-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,SAAS,EAAE,MAAM,cAAc,CAAA;AAC9C,OAAO,EAAE,GAAG,EAAiB,MAAM,OAAO,CAAA;AAI1C,QAAA,MAAM,UAAU;YAAW,SAAS,GAAG,WAAW;;CAQjD,CAAA;AAID,eAAe,UAAU,CAAA"}

package/lib/runtime/components/react/dist/mpx-input.d.ts

@@ -0,0 +1,51 @@
+/// <reference types="react" />
+import { TextInput, TextStyle, ViewStyle, NativeSyntheticEvent, TextInputTextInputEventData, TextInputKeyPressEventData, TextInputContentSizeChangeEventData, FlexStyle, TextInputSelectionChangeEventData, TextInputFocusEventData, TextInputSubmitEditingEventData } from 'react-native';
+import { HandlerRef } from './useNodesRef';
+type InputStyle = Omit<TextStyle & ViewStyle & Pick<FlexStyle, 'minHeight'>, 'borderLeftWidth' | 'borderTopWidth' | 'borderRightWidth' | 'borderBottomWidth' | 'borderTopLeftRadius' | 'borderTopRightRadius' | 'borderBottomRightRadius' | 'borderBottomLeftRadius'>;
+type Type = 'text' | 'number' | 'idcard' | 'digit';
+type ConfirmType = 'done' | 'send' | 'search' | 'next' | 'go' | 'return';
+export interface InputProps {
+    name?: string;
+    style?: InputStyle & Record<string, any>;
+    value?: string | number;
+    type?: Type;
+    password?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    'cursor-spacing'?: number;
+    maxlength?: number;
+    'auto-focus'?: boolean;
+    focus?: boolean;
+    'confirm-type'?: ConfirmType;
+    'confirm-hold'?: boolean;
+    cursor?: number;
+    'cursor-color'?: string;
+    'selection-start'?: number;
+    'selection-end'?: number;
+    'placeholder-style'?: {
+        color?: string;
+    };
+    'enable-offset'?: boolean;
+    'enable-var'?: boolean;
+    'external-var-context'?: Record<string, any>;
+    'parent-font-size'?: number;
+    'parent-width'?: number;
+    'parent-height'?: number;
+    'adjust-position': boolean;
+    'hold-keyboard'?: boolean;
+    bindinput?: (evt: NativeSyntheticEvent<TextInputTextInputEventData> | unknown) => void;
+    bindfocus?: (evt: NativeSyntheticEvent<TextInputFocusEventData> | unknown) => void;
+    bindblur?: (evt: NativeSyntheticEvent<TextInputFocusEventData> | unknown) => void;
+    bindconfirm?: (evt: NativeSyntheticEvent<TextInputSubmitEditingEventData | TextInputKeyPressEventData> | unknown) => void;
+    bindselectionchange?: (evt: NativeSyntheticEvent<TextInputSelectionChangeEventData> | unknown) => void;
+}
+export interface PrivateInputProps {
+    allowFontScaling?: boolean;
+    multiline?: boolean;
+    'auto-height'?: boolean;
+    bindlinechange?: (evt: NativeSyntheticEvent<TextInputContentSizeChangeEventData> | unknown) => void;
+}
+type FinalInputProps = InputProps & PrivateInputProps;
+declare const Input: import("react").ForwardRefExoticComponent<InputProps & PrivateInputProps & import("react").RefAttributes<HandlerRef<TextInput, FinalInputProps>>>;
+export default Input;
+//# sourceMappingURL=mpx-input.d.ts.map

package/lib/runtime/components/react/dist/mpx-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mpx-input.d.ts","sourceRoot":"","sources":["../mpx-input.tsx"],"names":[],"mappings":"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"}

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

@@ -18,7 +18,7 @@
  * ✔ selection-start
  * ✔ selection-end
  * ✔ adjust-position
- * ✘ hold-keyboard
+ * ✔ hold-keyboard
  * ✘ safe-password-cert-path
  * ✘ safe-password-length
  * ✘ safe-password-time-stamp
@@ -52,7 +52,7 @@ const keyboardTypeMap = {
     digit: isIOS ? 'decimal-pad' : 'numeric'
 };
 const Input = forwardRef((props, ref) => {
-    const { style = {}, allowFontScaling = false, type = 'text', value, password, 'placeholder-style': placeholderStyle = {}, disabled, maxlength = 140, 'cursor-spacing': cursorSpacing = 0, 'auto-focus': autoFocus, focus, 'confirm-type': confirmType = 'done', 'confirm-hold': confirmHold = false, cursor, 'cursor-color': cursorColor, 'selection-start': selectionStart = -1, 'selection-end': selectionEnd = -1, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'adjust-position': adjustPosition = true, bindinput, bindfocus, bindblur, bindconfirm, bindselectionchange, 
+    const { style = {}, allowFontScaling = false, type = 'text', value, password, 'placeholder-style': placeholderStyle = {}, disabled, maxlength = 140, 'cursor-spacing': cursorSpacing = 0, 'auto-focus': autoFocus, focus, 'confirm-type': confirmType = 'done', 'confirm-hold': confirmHold = false, cursor, 'cursor-color': cursorColor, 'selection-start': selectionStart = -1, 'selection-end': selectionEnd = -1, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'adjust-position': adjustPosition = true, 'hold-keyboard': holdKeyboard = false, bindinput, bindfocus, bindblur, bindconfirm, bindselectionchange, 
     // private
     multiline, 'auto-height': autoHeight, bindlinechange } = props;
     const formContext = useContext(FormContext);
@@ -144,8 +144,8 @@ const Input = forwardRef((props, ref) => {
         }
     };
     const setKeyboardAvoidContext = () => {
-        if (adjustPosition && keyboardAvoid) {
-            keyboardAvoid.current = { cursorSpacing, ref: nodeRef };
+        if (keyboardAvoid) {
+            keyboardAvoid.current = { cursorSpacing, ref: nodeRef, adjustPosition, holdKeyboard };
         }
     };
     const onTouchStart = () => {
@@ -156,13 +156,39 @@ const Input = forwardRef((props, ref) => {
         evt.nativeEvent.origin = 'input';
     };
     const onFocus = (evt) => {
-        setKeyboardAvoidContext();
-        bindfocus && bindfocus(getCustomEvent('focus', evt, {
-            detail: {
-                value: tmpValue.current || ''
-            },
-            layoutRef
-        }, props));
+        if (!keyboardAvoid?.current) {
+            setKeyboardAvoidContext();
+        }
+        if (bindfocus) {
+            const focusAction = () => {
+                bindfocus(getCustomEvent('focus', evt, {
+                    detail: {
+                        value: tmpValue.current || '',
+                        height: keyboardAvoid?.current?.keyboardHeight
+                    },
+                    layoutRef
+                }, props));
+                if (keyboardAvoid?.current?.onKeyboardShow) {
+                    keyboardAvoid.current.onKeyboardShow = undefined;
+                }
+            };
+            if (keyboardAvoid?.current) {
+                // 有 keyboardAvoiding
+                if (keyboardAvoid.current.keyboardHeight) {
+                    // iOS: keyboard 获取高度时机 keyboardWillShow 在 input focus 之前，可以立即执行
+                    focusAction();
+                }
+                else {
+                    // Android,Harmony: keyboard 获取高度时机 keyboardDidShow 在 input focus 之后，需要延迟回调
+                    evt.persist();
+                    keyboardAvoid.current.onKeyboardShow = focusAction;
+                }
+            }
+            else {
+                // 无 keyboardAvoiding，直接执行 focus 回调
+                focusAction();
+            }
+        }
     };
     const onBlur = (evt) => {
         bindblur && bindblur(getCustomEvent('blur', evt, {

package/lib/runtime/components/react/dist/mpx-keyboard-avoiding-view.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactNode } from 'react';
+import { ViewStyle } from 'react-native';
+type KeyboardAvoidViewProps = {
+    children?: ReactNode;
+    style?: ViewStyle;
+    contentContainerStyle?: ViewStyle;
+};
+declare const KeyboardAvoidingView: {
+    ({ children, style, contentContainerStyle }: KeyboardAvoidViewProps): React.JSX.Element;
+    displayName: string;
+};
+export default KeyboardAvoidingView;
+//# sourceMappingURL=mpx-keyboard-avoiding-view.d.ts.map

package/lib/runtime/components/react/dist/mpx-keyboard-avoiding-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mpx-keyboard-avoiding-view.d.ts","sourceRoot":"","sources":["../mpx-keyboard-avoiding-view.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAiC,MAAM,OAAO,CAAA;AACvE,OAAO,EAAuD,SAAS,EAA0C,MAAM,cAAc,CAAA;AAKrI,KAAK,sBAAsB,GAAG;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,qBAAqB,CAAC,EAAE,SAAS,CAAA;CAClC,CAAA;AAED,QAAA,MAAM,oBAAoB;iDAAgD,sBAAsB;;CAiH/F,CAAA;AAID,eAAe,oBAAoB,CAAA"}

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

@@ -1,92 +1,103 @@
-import React, { useContext, useEffect } from 'react';
+/* eslint-disable space-before-function-paren */
+import React, { useContext, useEffect, useRef } from 'react';
 import { Keyboard, View } from 'react-native';
-import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing, cancelAnimation } from 'react-native-reanimated';
 import { KeyboardAvoidContext } from './context';
-import { isIOS } from './utils';
+import { isAndroid, isIOS } from './utils';
 const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
     const duration = isIOS ? 250 : 300;
     const easing = isIOS ? Easing.inOut(Easing.ease) : Easing.out(Easing.quad);
     const offset = useSharedValue(0);
     const basic = useSharedValue('auto');
     const keyboardAvoid = useContext(KeyboardAvoidContext);
+    // fix: 某些特殊机型下隐藏键盘可能会先触发一次 keyboardWillShow，
+    // 比如机型 iPhone 11 Pro，可能会导致显隐动画冲突
+    // 因此增加状态标记 + cancelAnimation 来优化
+    const isShow = useRef(false);
     const animatedStyle = useAnimatedStyle(() => ({
-        transform: [{ translateY: -offset.value }],
+        // translate/position top可能会导致底部渲染区域缺失
+        marginTop: -offset.value,
         flexBasis: basic.value
     }));
     const resetKeyboard = () => {
+        if (!isShow.current) {
+            return;
+        }
+        isShow.current = false;
         if (keyboardAvoid?.current) {
+            const inputRef = keyboardAvoid.current.ref?.current;
+            if (inputRef && inputRef.isFocused()) {
+                // 修复 Android 点击键盘收起按钮时当前 input 没触发失焦的问题
+                inputRef.blur();
+            }
             keyboardAvoid.current = null;
         }
+        cancelAnimation(offset);
         offset.value = withTiming(0, { duration, easing });
         basic.value = 'auto';
     };
     const onTouchEnd = ({ nativeEvent }) => {
         if (nativeEvent.origin !== 'input') {
+            if (keyboardAvoid?.current?.holdKeyboard) {
+                return;
+            }
             Keyboard.isVisible() && Keyboard.dismiss();
         }
     };
     useEffect(() => {
         let subscriptions = [];
-        if (isIOS) {
-            subscriptions = [
-                Keyboard.addListener('keyboardWillShow', (evt) => {
-                    if (!keyboardAvoid?.current)
-                        return;
-                    const { endCoordinates } = evt;
-                    const { ref, cursorSpacing = 0 } = keyboardAvoid.current;
-                    setTimeout(() => {
-                        ref?.current?.measure((x, y, width, height, pageX, pageY) => {
+        function keybaordAvoding(evt) {
+            if (!keyboardAvoid?.current || isShow.current) {
+                return;
+            }
+            isShow.current = true;
+            const { endCoordinates } = evt;
+            const { ref, cursorSpacing = 0, adjustPosition, onKeyboardShow } = keyboardAvoid.current;
+            keyboardAvoid.current.keyboardHeight = endCoordinates.height;
+            onKeyboardShow?.();
+            if (adjustPosition) {
+                // 默认沿用旧版本逻辑，在 android 原生关闭键盘避让的情况下应该将该配置设置为 false，走 mpx 的键盘避让逻辑，否则bundle内的所有input都会无法避让键盘
+                const enableNativeKeyboardAvoiding = mpxGlobal?.__mpx?.config?.rnConfig?.enableNativeKeyboardAvoiding ?? true;
+                const callback = () => {
+                    ref?.current?.measure((x, y, width, height, pageX, pageY) => {
+                        function calculateOffset() {
+                            // enableNativeKeyboardAvoding 默认开启
+                            if (enableNativeKeyboardAvoiding && isAndroid) {
+                                const aboveOffset = pageY + height - endCoordinates.screenY;
+                                const belowOffset = endCoordinates.height - aboveOffset;
+                                const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing;
+                                const belowValue = Math.min(belowOffset, cursorSpacing);
+                                return aboveOffset > 0 ? belowValue : aboveValue;
+                            }
                             const aboveOffset = offset.value + pageY + height - endCoordinates.screenY;
                             const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing;
                             const belowValue = Math.min(endCoordinates.height, aboveOffset + cursorSpacing);
-                            const value = aboveOffset > 0 ? belowValue : aboveValue;
-                            offset.value = withTiming(value, { duration, easing }, (finished) => {
-                                if (finished) {
-                                    // Set flexBasic after animation to trigger re-layout and reset layout information
-                                    basic.value = '99.99%';
-                                }
-                            });
-                        });
-                    });
-                }),
-                Keyboard.addListener('keyboardWillHide', resetKeyboard)
-            ];
-        }
-        else {
-            subscriptions = [
-                Keyboard.addListener('keyboardDidShow', (evt) => {
-                    if (!keyboardAvoid?.current)
-                        return;
-                    const { endCoordinates } = evt;
-                    const { ref, cursorSpacing = 0 } = keyboardAvoid.current;
-                    ref?.current?.measure((x, y, width, height, pageX, pageY) => {
-                        const aboveOffset = pageY + height - endCoordinates.screenY;
-                        const belowOffset = endCoordinates.height - aboveOffset;
-                        const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing;
-                        const belowValue = Math.min(belowOffset, cursorSpacing);
-                        const value = aboveOffset > 0 ? belowValue : aboveValue;
-                        offset.value = withTiming(value, { duration, easing }, (finished) => {
+                            return aboveOffset > 0 ? belowValue : aboveValue;
+                        }
+                        cancelAnimation(offset);
+                        offset.value = withTiming(calculateOffset(), { duration, easing }, finished => {
                             if (finished) {
                                 // Set flexBasic after animation to trigger re-layout and reset layout information
                                 basic.value = '99.99%';
                             }
                         });
                     });
-                }),
-                Keyboard.addListener('keyboardDidHide', resetKeyboard)
-            ];
+                };
+                (isIOS ? () => setTimeout(callback) : callback)();
+            }
+        }
+        if (isIOS) {
+            subscriptions = [Keyboard.addListener('keyboardWillShow', keybaordAvoding), Keyboard.addListener('keyboardWillHide', resetKeyboard)];
+        }
+        else {
+            subscriptions = [Keyboard.addListener('keyboardDidShow', keybaordAvoding), Keyboard.addListener('keyboardDidHide', resetKeyboard)];
         }
         return () => {
             subscriptions.forEach(subscription => subscription.remove());
         };
     }, [keyboardAvoid]);
-    return (<View style={style} onTouchEnd={onTouchEnd}>
-      <Animated.View style={[
-            contentContainerStyle,
-            animatedStyle
-        ]}>
-        {children}
-      </Animated.View>
+    return (<View style={style} onTouchEnd={onTouchEnd} onTouchMove={onTouchEnd}>
+      <Animated.View style={[contentContainerStyle, animatedStyle]}>{children}</Animated.View>
     </View>);
 };
 KeyboardAvoidingView.displayName = 'MpxKeyboardAvoidingView';

package/lib/runtime/components/react/dist/mpx-label.d.ts

@@ -0,0 +1,21 @@
+/**
+ * ✘ for
+ */
+import { ReactNode } from 'react';
+import { View, ViewStyle, NativeSyntheticEvent } from 'react-native';
+import { HandlerRef } from './useNodesRef';
+export interface LabelProps {
+    for?: string;
+    style?: ViewStyle & Record<string, any>;
+    'enable-offset'?: boolean;
+    'enable-var'?: boolean;
+    'external-var-context'?: Record<string, any>;
+    'parent-font-size'?: number;
+    'parent-width'?: number;
+    'parent-height'?: number;
+    children: ReactNode;
+    bindtap?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void;
+}
+declare const Label: import("react").ForwardRefExoticComponent<LabelProps & import("react").RefAttributes<HandlerRef<View, LabelProps>>>;
+export default Label;
+//# sourceMappingURL=mpx-label.d.ts.map

package/lib/runtime/components/react/dist/mpx-label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mpx-label.d.ts","sourceRoot":"","sources":["../mpx-label.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAA2B,SAAS,EAA8B,MAAM,OAAO,CAAA;AACtF,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAA;AAGpE,OAAoB,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAKvD,MAAM,WAAW,UAAU;IACzB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACvC,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,sBAAsB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC5C,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,QAAQ,EAAE,SAAS,CAAA;IACnB,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,oBAAoB,CAAC,UAAU,CAAC,GAAG,OAAO,KAAK,IAAI,CAAA;CACpE;AAED,QAAA,MAAM,KAAK,qHA0FV,CAAA;AAID,eAAe,KAAK,CAAA"}

package/lib/runtime/components/react/dist/mpx-movable-area.d.ts

@@ -0,0 +1,21 @@
+/**
+ * ✘ scale-area
+ */
+import { View } from 'react-native';
+import { ReactNode } from 'react';
+import { HandlerRef } from './useNodesRef';
+interface MovableAreaProps {
+    style?: Record<string, any>;
+    children: ReactNode;
+    width?: number;
+    height?: number;
+    'enable-offset'?: boolean;
+    'enable-var'?: boolean;
+    'external-var-context'?: Record<string, any>;
+    'parent-font-size'?: number;
+    'parent-width'?: number;
+    'parent-height'?: number;
+}
+declare const _MovableArea: import("react").ForwardRefExoticComponent<MovableAreaProps & import("react").RefAttributes<HandlerRef<View, MovableAreaProps>>>;
+export default _MovableArea;
+//# sourceMappingURL=mpx-movable-area.d.ts.map

package/lib/runtime/components/react/dist/mpx-movable-area.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mpx-movable-area.d.ts","sourceRoot":"","sources":["../mpx-movable-area.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACnC,OAAO,EAAmB,SAAS,EAAkC,MAAM,OAAO,CAAA;AAClF,OAAoB,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAMvD,UAAU,gBAAgB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,QAAQ,EAAE,SAAS,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,sBAAsB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC5C,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB;AAED,QAAA,MAAM,YAAY,iIAsDhB,CAAA;AAIF,eAAe,YAAY,CAAA"}

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

@@ -0,0 +1,66 @@
+/**
+ * ✔ direction
+ * ✔ inertia
+ * ✔ out-of-bounds
+ * ✔ x
+ * ✔ y
+ * ✔ damping
+ * ✔ friction
+ * ✔ disabled
+ * ✘ scale
+ * ✘ scale-min
+ * ✘ scale-max
+ * ✘ scale-value
+ * ✔ animation
+ * ✔ bindchange
+ * ✘ bindscale
+ * ✔ htouchmove
+ * ✔ vtouchmove
+ */
+import { ReactNode } from 'react';
+import { View, LayoutChangeEvent } from 'react-native';
+import { HandlerRef } from './useNodesRef';
+import { GestureHandler } from './utils';
+import { GestureTouchEvent } from 'react-native-gesture-handler';
+interface MovableViewProps {
+    children: ReactNode;
+    style?: Record<string, any>;
+    direction: 'all' | 'vertical' | 'horizontal' | 'none';
+    x?: number;
+    y?: number;
+    disabled?: boolean;
+    animation?: boolean;
+    damping?: number;
+    friction?: number;
+    id?: string;
+    changeThrottleTime?: number;
+    bindchange?: (event: unknown) => void;
+    bindtouchstart?: (event: GestureTouchEvent) => void;
+    catchtouchstart?: (event: GestureTouchEvent) => void;
+    bindtouchmove?: (event: GestureTouchEvent) => void;
+    catchtouchmove?: (event: GestureTouchEvent) => void;
+    catchtouchend?: (event: GestureTouchEvent) => void;
+    bindtouchend?: (event: GestureTouchEvent) => void;
+    bindhtouchmove?: (event: GestureTouchEvent) => void;
+    bindvtouchmove?: (event: GestureTouchEvent) => void;
+    catchhtouchmove?: (event: GestureTouchEvent) => void;
+    catchvtouchmove?: (event: GestureTouchEvent) => void;
+    bindlongpress?: (event: GestureTouchEvent) => void;
+    catchlongpress?: (event: GestureTouchEvent) => void;
+    bindtap?: (event: GestureTouchEvent) => void;
+    catchtap?: (event: GestureTouchEvent) => void;
+    onLayout?: (event: LayoutChangeEvent) => void;
+    'out-of-bounds'?: boolean;
+    'wait-for'?: Array<GestureHandler>;
+    'simultaneous-handlers'?: Array<GestureHandler>;
+    inertia?: boolean;
+    'enable-var'?: boolean;
+    'external-var-context'?: Record<string, any>;
+    'parent-font-size'?: number;
+    'parent-width'?: number;
+    'parent-height'?: number;
+    'disable-event-passthrough'?: boolean;
+}
+declare const _MovableView: import("react").ForwardRefExoticComponent<MovableViewProps & import("react").RefAttributes<HandlerRef<View, MovableViewProps>>>;
+export default _MovableView;
+//# sourceMappingURL=mpx-movable-view.d.ts.map