@mpxjs/webpack-plugin 2.10.7 → 2.10.8-beta.3

package/lib/runtime/components/react/dist/parser.d.ts

@@ -0,0 +1,39 @@
+interface Token {
+    type: string;
+    value: string | number;
+}
+interface ExpressionNode {
+    type: 'NUMBER';
+    value: number;
+}
+export declare class ExpressionParser {
+    private tokens;
+    private formatter;
+    private functions;
+    private current;
+    constructor(input: string, formatter?: (val: string) => number, functions?: {
+        [key: string]: (...args: number[]) => number;
+    });
+    tokenize(input: string): Token[];
+    parse(): ExpressionNode;
+    private expression;
+    private term;
+    private factor;
+    private parseArguments;
+    private applyOperator;
+    private applyFunction;
+}
+interface FuncInfo {
+    start: number;
+    end: number;
+    args: string[];
+}
+export declare function parseFunc(str: string, funcName: string): FuncInfo[];
+export declare class ReplaceSource {
+    private _source;
+    private _replacements;
+    constructor(source: string);
+    replace(start: number, end: number, content: string): void;
+    source(): string;
+}
+export {};

package/lib/runtime/components/react/dist/useAnimationHooks.d.ts

@@ -0,0 +1,32 @@
+import type { MutableRefObject } from 'react';
+import type { NativeSyntheticEvent } from 'react-native';
+import { ExtendedViewStyle } from './types/common';
+import type { _ViewProps } from './mpx-view';
+type AnimatedOption = {
+    duration: number;
+    delay: number;
+    useNativeDriver: boolean;
+    timingFunction: 'linear' | 'ease' | 'ease-in' | 'ease-in-out' | 'ease-out';
+    transformOrigin: string;
+};
+export type AnimationStepItem = {
+    animatedOption: AnimatedOption;
+    rules: Map<string, number | string>;
+    transform: Map<string, number>;
+};
+export type AnimationProp = {
+    id: number;
+    actions: AnimationStepItem[];
+};
+export default function useAnimationHooks<T, P>(props: _ViewProps & {
+    enableAnimation?: boolean;
+    layoutRef: MutableRefObject<any>;
+    transitionend?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void;
+}): {
+    enableStyleAnimation: boolean;
+    animationStyle?: undefined;
+} | {
+    enableStyleAnimation: true;
+    animationStyle: ExtendedViewStyle;
+};
+export {};

package/lib/runtime/components/react/dist/useNavShared.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function useNavShared(): readonly [import("react").ReactNode, (value: import("react").ReactNode) => void];

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

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import { NavSharedContext } from './context';
+export function useNavShared() {
+    const navSharedValue = useContext(NavSharedContext);
+    return [navSharedValue.customNav, navSharedValue.setCustomNav];
+}

package/lib/runtime/components/react/dist/useNodesRef.d.ts

@@ -0,0 +1,11 @@
+import { RefObject, ForwardedRef } from 'react';
+type Obj = Record<string, any>;
+export type HandlerRef<T, P> = {
+    getNodeInstance(): {
+        props: RefObject<P>;
+        nodeRef: RefObject<T>;
+        instance: Obj;
+    };
+};
+export default function useNodesRef<T, P>(props: P, ref: ForwardedRef<HandlerRef<T, P>>, nodeRef: RefObject<T>, instance?: Obj): void;
+export {};

package/lib/runtime/components/react/dist/utils.d.ts

@@ -0,0 +1,121 @@
+import { ReactNode, ReactElement, Dispatch, SetStateAction } from 'react';
+import { LayoutChangeEvent, TextStyle, ImageProps } from 'react-native';
+import { FastImageProps } from '@d11/react-native-fast-image';
+import type { AnyFunc } from './types/common';
+export declare const TEXT_STYLE_REGEX: RegExp;
+export declare const PERCENT_REGEX: RegExp;
+export declare const URL_REGEX: RegExp;
+export declare const SVG_REGEXP: RegExp;
+export declare const BACKGROUND_REGEX: RegExp;
+export declare const TEXT_PROPS_REGEX: RegExp;
+export declare const DEFAULT_FONT_SIZE = 16;
+export declare const HIDDEN_STYLE: {
+    opacity: number;
+};
+export declare const isIOS: boolean;
+export declare const isAndroid: boolean;
+export declare const isHarmony: boolean;
+export declare function useNavigation(): Record<string, any> | undefined;
+export declare function omit<T, K extends string>(obj: T, fields: K[]): Omit<T, K>;
+/**
+ * 用法等同于 useEffect，但是会忽略首次执行，只在依赖更新时执行
+ */
+export declare const useUpdateEffect: (effect: any, deps: any) => void;
+export declare const parseUrl: (cssUrl?: string) => string | undefined;
+export declare const getRestProps: (transferProps?: any, originProps?: any, deletePropsKey?: any) => any;
+export declare function isText(ele: ReactNode): ele is ReactElement;
+export declare function every(children: ReactNode, callback: (children: ReactNode) => boolean): boolean;
+type GroupData<T> = Record<string, Partial<T>>;
+export declare function groupBy<T extends Record<string, any>>(obj: T, callback: (key: string, val: T[keyof T]) => string, group?: GroupData<T>): GroupData<T>;
+export declare function splitStyle<T extends Record<string, any>>(styleObj: T): {
+    textStyle?: Partial<T>;
+    backgroundStyle?: Partial<T>;
+    innerStyle?: Partial<T>;
+};
+interface TransformStyleConfig {
+    enableVar?: boolean;
+    externalVarContext?: Record<string, any>;
+    parentFontSize?: number;
+    parentWidth?: number;
+    parentHeight?: number;
+}
+export declare function useTransformStyle(styleObj: Record<string, any> | undefined, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight }: TransformStyleConfig): {
+    hasVarDec: boolean;
+    varContextRef: import("react").MutableRefObject<{}>;
+    setWidth: Dispatch<SetStateAction<number>>;
+    setHeight: Dispatch<SetStateAction<number>>;
+    normalStyle: Record<string, any>;
+    hasSelfPercent: boolean;
+    hasPositionFixed: boolean;
+};
+export interface VisitorArg {
+    target: Record<string, any>;
+    key: string;
+    value: any;
+    keyPath: Array<string>;
+}
+export declare function traverseStyle(styleObj: Record<string, any>, visitors: Array<(arg: VisitorArg) => void>): void;
+export declare function setStyle(styleObj: Record<string, any>, keyPath: Array<string>, setter: (arg: VisitorArg) => void): void;
+export declare function splitProps<T extends Record<string, any>>(props: T): {
+    textProps?: Partial<T>;
+    innerProps?: Partial<T>;
+};
+interface LayoutConfig {
+    props: Record<string, any>;
+    hasSelfPercent: boolean;
+    setWidth?: Dispatch<SetStateAction<number>>;
+    setHeight?: Dispatch<SetStateAction<number>>;
+    onLayout?: (event?: LayoutChangeEvent) => void;
+    nodeRef: React.RefObject<any>;
+}
+export declare const useLayout: ({ props, hasSelfPercent, setWidth, setHeight, onLayout, nodeRef }: LayoutConfig) => {
+    layoutRef: import("react").MutableRefObject<{}>;
+    layoutStyle: {};
+    layoutProps: Record<string, any>;
+};
+export interface WrapChildrenConfig {
+    hasVarDec: boolean;
+    varContext?: Record<string, any>;
+    textStyle?: TextStyle;
+    textProps?: Record<string, any>;
+}
+export declare function wrapChildren(props: Record<string, any> | undefined, { hasVarDec, varContext, textStyle, textProps }: WrapChildrenConfig): any;
+export declare const debounce: <T extends AnyFunc>(func: T, delay: number) => ((...args: Parameters<T>) => void) & {
+    clear: () => void;
+};
+export declare const useDebounceCallback: <T extends AnyFunc>(func: T, delay: number) => ((...args: Parameters<T>) => void) & {
+    clear: () => void;
+};
+export declare const useStableCallback: <T extends AnyFunc | null | undefined>(callback: T) => T extends AnyFunc ? T : () => void;
+export declare function usePrevious<T>(value: T): T | undefined;
+export interface GestureHandler {
+    nodeRefs?: Array<{
+        getNodeInstance: () => {
+            nodeRef: unknown;
+        };
+    }>;
+    current?: unknown;
+}
+export declare function flatGesture(gestures?: Array<GestureHandler>): any[];
+export declare const extendObject: {
+    <T extends {}, U>(target: T, source: U): T & U;
+    <T_1 extends {}, U_1, V>(target: T_1, source1: U_1, source2: V): T_1 & U_1 & V;
+    <T_2 extends {}, U_2, V_1, W>(target: T_2, source1: U_2, source2: V_1, source3: W): T_2 & U_2 & V_1 & W;
+    (target: object, ...sources: any[]): any;
+};
+export declare function getCurrentPage(pageId: number | null | undefined): any;
+export declare function renderImage(imageProps: ImageProps | FastImageProps, enableFastImage?: boolean): ReactElement<ImageProps | FastImageProps, string | import("react").JSXElementConstructor<any>>;
+export declare function pickStyle(styleObj: Record<string, any> | undefined, pickedKeys: Array<string>, callback?: (key: string, val: number | string) => number | string): Record<string, any>;
+export declare function useHover({ enableHover, hoverStartTime, hoverStayTime, disabled }: {
+    enableHover: boolean;
+    hoverStartTime: number;
+    hoverStayTime: number;
+    disabled?: boolean;
+}): {
+    isHover: boolean;
+    gesture?: undefined;
+} | {
+    isHover: boolean;
+    gesture: import("react-native-gesture-handler/lib/typescript/handlers/gestures/panGesture").PanGesture;
+};
+export {};

package/lib/runtime/components/react/mpx-async-suspense.tsx

@@ -0,0 +1,180 @@
+import { useState, ComponentType, useEffect, useCallback, useRef, ReactNode, createElement } from 'react'
+import { View, Image, StyleSheet, Text, TouchableOpacity } from 'react-native'
+import FastImage from '@d11/react-native-fast-image'
+
+const asyncChunkMap = new Map()
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 20,
+    backgroundColor: '#fff'
+  },
+  loadingImage: {
+    width: 100,
+    height: 100,
+    marginTop: 220,
+    alignSelf: 'center'
+  },
+  buttonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '500',
+    textAlign: 'center'
+  },
+  errorImage: {
+    marginTop: 80,
+    width: 220,
+    aspectRatio: 1,
+    alignSelf: 'center'
+  },
+  errorText: {
+    fontSize: 16,
+    textAlign: 'center',
+    color: '#333',
+    marginBottom: 20
+  },
+  retryButton: {
+    position: 'absolute',
+    bottom: 54,
+    left: 20,
+    right: 20,
+    backgroundColor: '#fff',
+    paddingVertical: 15,
+    borderRadius: 30,
+    marginTop: 40,
+    borderWidth: 1,
+    borderColor: '#FF5F00'
+  },
+  retryButtonText: {
+    color: '#FF5F00',
+    fontSize: 16,
+    fontWeight: '500',
+    textAlign: 'center'
+  }
+})
+
+interface DefaultFallbackProps {
+  onReload: () => void
+}
+
+const DefaultFallback = ({ onReload }: DefaultFallbackProps) => {
+  return (
+    <View style={styles.container}>
+      <Image
+        source={{
+          uri: 'https://dpubstatic.udache.com/static/dpubimg/Vak5mZvezPpKV5ZJI6P9b_drn-fallbak.png'
+        }}
+        style={styles.errorImage}
+        resizeMode="contain"
+      />
+      <Text style={styles.errorText}>网络出了点问题，请查看网络环境</Text>
+      <TouchableOpacity
+        style={styles.retryButton}
+        onPress={onReload}
+        activeOpacity={0.7}
+      >
+        <Text style={styles.retryButtonText}>点击重试</Text>
+      </TouchableOpacity>
+    </View>
+  )
+}
+
+const DefaultLoading = () => {
+  return (
+    <View style={styles.container}>
+      <FastImage
+        style={styles.loadingImage}
+        source={{
+          uri: 'https://dpubstatic.udache.com/static/dpubimg/439jiCVOtNOnEv9F2LaDs_loading.gif'
+        }}
+        resizeMode={FastImage.resizeMode.contain}
+      ></FastImage>
+    </View>
+  )
+}
+
+interface AsyncSuspenseProps {
+  type: 'component' | 'page'
+  chunkName: string
+  moduleId: string
+  innerProps: any,
+  loading?: ComponentType<unknown>
+  fallback?: ComponentType<unknown>
+  getChildren: () => Promise<ReactNode>
+}
+
+type ComponentStauts = 'pending' | 'error' | 'loaded'
+
+const AsyncSuspense: React.FC<AsyncSuspenseProps> = ({
+  type,
+  innerProps,
+  chunkName,
+  moduleId,
+  loading,
+  fallback,
+  getChildren
+}) => {
+  const [status, setStatus] = useState<ComponentStauts>('pending')
+  const chunkLoaded = asyncChunkMap.has(moduleId)
+  const loadChunkPromise = useRef<null | Promise<ReactNode>>(null)
+
+  const reloadPage = useCallback(() => {
+    setStatus('pending')
+  }, [])
+
+  useEffect(() => {
+    let cancelled = false
+    if (!chunkLoaded && status === 'pending') {
+      if (loadChunkPromise.current) {
+        loadChunkPromise
+          .current.then((res: ReactNode) => {
+            if (cancelled) return
+            asyncChunkMap.set(moduleId, res)
+            setStatus('loaded')
+          })
+          .catch((e) => {
+            if (cancelled) return
+            if (type === 'component') {
+              global.onLazyLoadError({
+                type: 'subpackage',
+                subpackage: [chunkName],
+                errMsg: `loadSubpackage: ${e.type}`
+              })
+            }
+            loadChunkPromise.current = null
+            setStatus('error')
+          })
+      }
+    }
+
+    return () => {
+      cancelled = true
+    }
+  }, [status])
+
+  if (chunkLoaded) {
+    const Comp = asyncChunkMap.get(moduleId)
+    return createElement(Comp, innerProps)
+  } else if (status === 'error') {
+    if (type === 'page') {
+      fallback = fallback || DefaultFallback
+      return createElement(fallback as ComponentType<DefaultFallbackProps>, { onReload: reloadPage })
+    } else {
+      return fallback ? createElement(fallback, innerProps) : null
+    }
+  } else {
+    if (!loadChunkPromise.current) {
+      loadChunkPromise.current = getChildren()
+    }
+    if (type === 'page') {
+      return createElement(loading || DefaultLoading)
+    } else {
+      return fallback ? createElement(fallback, innerProps) : null
+    }
+  }
+}
+
+AsyncSuspense.displayName = 'MpxAsyncSuspense'
+
+export default AsyncSuspense

package/lib/runtime/components/react/mpx-button.tsx

@@ -42,7 +42,8 @@ import {
   TextStyle,
   Animated,
   Easing,
-  NativeSyntheticEvent
+  NativeSyntheticEvent,
+  useAnimatedValue
 } from 'react-native'
 import { warn } from '@mpxjs/utils'
 import { GestureDetector, PanGesture } from 'react-native-gesture-handler'
@@ -157,7 +158,7 @@ const timer = (data: any, time = 3000) => new Promise((resolve) => {
 })
 
 const Loading = ({ alone = false }: { alone: boolean }): JSX.Element => {
-  const image = useRef(new Animated.Value(0)).current
+  const image = useAnimatedValue(0)
 
   const rotate = image.interpolate({
     inputRange: [0, 1],

package/lib/runtime/components/react/mpx-input.tsx

@@ -280,8 +280,8 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
   }
 
   const setKeyboardAvoidContext = () => {
-    if (adjustPosition && keyboardAvoid) {
-      keyboardAvoid.current = { cursorSpacing, ref: nodeRef }
+    if (keyboardAvoid) {
+      keyboardAvoid.current = { cursorSpacing, ref: nodeRef, adjustPosition }
     }
   }
 
@@ -295,20 +295,39 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
   }
 
   const onFocus = (evt: NativeSyntheticEvent<TextInputFocusEventData>) => {
-    setKeyboardAvoidContext()
-    bindfocus && bindfocus(
-      getCustomEvent(
-        'focus',
-        evt,
-        {
-          detail: {
-            value: tmpValue.current || ''
-          },
-          layoutRef
-        },
-        props
-      )
-    )
+    if (!keyboardAvoid?.current) {
+      setKeyboardAvoidContext()
+    }
+
+    if (bindfocus && keyboardAvoid?.current) {
+      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.keyboardHeight) {
+        // iOS: keyboard 获取高度时机 keyboardWillShow 在 input focus 之前，可以立即执行
+        focusAction()
+      } else {
+        // Android,Harmony: keyboard 获取高度时机 keyboardDidShow 在 input focus 之后，需要延迟回调
+        evt.persist()
+        keyboardAvoid.current.onKeyboardShow = focusAction
+      }
+    }
   }
 
   const onBlur = (evt: NativeSyntheticEvent<TextInputFocusEventData>) => {

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

@@ -1,6 +1,6 @@
 import React, { ReactNode, useContext, useEffect } from 'react'
 import { DimensionValue, EmitterSubscription, Keyboard, View, ViewStyle, NativeSyntheticEvent, NativeTouchEvent } 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'
 
@@ -13,18 +13,31 @@ type KeyboardAvoidViewProps = {
 const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: KeyboardAvoidViewProps) => {
   const duration = isIOS ? 250 : 300
   const easing = isIOS ? Easing.inOut(Easing.ease) : Easing.out(Easing.quad)
+  const isShow = React.useRef(false)
 
   const offset = useSharedValue(0)
   const basic = useSharedValue('auto')
   const keyboardAvoid = useContext(KeyboardAvoidContext)
 
   const animatedStyle = useAnimatedStyle(() => ({
-    transform: [{ translateY: -offset.value }],
+    // translate/position top可能会导致地步渲染区域缺失
+    marginTop: -offset.value,
     flexBasis: basic.value as DimensionValue
   }))
 
   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
     }
     offset.value = withTiming(0, { duration, easing })
@@ -40,49 +53,44 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
   useEffect(() => {
     let subscriptions: EmitterSubscription[] = []
 
-    if (isIOS) {
-      subscriptions = [
-        Keyboard.addListener('keyboardWillShow', (evt: any) => {
-          if (!keyboardAvoid?.current) return
-          const { endCoordinates } = evt
-          const { ref, cursorSpacing = 0 } = keyboardAvoid.current
-          setTimeout(() => {
-            ref?.current?.measure((x: number, y: number, width: number, height: number, pageX: number, pageY: number) => {
-              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: any) => {
-          if (!keyboardAvoid?.current) return
-          const { endCoordinates } = evt
-          const { ref, cursorSpacing = 0 } = keyboardAvoid.current
+    function keybaordAvoding(evt: any) {
+      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) {
+        setTimeout(() => {
           ref?.current?.measure((x: number, y: number, width: number, height: number, pageX: number, pageY: number) => {
-            const aboveOffset = pageY + height - endCoordinates.screenY
-            const belowOffset = endCoordinates.height - aboveOffset
+            const aboveOffset = offset.value + pageY + height - endCoordinates.screenY
             const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing
-            const belowValue = Math.min(belowOffset, cursorSpacing)
+            const belowValue = Math.min(endCoordinates.height, aboveOffset + cursorSpacing)
             const value = aboveOffset > 0 ? belowValue : aboveValue
-            offset.value = withTiming(value, { duration, easing }, (finished) => {
+            cancelAnimation(offset)
+            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%'
               }
             })
           })
-        }),
+        })
+      }
+    }
+
+    if (isIOS) {
+      subscriptions = [
+        Keyboard.addListener('keyboardWillShow', keybaordAvoding),
+        Keyboard.addListener('keyboardWillHide', resetKeyboard)
+      ]
+    } else {
+      subscriptions = [
+        Keyboard.addListener('keyboardDidShow', keybaordAvoding),
         Keyboard.addListener('keyboardDidHide', resetKeyboard)
       ]
     }
@@ -93,15 +101,8 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
   }, [keyboardAvoid])
 
   return (
-    <View style={style} onTouchEnd={onTouchEnd}>
-      <Animated.View
-        style={[
-          contentContainerStyle,
-          animatedStyle
-        ]}
-      >
-        {children}
-      </Animated.View>
+    <View style={style} onTouchEnd={onTouchEnd} onTouchMove={onTouchEnd}>
+      <Animated.View style={[contentContainerStyle, animatedStyle]}>{children}</Animated.View>
     </View>
   )
 }

package/lib/runtime/components/react/mpx-movable-view.tsx

@@ -70,6 +70,7 @@ interface MovableViewProps {
   'parent-font-size'?: number
   'parent-width'?: number
   'parent-height'?: number
+  'disable-event-passthrough'?: boolean
 }
 
 const styles = StyleSheet.create({
@@ -103,6 +104,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
     'parent-width': parentWidth,
     'parent-height': parentHeight,
     direction = 'none',
+    'disable-event-passthrough': disableEventPassthrough = false,
     'simultaneous-handlers': originSimultaneousHandlers = [],
     'wait-for': waitFor = [],
     style = {},
@@ -557,10 +559,12 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
       })
       .withRef(movableGestureRef)
 
-    if (direction === 'horizontal') {
-      gesturePan.activeOffsetX([-5, 5]).failOffsetY([-5, 5])
-    } else if (direction === 'vertical') {
-      gesturePan.activeOffsetY([-5, 5]).failOffsetX([-5, 5])
+    if (!disableEventPassthrough) {
+      if (direction === 'horizontal') {
+        gesturePan.activeOffsetX([-5, 5]).failOffsetY([-5, 5])
+      } else if (direction === 'vertical') {
+        gesturePan.activeOffsetY([-5, 5]).failOffsetX([-5, 5])
+      }
     }
 
     if (simultaneousHandlers && simultaneousHandlers.length) {