@mpxjs/webpack-plugin 2.10.17 → 2.10.18-beta.2

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

@@ -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
@@ -54,7 +54,7 @@ import {
   NativeTouchEvent
 } from 'react-native'
 import { warn } from '@mpxjs/utils'
-import { useUpdateEffect, useTransformStyle, useLayout, extendObject, isIOS } from './utils'
+import { useUpdateEffect, useTransformStyle, useLayout, extendObject, isAndroid } from './utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { FormContext, FormFieldValue, KeyboardAvoidContext } from './context'
@@ -95,13 +95,16 @@ export interface InputProps {
   'selection-start'?: number
   'selection-end'?: number
   'placeholder-style'?: { color?: string }
-  'enable-offset'?: boolean,
+  '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,
+  // 只有 RN 环境读取
+  'keyboard-type'?: string
+  'adjust-position': boolean
+  'hold-keyboard'?: boolean
   bindinput?: (evt: NativeSyntheticEvent<TextInputTextInputEventData> | unknown) => void
   bindfocus?: (evt: NativeSyntheticEvent<TextInputFocusEventData> | unknown) => void
   bindblur?: (evt: NativeSyntheticEvent<TextInputFocusEventData> | unknown) => void
@@ -118,11 +121,11 @@ export interface PrivateInputProps {
 
 type FinalInputProps = InputProps & PrivateInputProps
 
-const keyboardTypeMap: Record<Type, string> = {
-  text: 'default',
+const inputModeMap: Record<Type, string> = {
+  text: 'text',
   number: 'numeric',
-  idcard: 'default',
-  digit: isIOS ? 'decimal-pad' : 'numeric'
+  idcard: 'text',
+  digit: 'decimal'
 }
 
 const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps>((props: FinalInputProps, ref): JSX.Element => {
@@ -150,6 +153,8 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     'parent-width': parentWidth,
     'parent-height': parentHeight,
     'adjust-position': adjustPosition = true,
+    'keyboard-type': originalKeyboardType,
+    'hold-keyboard': holdKeyboard = false,
     bindinput,
     bindfocus,
     bindblur,
@@ -182,9 +187,11 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     return ''
   }
 
-  const keyboardType = keyboardTypeMap[type]
   const defaultValue = parseValue(value)
+  // 微信小程序的 input 永远是单行，textAlignVertical 固定为 auto
+  // multiline 为 true 时表示是 textarea 组件复用此逻辑
   const textAlignVertical = multiline ? 'top' : 'auto'
+  const isAutoFocus = !!autoFocus || !!focus
 
   const tmpValue = useRef<string>(defaultValue)
   const cursorIndex = useRef<number>(0)
@@ -193,13 +200,10 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
   const [inputValue, setInputValue] = useState(defaultValue)
   const [contentHeight, setContentHeight] = useState(0)
   const [selection, setSelection] = useState({ start: -1, end: tmpValue.current.length })
-
   const styleObj = extendObject(
     { padding: 0, backgroundColor: '#fff' },
     style,
-    multiline && autoHeight
-      ? { height: 'auto', minHeight: Math.max((style as any)?.minHeight || 35, contentHeight) }
-      : {}
+    multiline && autoHeight ? { height: 'auto' } : {}
   )
 
   const {
@@ -281,12 +285,13 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
 
   const setKeyboardAvoidContext = () => {
     if (keyboardAvoid) {
-      keyboardAvoid.current = { cursorSpacing, ref: nodeRef, adjustPosition }
+      keyboardAvoid.current = { cursorSpacing, ref: nodeRef, adjustPosition, holdKeyboard, readyToShow: true }
     }
   }
 
   const onTouchStart = () => {
-    // sometimes the focus event occurs later than the keyboardWillShow event
+    // 手动聚焦时初始化 keyboardAvoid 上下文
+    // auto-focus/focus 不会触发而是在 useEffect 中初始化
     setKeyboardAvoidContext()
   }
 
@@ -295,42 +300,49 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
   }
 
   const onFocus = (evt: NativeSyntheticEvent<TextInputFocusEventData>) => {
-    setKeyboardAvoidContext()
+    if (!keyboardAvoid?.current) {
+      // Android：从一个正聚焦状态 input，聚焦到另一个新的 input 时，正常会触发如下时序：
+      // 新的 Input `onTouchStart` -> 旧输入框键盘 `keyboardDidHide` -> 新的 Input `onFocus`
+      // 导致这里的 keyboardAvoid.current 为 null，所以需要判空重新初始化。
+      setKeyboardAvoidContext()
+    }
 
-    if (bindfocus) {
-      const focusAction = () => {
-        bindfocus(
-          getCustomEvent(
-            'focus',
-            evt,
-            {
-              detail: {
-                value: tmpValue.current || '',
-                height: keyboardAvoid?.current?.keyboardHeight
-              },
-              layoutRef
+    const focusAction = () => {
+      bindfocus?.(
+        getCustomEvent(
+          'focus',
+          evt,
+          {
+            detail: {
+              value: tmpValue.current || '',
+              height: keyboardAvoid?.current?.keyboardHeight
             },
-            props
-          )
+            layoutRef
+          },
+          props
         )
-        if (keyboardAvoid?.current?.onKeyboardShow) {
-          keyboardAvoid.current.onKeyboardShow = undefined
-        }
+      )
+      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 回调
+    }
+
+    if (keyboardAvoid?.current) {
+      // 有 keyboardAvoiding
+      if (keyboardAvoid.current.keyboardHeight) {
+        // 仅以下场景触发顺序：先 keyboardWillShow 获取高度 -> 后 onFocus，可以立即执行
+        // - iOS + 手动点击聚焦
         focusAction()
+      } else {
+        // 其他场景触发顺序：先 onFocus -> 后 keyboardWillShow 获取高度 -> 执行回调
+        // - iOS + auto-focus/focus=true 自动聚焦
+        // - Android 手动点击聚焦/自动聚焦 都一样
+        evt.persist()
+        keyboardAvoid.current.onKeyboardShow = focusAction
       }
+    } else {
+      // 兜底：无 keyboardAvoiding 直接执行 focus 回调
+      focusAction()
     }
   }
 
@@ -440,19 +452,28 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
   }, [])
 
   useEffect(() => {
-    if (focus) {
+    if (isAutoFocus) {
+      // auto-focus/focus=true 初始化 keyboardAvoidContext
       setKeyboardAvoidContext()
     }
-  }, [focus])
+  }, [isAutoFocus])
 
   useUpdateEffect(() => {
     if (!nodeRef?.current) {
       return
     }
-    focus
+    // RN autoFocus 属性仅在初次渲染时生效
+    // 后续更新需要手动调用 focus/blur 方法，和微信小程序对齐
+    isAutoFocus
       ? (nodeRef.current as TextInput)?.focus()
       : (nodeRef.current as TextInput)?.blur()
-  }, [focus])
+  }, [isAutoFocus])
+
+  // 使用 multiline 来修复光标位置问题
+  // React Native 的 TextInput 在 textAlign center + placeholder 时光标会跑到右边
+  // 这个问题只在 Android 上出现
+  // 参考：https://github.com/facebook/react-native/issues/28794 (Android only)
+  const needMultilineFix = isAndroid && !multiline
 
   const innerProps = useInnerProps(
     extendObject(
@@ -463,20 +484,21 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
         ref: nodeRef,
         style: extendObject({}, normalStyle, layoutStyle),
         allowFontScaling,
-        keyboardType: keyboardType,
+        inputMode: originalKeyboardType ? undefined : inputModeMap[type],
+        keyboardType: originalKeyboardType,
         secureTextEntry: !!password,
         defaultValue: defaultValue,
         value: inputValue,
         maxLength: maxlength === -1 ? undefined : maxlength,
         editable: !disabled,
-        autoFocus: !!autoFocus || !!focus,
+        autoFocus: isAutoFocus,
         selection: selectionStart > -1 || typeof cursor === 'number' ? selection : undefined,
         selectionColor: cursorColor,
-        blurOnSubmit: !multiline && !confirmHold,
+        blurOnSubmit: multiline ? confirmType !== 'return' : !confirmHold,
         underlineColorAndroid: 'rgba(0,0,0,0)',
         textAlignVertical: textAlignVertical,
         placeholderTextColor: placeholderStyle?.color,
-        multiline: !!multiline,
+        multiline: multiline || needMultilineFix,
         onTouchStart,
         onTouchEnd,
         onFocus,
@@ -484,8 +506,9 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
         onChange,
         onSelectionChange,
         onContentSizeChange,
-        onSubmitEditing: bindconfirm && !multiline && onSubmitEditing
+        onSubmitEditing: bindconfirm && onSubmitEditing
       },
+      needMultilineFix ? { numberOfLines: 1 } : {},
       !!multiline && confirmType === 'return' ? {} : { enterKeyHint: confirmType }
     ),
     [

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

@@ -23,10 +23,13 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
   // 比如机型 iPhone 11 Pro，可能会导致显隐动画冲突
   // 因此增加状态标记 + cancelAnimation 来优化
   const isShow = useRef<boolean>(false)
+  const keybaordHandleTimerRef = useRef<NodeJS.Timeout | null>(null)
 
   const animatedStyle = useAnimatedStyle(() => ({
-    // translate/position top可能会导致底部渲染区域缺失
-    marginTop: -offset.value,
+    // translate/position top+ overflow hidden 在 android 上时因为键盘顶起让页面高度变小，同时元素位置上移
+    // 此时最底部的区域是超出了页面高度的，hidden生效就被隐藏掉，因此需要 android 配置聚焦时禁用高度缩小
+    // margin-top 因为在 react-native 上和 flex 1 同时存在时，负值只会让容器高度整体变高，不会让元素上移
+    transform: [{ translateY: -offset.value }],
     flexBasis: basic.value as DimensionValue
   }))
 
@@ -39,11 +42,20 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
 
     if (keyboardAvoid?.current) {
       const inputRef = keyboardAvoid.current.ref?.current
-      if (inputRef && inputRef.isFocused()) {
+      if (inputRef && inputRef.isFocused() && !keyboardAvoid.current.readyToShow) {
         // 修复 Android 点击键盘收起按钮时当前 input 没触发失焦的问题
+        // keyboardAvoid.current.readyToShow = true 表示聚焦到了新的输入框，不需要手动触发失焦
         inputRef.blur()
       }
-      keyboardAvoid.current = null
+      if (!keyboardAvoid.current.onKeyboardShow) {
+        // 修复部分 Android 机型可能时序问题：当从 input 已聚焦状态，聚焦到另一个 input 时，可能时序：
+        // - 新的 Input `onTouchStart` -> 新的 Input `onFocus` -> 旧输入框键盘 `keyboardDidHide` -> 新输入框键盘 `keyboardDidShow`
+        // - 此时 keyboardAvoid.current 如果清空 null，会导致新输入框键盘 `keyboardDidShow` 回调 keybaordAvoding 执行失败。
+        // 修复方案：
+        // 如果出现时序问题，那么新的 Input `onFocus` 会更早执行，那么 `keyboardAvoid.current.onKeyboardShow` 存在，
+        // 那么不应该重置为 null，反之，说明时正常情况，应当重置为 null。
+        keyboardAvoid.current = null
+      }
     }
 
     cancelAnimation(offset)
@@ -53,6 +65,9 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
 
   const onTouchEnd = ({ nativeEvent }: NativeSyntheticEvent<NativeTouchEvent & { origin?: string }>) => {
     if (nativeEvent.origin !== 'input') {
+      if (keyboardAvoid?.current?.holdKeyboard) {
+        return
+      }
       Keyboard.isVisible() && Keyboard.dismiss()
     }
   }
@@ -61,7 +76,11 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
     let subscriptions: EmitterSubscription[] = []
 
     function keybaordAvoding(evt: any) {
-      if (!keyboardAvoid?.current || isShow.current) {
+      if (keyboardAvoid?.current?.readyToShow) {
+        // 重置标记位
+        keyboardAvoid.current.readyToShow = false
+      }
+      if (!keyboardAvoid?.current) {
         return
       }
 
@@ -106,13 +125,23 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
     }
 
     if (isIOS) {
-      subscriptions = [Keyboard.addListener('keyboardWillShow', keybaordAvoding), Keyboard.addListener('keyboardWillHide', resetKeyboard)]
+      subscriptions = [
+        Keyboard.addListener('keyboardWillShow', (evt: any) => {
+          if (keybaordHandleTimerRef.current) {
+            clearTimeout(keybaordHandleTimerRef.current)
+          }
+          // iphone 在input聚焦时长按滑动后会导致 show 事件先于 focus 事件发生，因此等一下，等 focus 先触发拿到 input，避免键盘出现但input没顶上去
+          keybaordHandleTimerRef.current = setTimeout(() => keybaordAvoding(evt), 32)
+        }),
+        Keyboard.addListener('keyboardWillHide', resetKeyboard)
+      ]
     } else {
       subscriptions = [Keyboard.addListener('keyboardDidShow', keybaordAvoding), Keyboard.addListener('keyboardDidHide', resetKeyboard)]
     }
 
     return () => {
       subscriptions.forEach(subscription => subscription.remove())
+      keybaordHandleTimerRef.current && clearTimeout(keybaordHandleTimerRef.current)
     }
   }, [keyboardAvoid])
 

package/lib/runtime/components/react/mpx-portal/portal-manager.tsx

@@ -19,7 +19,7 @@ const _PortalManager = forwardRef((props: PortalManagerProps, ref:ForwardedRef<u
     setState((prevState) => ({
       portals: [...prevState.portals, { key, children }]
     }))
-  }, [state])
+  }, [])
 
   const update = useCallback((key: number, children: ReactNode) => {
     setState((prevState) => ({
@@ -30,7 +30,7 @@ const _PortalManager = forwardRef((props: PortalManagerProps, ref:ForwardedRef<u
         return item
       })
     }))
-  }, [state])
+  }, [])
 
   const unmount = useCallback((key: number) => {
     setState((prevState) => ({

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

@@ -112,6 +112,11 @@ type ScrollAdditionalProps = {
 
 const AnimatedScrollView = RNAnimated.createAnimatedComponent(ScrollView) as React.ComponentType<any>
 
+const REFRESH_COLOR = {
+  black: ['#000'],
+  white: ['#fff']
+}
+
 const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, ScrollViewProps>((scrollViewProps: ScrollViewProps = {}, ref): JSX.Element => {
   const { textProps, innerProps: props = {} } = splitProps(scrollViewProps)
   const {
@@ -121,9 +126,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     binddragstart,
     binddragging,
     binddragend,
-    bindtouchstart,
     bindtouchmove,
-    bindtouchend,
     'scroll-x': scrollX = false,
     'scroll-y': scrollY = false,
     'enable-back-to-top': enableBackToTop = false,
@@ -159,14 +162,15 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
   const simultaneousHandlers = flatGesture(originSimultaneousHandlers)
   const waitForHandlers = flatGesture(waitFor)
 
-  const [refreshing, setRefreshing] = useState(false)
+  const { refresherContent, otherContent } = getRefresherContent(props.children)
+  const hasRefresher = refresherContent && refresherEnabled
 
+  const [refreshing, setRefreshing] = useState(false)
   const [enableScroll, setEnableScroll] = useState(true)
-  const enableScrollValue = useSharedValue(true)
-
   const [scrollBounces, setScrollBounces] = useState(false)
-  const bouncesValue = useSharedValue(!!false)
 
+  const enableScrollValue = useSharedValue(true)
+  const bouncesValue = useSharedValue(false)
   const translateY = useSharedValue(0)
   const isAtTop = useSharedValue(true)
   const refresherHeight = useSharedValue(0)
@@ -186,16 +190,8 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
 
   const firstScrollIntoViewChange = useRef<boolean>(true)
 
-  const refreshColor = {
-    black: ['#000'],
-    white: ['#fff']
-  }
-
   const isContentSizeChange = useRef(false)
 
-  const { refresherContent, otherContent } = getRefresherContent(props.children)
-  const hasRefresher = refresherContent && refresherEnabled
-
   const {
     normalStyle,
     hasVarDec,
@@ -643,67 +639,71 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     }
   }
 
-  // 处理下拉刷新的手势
-  const panGesture = Gesture.Pan()
-    .onUpdate((event) => {
-      'worklet'
-      if (enhanced && !!bounces) {
-        if (event.translationY > 0 && bouncesValue.value) {
-          updateBouncesState(false)
-        } else if ((event.translationY < 0) && !bouncesValue.value) {
-          updateBouncesState(true)
+  // 处理下拉刷新的手势 - 使用 useMemo 避免每次渲染都创建
+  const panGesture = useMemo(() => {
+    if (!hasRefresher) return Gesture.Pan() // 返回空手势
+
+    return Gesture.Pan()
+      .onUpdate((event) => {
+        'worklet'
+        if (enhanced && !!bounces) {
+          if (event.translationY > 0 && bouncesValue.value) {
+            updateBouncesState(false)
+          } else if ((event.translationY < 0) && !bouncesValue.value) {
+            updateBouncesState(true)
+          }
         }
-      }
 
-      if (translateY.value <= 0 && event.translationY < 0) {
-        // 滑动到顶再向上开启滚动
-        updateScrollState(true)
-      } else if (event.translationY > 0 && isAtTop.value) {
-        // 滚动到顶再向下禁止滚动
-        updateScrollState(false)
-      }
-      // 禁止滚动后切换为滑动
-      if (!enableScrollValue.value && isAtTop.value) {
-        if (refreshing) {
-          // 从完全展开状态(refresherHeight.value)开始计算偏移
-          translateY.value = Math.max(
-            0,
-            Math.min(
-              refresherHeight.value,
-              refresherHeight.value + event.translationY
+        if (translateY.value <= 0 && event.translationY < 0) {
+          // 滑动到顶再向上开启滚动
+          updateScrollState(true)
+        } else if (event.translationY > 0 && isAtTop.value) {
+          // 滚动到顶再向下禁止滚动
+          updateScrollState(false)
+        }
+        // 禁止滚动后切换为滑动
+        if (!enableScrollValue.value && isAtTop.value) {
+          if (refreshing) {
+            // 从完全展开状态(refresherHeight.value)开始计算偏移
+            translateY.value = Math.max(
+              0,
+              Math.min(
+                refresherHeight.value,
+                refresherHeight.value + event.translationY
+              )
             )
-          )
-        } else if (event.translationY > 0) {
-          // 非刷新状态下的下拉逻辑保持不变
-          translateY.value = Math.min(event.translationY * 0.6, refresherHeight.value)
+          } else if (event.translationY > 0) {
+            // 非刷新状态下的下拉逻辑保持不变
+            translateY.value = Math.min(event.translationY * 0.6, refresherHeight.value)
+          }
         }
-      }
-    })
-    .onEnd((event) => {
-      'worklet'
-      if (enableScrollValue.value) return
-      if (refreshing) {
-        // 刷新状态下，根据滑动距离决定是否隐藏
-        // 如果向下滑动没超过 refresherThreshold，就完全隐藏，如果向上滑动完全隐藏
-        if ((event.translationY > 0 && translateY.value < refresherThreshold) || event.translationY < 0) {
+      })
+      .onEnd((event) => {
+        'worklet'
+        if (enableScrollValue.value) return
+        if (refreshing) {
+          // 刷新状态下，根据滑动距离决定是否隐藏
+          // 如果向下滑动没超过 refresherThreshold，就完全隐藏，如果向上滑动完全隐藏
+          if ((event.translationY > 0 && translateY.value < refresherThreshold) || event.translationY < 0) {
+            translateY.value = withTiming(0)
+            updateScrollState(true)
+            runOnJS(runOnJSCallback)('setRefreshing', false)
+          } else {
+            translateY.value = withTiming(refresherHeight.value)
+          }
+        } else if (event.translationY >= refresherHeight.value) {
+          // 触发刷新
+          translateY.value = withTiming(refresherHeight.value)
+          runOnJS(runOnJSCallback)('onRefresh')
+        } else {
+          // 回弹
           translateY.value = withTiming(0)
           updateScrollState(true)
           runOnJS(runOnJSCallback)('setRefreshing', false)
-        } else {
-          translateY.value = withTiming(refresherHeight.value)
         }
-      } else if (event.translationY >= refresherHeight.value) {
-        // 触发刷新
-        translateY.value = withTiming(refresherHeight.value)
-        runOnJS(runOnJSCallback)('onRefresh')
-      } else {
-        // 回弹
-        translateY.value = withTiming(0)
-        updateScrollState(true)
-        runOnJS(runOnJSCallback)('setRefreshing', false)
-      }
-    })
-    .simultaneousWithExternalGesture(scrollViewRef)
+      })
+      .simultaneousWithExternalGesture(scrollViewRef)
+  }, [hasRefresher, enhanced, bounces, refreshing, refresherThreshold])
 
   const scrollAdditionalProps: ScrollAdditionalProps = extendObject(
     {
@@ -779,61 +779,57 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
 
   const ScrollViewComponent = enableSticky ? AnimatedScrollView : ScrollView
 
-  const withRefresherScrollView = createElement(
-    GestureDetector,
-    { gesture: panGesture },
-    createElement(
-      ScrollViewComponent,
-      innerProps,
-      createElement(
-        Animated.View,
-        { style: [refresherAnimatedStyle, refresherLayoutStyle], onLayout: onRefresherLayout },
-        refresherContent
-      ),
+  const createScrollViewContent = () => {
+    const wrappedChildren = wrapChildren(hasRefresher ? extendObject({}, props, { children: otherContent }) : props,
+      {
+        hasVarDec,
+        varContext: varContextRef.current,
+        textStyle,
+        textProps
+      })
+    return createElement(ScrollViewContext.Provider, { value: contextValue }, wrappedChildren)
+  }
+
+  const withRefresherScrollView = () => {
+    return createElement(
+      GestureDetector,
+      { gesture: panGesture },
       createElement(
-        Animated.View,
-        { style: contentAnimatedStyle },
+        ScrollViewComponent,
+        innerProps,
+        createElement(
+          Animated.View,
+          { style: [refresherAnimatedStyle, refresherLayoutStyle], onLayout: onRefresherLayout },
+          refresherContent
+        ),
         createElement(
-          ScrollViewContext.Provider,
-          { value: contextValue },
-          wrapChildren(
-            extendObject({}, props, { children: otherContent }),
-            {
-              hasVarDec,
-              varContext: varContextRef.current,
-              textStyle,
-              textProps
-            }
-          )
+          Animated.View,
+          { style: contentAnimatedStyle },
+          createScrollViewContent()
         )
       )
     )
-  )
+  }
 
-  const commonScrollView = createElement(
-    ScrollViewComponent,
-    extendObject({}, innerProps, {
-      refreshControl: refresherEnabled
-        ? createElement(RefreshControl, extendObject({
-          progressBackgroundColor: refresherBackground,
-          refreshing: refreshing,
-          onRefresh: onRefresh
-        }, refresherDefaultStyle && refresherDefaultStyle !== 'none'
-          ? { colors: refreshColor[refresherDefaultStyle] }
-          : {}))
-        : undefined
-    }),
-    createElement(ScrollViewContext.Provider, { value: contextValue },
-      wrapChildren(props, {
-        hasVarDec,
-        varContext: varContextRef.current,
-        textStyle,
-        textProps
-      })
+  const commonScrollView = () => {
+    const refreshControl = refresherEnabled
+      ? createElement(RefreshControl, extendObject({
+        progressBackgroundColor: refresherBackground,
+        refreshing: refreshing,
+        onRefresh: onRefresh
+      }, refresherDefaultStyle && refresherDefaultStyle !== 'none'
+        ? { colors: REFRESH_COLOR[refresherDefaultStyle] }
+        : {}))
+      : undefined
+
+    return createElement(
+      ScrollViewComponent,
+      extendObject({}, innerProps, { refreshControl }),
+      createScrollViewContent()
     )
-  )
+  }
 
-  let scrollViewComponent = hasRefresher ? withRefresherScrollView : commonScrollView
+  let scrollViewComponent = hasRefresher ? withRefresherScrollView() : commonScrollView()
 
   if (hasPositionFixed) {
     scrollViewComponent = createElement(Portal, null, scrollViewComponent)