@mpxjs/webpack-plugin 2.10.4-beta.4 → 2.10.4-beta.6

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

@@ -379,8 +379,10 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
   }, [src, isSvg, isLayoutMode])
 
   const innerProps = useInnerProps(
-    props,
     extendObject(
+      {},
+      props,
+      layoutProps,
       {
         ref: nodeRef,
         style: extendObject(
@@ -390,8 +392,7 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
           isHeightFixMode ? { width: fixedWidth } : {},
           isWidthFixMode ? { height: fixedHeight } : {}
         )
-      },
-      layoutProps
+      }
     ),
     [
       'src',

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

@@ -425,8 +425,10 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
   }, [focus])
 
   const innerProps = useInnerProps(
-    props,
     extendObject(
+      {},
+      props,
+      layoutProps,
       {
         ref: nodeRef,
         style: extendObject({}, normalStyle, layoutStyle),
@@ -444,11 +446,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
         underlineColorAndroid: 'rgba(0,0,0,0)',
         textAlignVertical: textAlignVertical,
         placeholderTextColor: placeholderStyle?.color,
-        multiline: !!multiline
-      },
-      !!multiline && confirmType === 'return' ? {} : { enterKeyHint: confirmType },
-      layoutProps,
-      {
+        multiline: !!multiline,
         onTouchStart,
         onFocus,
         onBlur,
@@ -456,7 +454,8 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
         onSelectionChange,
         onContentSizeChange,
         onSubmitEditing: bindconfirm && !multiline && onSubmitEditing
-      }
+      },
+      !!multiline && confirmType === 'return' ? {} : { enterKeyHint: confirmType }
     ),
     [
       'type',

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

@@ -75,14 +75,13 @@ const Label = forwardRef<HandlerRef<View, LabelProps>, LabelProps>(
     }, [])
 
     const innerProps = useInnerProps(
-      props,
       extendObject(
-        {
-          ref: nodeRef,
-          style: extendObject({}, innerStyle, layoutStyle)
-        },
+        {},
+        props,
         layoutProps,
         {
+          ref: nodeRef,
+          style: extendObject({}, innerStyle, layoutStyle),
           bindtap: onTap
         }
       ),

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

@@ -10,16 +10,16 @@ import { MovableAreaContext } from './context'
 import { useTransformStyle, wrapChildren, useLayout, extendObject } from './utils'
 
 interface MovableAreaProps {
-  style?: Record<string, any>;
-  children: ReactNode;
-  width?: number;
-  height?: number;
-  'enable-offset'?: boolean;
+  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;
+  'external-var-context'?: Record<string, any>
+  'parent-font-size'?: number
+  'parent-width'?: number
+  'parent-height'?: number
 }
 
 const _MovableArea = forwardRef<HandlerRef<View, MovableAreaProps>, MovableAreaProps>((props: MovableAreaProps, ref): JSX.Element => {
@@ -46,10 +46,19 @@ const _MovableArea = forwardRef<HandlerRef<View, MovableAreaProps>, MovableAreaP
 
   const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: movableViewRef })
 
-  const innerProps = useInnerProps(props, extendObject({
-    style: extendObject({ height: contextValue.height, width: contextValue.width, overflow: 'hidden' }, normalStyle, layoutStyle),
-    ref: movableViewRef
-  }, layoutProps), [], { layoutRef })
+  const innerProps = useInnerProps(
+    extendObject(
+      {},
+      props,
+      layoutProps,
+      {
+        style: extendObject({ height: contextValue.height, width: contextValue.width, overflow: 'hidden' }, normalStyle, layoutStyle),
+        ref: movableViewRef
+      }
+    ),
+    [],
+    { layoutRef }
+  )
 
   return createElement(MovableAreaContext.Provider, { value: contextValue }, createElement(
     View,

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

@@ -36,39 +36,39 @@ import Animated, {
 import { collectDataset, noop } from '@mpxjs/utils'
 
 interface MovableViewProps {
-  children: ReactNode;
-  style?: Record<string, any>;
-  direction: 'all' | 'vertical' | 'horizontal' | 'none';
-  x?: number;
-  y?: number;
-  disabled?: boolean;
-  animation?: boolean;
-  id?: string;
-  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;
+  children: ReactNode
+  style?: Record<string, any>
+  direction: 'all' | 'vertical' | 'horizontal' | 'none'
+  x?: number
+  y?: number
+  disabled?: boolean
+  animation?: boolean
+  id?: string
+  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;
+  'external-var-context'?: Record<string, any>
+  'parent-font-size'?: number
+  'parent-width'?: number
+  'parent-height'?: number
 }
 
 const styles = StyleSheet.create({
@@ -235,7 +235,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
       offsetX: offsetX.value,
       offsetY: offsetY.value
     }),
-    (currentValue: { offsetX: any; offsetY: any; }) => {
+    (currentValue: { offsetX: any; offsetY: any }) => {
       const { offsetX, offsetY } = currentValue
       runOnJS(handleTriggerChange)({
         x: offsetX,
@@ -342,11 +342,11 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
     props.onLayout && props.onLayout(e)
   }
 
-  const extendEvent = useCallback((e: any, type: 'start'|'move'|'end') => {
+  const extendEvent = useCallback((e: any, type: 'start' | 'move' | 'end') => {
     const { y: navigationY = 0 } = navigation?.layout || {}
     const touchArr = [e.changedTouches, e.allTouches]
     touchArr.forEach(touches => {
-      touches && touches.forEach((item: { absoluteX: number; absoluteY: number; pageX: number; pageY: number ; clientX: number; clientY: number}) => {
+      touches && touches.forEach((item: { absoluteX: number; absoluteY: number; pageX: number; pageY: number; clientX: number; clientY: number }) => {
         item.pageX = item.absoluteX
         item.pageY = item.absoluteY - navigationY
         item.clientX = item.absoluteX
@@ -565,11 +565,18 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
     'catchtouchend'
   ])
 
-  const innerProps = useInnerProps(filterProps, extendObject({
-    ref: nodeRef,
-    onLayout: onLayout,
-    style: [innerStyle, animatedStyles, layoutStyle]
-  }, rewriteCatchEvent()))
+  const innerProps = useInnerProps(
+    extendObject(
+      {},
+      filterProps,
+      {
+        ref: nodeRef,
+        onLayout: onLayout,
+        style: [innerStyle, animatedStyles, layoutStyle]
+      },
+      rewriteCatchEvent()
+    )
+  )
 
   return createElement(GestureDetector, { gesture: gesture }, createElement(
     Animated.View,

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

@@ -7,9 +7,7 @@
  * ✔ url
  * ✔ delta
  */
-import { View } from 'react-native'
-import { useCallback, forwardRef, JSX, createElement } from 'react'
-import useInnerProps from './getInnerListeners'
+import { useCallback, forwardRef, JSX, createElement, MutableRefObject } from 'react'
 import { redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy'
 
 import MpxView, { _ViewProps } from './mpx-view'
@@ -20,7 +18,7 @@ interface _NavigatorProps extends _ViewProps {
   delta: number
 }
 
-const _Navigator = forwardRef<View, _NavigatorProps>((props, ref): JSX.Element => {
+const _Navigator = forwardRef<any, _NavigatorProps>((props, ref): JSX.Element => {
   const {
     children,
     'open-type': openType,
@@ -48,10 +46,10 @@ const _Navigator = forwardRef<View, _NavigatorProps>((props, ref): JSX.Element =
     }
   }, [openType, url, delta])
 
-  const innerProps = useInnerProps(props, {
+  const innerProps = {
     ref,
     bindtap: handleClick
-  })
+  }
 
   return createElement(MpxView, innerProps, children)
 })

package/lib/runtime/components/react/mpx-picker/index.tsx

@@ -134,10 +134,13 @@ const Picker = forwardRef<HandlerRef<View, PickerProps>, PickerProps>(
 
     useNodesRef<View, PickerProps>(props, ref, nodeRef)
     const innerProps = useInnerProps(
-      props,
-      {
-        ref: nodeRef
-      },
+      extendObject(
+        {},
+        props,
+        {
+          ref: nodeRef
+        }
+      ),
       [],
       { layoutRef: innerLayout }
     )

package/lib/runtime/components/react/mpx-picker-view/index.tsx

@@ -130,20 +130,23 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
   }
 
   const innerProps = useInnerProps(
-    props,
-    extendObject({
-      ref: nodeRef,
-      style: extendObject(
-        {},
-        normalStyle,
-        layoutStyle,
-        {
-          position: 'relative',
-          overflow: 'hidden'
-        }
-      ),
-      layoutProps
-    }),
+    extendObject(
+      {},
+      props,
+      layoutProps,
+      {
+        ref: nodeRef,
+        style: extendObject(
+          {},
+          normalStyle,
+          layoutStyle,
+          {
+            position: 'relative',
+            overflow: 'hidden'
+          }
+        )
+      }
+    ),
     [
       'enable-offset',
       'indicator-style',

package/lib/runtime/components/react/mpx-radio-group.tsx

@@ -141,13 +141,14 @@ const radioGroup = forwardRef<
   }, [])
 
   const innerProps = useInnerProps(
-    props,
     extendObject(
+      {},
+      props,
+      layoutProps,
       {
         ref: nodeRef,
         style: extendObject({}, normalStyle, layoutStyle)
-      },
-      layoutProps
+      }
     ),
     ['name'],
     {

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

@@ -22,9 +22,9 @@ export interface RadioProps {
   'enable-offset'?: boolean
   'enable-var'?: boolean
   'external-var-context'?: Record<string, any>
-  'parent-font-size'?: number;
-  'parent-width'?: number;
-  'parent-height'?: number;
+  'parent-font-size'?: number
+  'parent-width'?: number
+  'parent-height'?: number
   children: ReactNode
   bindtap?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void
 }
@@ -84,7 +84,7 @@ const Radio = forwardRef<HandlerRef<View, RadioProps>, RadioProps>(
     const [isChecked, setIsChecked] = useState<boolean>(!!checked)
 
     const groupContext = useContext(RadioGroupContext)
-    let groupValue: { [key: string]: { checked: boolean; setValue: Dispatch<SetStateAction<boolean>>; } } | undefined
+    let groupValue: { [key: string]: { checked: boolean; setValue: Dispatch<SetStateAction<boolean>> } } | undefined
     let notifyChange: (evt: NativeSyntheticEvent<TouchEvent>) => void | undefined
 
     const labelContext = useContext(LabelContext)
@@ -149,14 +149,13 @@ const Radio = forwardRef<HandlerRef<View, RadioProps>, RadioProps>(
     }
 
     const innerProps = useInnerProps(
-      props,
       extendObject(
-        {
-          ref: nodeRef,
-          style: extendObject({}, innerStyle, layoutStyle)
-        },
+        {},
+        props,
         layoutProps,
         {
+          ref: nodeRef,
+          style: extendObject({}, innerStyle, layoutStyle),
           bindtap: !disabled && onTap
         }
       ),

package/lib/runtime/components/react/mpx-rich-text/index.tsx

@@ -91,12 +91,21 @@ const _RichText = forwardRef<HandlerRef<View, _RichTextProps>, _RichTextProps>((
     layoutRef
   })
 
-  const innerProps = useInnerProps(props, extendObject({
-    ref: nodeRef,
-    style: extendObject(normalStyle, layoutStyle)
-  }, layoutProps), [], {
-    layoutRef
-  })
+  const innerProps = useInnerProps(
+    extendObject(
+      {},
+      props,
+      layoutProps,
+      {
+        ref: nodeRef,
+        style: extendObject(normalStyle, layoutStyle)
+      }
+    ),
+    [],
+    {
+      layoutRef
+    }
+  )
 
   const html: string = typeof nodes === 'string' ? nodes : jsonToHtmlStr(nodes)
 

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

@@ -32,7 +32,7 @@
  * ✔ bindscroll
  */
 import { ScrollView, RefreshControl, Gesture, GestureDetector } from 'react-native-gesture-handler'
-import { View, NativeSyntheticEvent, NativeScrollEvent, LayoutChangeEvent, ViewStyle } from 'react-native'
+import { View, NativeSyntheticEvent, NativeScrollEvent, LayoutChangeEvent, ViewStyle, Animated as RNAnimated } from 'react-native'
 import { isValidElement, Children, JSX, ReactNode, RefObject, useRef, useState, useEffect, forwardRef, useContext, useMemo, createElement } from 'react'
 import Animated, { useAnimatedRef, useSharedValue, withTiming, useAnimatedStyle, runOnJS } from 'react-native-reanimated'
 import { warn } from '@mpxjs/utils'
@@ -46,7 +46,6 @@ interface ScrollViewProps {
   enhanced?: boolean;
   bounces?: boolean;
   style?: ViewStyle;
-  scrollEventThrottle?: number;
   'scroll-x'?: boolean;
   'scroll-y'?: boolean;
   'enable-back-to-top'?: boolean;
@@ -70,6 +69,7 @@ interface ScrollViewProps {
   'parent-font-size'?: number;
   'parent-width'?: number;
   'parent-height'?: number;
+  'enable-sticky'?: boolean;
   'wait-for'?: Array<GestureHandler>;
   'simultaneous-handlers'?: Array<GestureHandler>;
   'scroll-event-throttle'?:number;
@@ -87,26 +87,28 @@ interface ScrollViewProps {
   __selectRef?: (selector: string, nodeType: 'node' | 'component', all?: boolean) => HandlerRef<any, any>
 }
 type ScrollAdditionalProps = {
-  pinchGestureEnabled: boolean;
-  horizontal: boolean;
-  onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
-  onContentSizeChange: (width: number, height: number) => void;
-  onLayout?: (event: LayoutChangeEvent) => void;
-  scrollsToTop: boolean;
-  showsHorizontalScrollIndicator: boolean;
-  showsVerticalScrollIndicator: boolean;
-  scrollEnabled: boolean;
-  ref: RefObject<ScrollView>;
-  bounces?: boolean;
-  pagingEnabled?: boolean;
-  style?: ViewStyle;
-  bindtouchstart?: (event: NativeSyntheticEvent<TouchEvent>) => void;
-  bindtouchmove?: (event: NativeSyntheticEvent<TouchEvent>) => void;
-  bindtouchend?: (event: NativeSyntheticEvent<TouchEvent>) => void;
-  onScrollBeginDrag?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
-  onScrollEndDrag?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
-  onMomentumScrollEnd?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
-};
+  pinchGestureEnabled: boolean
+  horizontal: boolean
+  onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void
+  onContentSizeChange: (width: number, height: number) => void
+  onLayout?: (event: LayoutChangeEvent) => void
+  scrollsToTop: boolean
+  showsHorizontalScrollIndicator: boolean
+  showsVerticalScrollIndicator: boolean
+  scrollEnabled: boolean
+  ref: RefObject<ScrollView>
+  bounces?: boolean
+  pagingEnabled?: boolean
+  style?: ViewStyle
+  bindtouchstart?: (event: NativeSyntheticEvent<TouchEvent>) => void
+  bindtouchmove?: (event: NativeSyntheticEvent<TouchEvent>) => void
+  bindtouchend?: (event: NativeSyntheticEvent<TouchEvent>) => void
+  onScrollBeginDrag?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void
+  onScrollEndDrag?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void
+  onMomentumScrollEnd?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void
+}
+
+const AnimatedScrollView = RNAnimated.createAnimatedComponent(ScrollView) as React.ComponentType<any>
 
 const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, ScrollViewProps>((scrollViewProps: ScrollViewProps = {}, ref): JSX.Element => {
   const { textProps, innerProps: props = {} } = splitProps(scrollViewProps)
@@ -144,10 +146,13 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     'parent-height': parentHeight,
     'simultaneous-handlers': originSimultaneousHandlers,
     'wait-for': waitFor,
+    'enable-sticky': enableSticky,
     'scroll-event-throttle': scrollEventThrottle = 0,
     __selectRef
   } = props
 
+  const scrollOffset = useRef(new RNAnimated.Value(0)).current
+
   const simultaneousHandlers = flatGesture(originSimultaneousHandlers)
   const waitForHandlers = flatGesture(waitFor)
 
@@ -216,14 +221,15 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     gestureRef: scrollViewRef
   })
 
+  const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout })
+
   const contextValue = useMemo(() => {
     return {
-      gestureRef: scrollViewRef
+      gestureRef: scrollViewRef,
+      scrollOffset
     }
   }, [])
 
-  const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: scrollViewRef, onLayout })
-
   const hasRefresherLayoutRef = useRef(false)
 
   // layout 完成前先隐藏，避免安卓闪烁问题
@@ -274,7 +280,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     }
   }, [refresherTriggered])
 
-  function scrollTo ({ top = 0, left = 0, animated = false } : { top?: number; left?: number; animated?: boolean }) {
+  function scrollTo ({ top = 0, left = 0, animated = false }: { top?: number; left?: number; animated?: boolean }) {
     scrollToOffset(left, top, animated)
   }
 
@@ -485,6 +491,16 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     updateIntersection()
   }
 
+  const scrollHandler = RNAnimated.event(
+    [{ nativeEvent: { contentOffset: { y: scrollOffset } } }],
+    {
+      useNativeDriver: true,
+      listener: (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+        onScroll(event)
+      }
+    }
+  )
+
   function onScrollDragStart (e: NativeSyntheticEvent<NativeScrollEvent>) {
     hasCallScrollToLower.current = false
     hasCallScrollToUpper.current = false
@@ -655,7 +671,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
       scrollEnabled: !enableScroll ? false : !!(scrollX || scrollY),
       bounces: false,
       ref: scrollViewRef,
-      onScroll: onScroll,
+      onScroll: enableSticky ? scrollHandler : onScroll,
       onContentSizeChange: onContentSizeChange,
       bindtouchstart: ((enhanced && binddragstart) || bindtouchstart) && onScrollTouchStart,
       bindtouchmove: ((enhanced && binddragging) || bindtouchmove) && onScrollTouchMove,
@@ -676,39 +692,47 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     })
   }
 
-  const innerProps = useInnerProps(props, scrollAdditionalProps, [
-    'id',
-    'scroll-x',
-    'scroll-y',
-    'enable-back-to-top',
-    'enable-trigger-intersection-observer',
-    'paging-enabled',
-    'show-scrollbar',
-    'upper-threshold',
-    'lower-threshold',
-    'scroll-top',
-    'scroll-left',
-    'scroll-with-animation',
-    'refresher-triggered',
-    'refresher-enabled',
-    'refresher-default-style',
-    'refresher-background',
-    'children',
-    'enhanced',
-    'binddragstart',
-    'binddragging',
-    'binddragend',
-    'bindscroll',
-    'bindscrolltoupper',
-    'bindscrolltolower',
-    'bindrefresherrefresh'
-  ], { layoutRef })
+  const innerProps = useInnerProps(
+    extendObject(
+      {},
+      props,
+      scrollAdditionalProps
+    ),
+    [
+      'id',
+      'scroll-x',
+      'scroll-y',
+      'enable-back-to-top',
+      'enable-trigger-intersection-observer',
+      'paging-enabled',
+      'show-scrollbar',
+      'upper-threshold',
+      'lower-threshold',
+      'scroll-top',
+      'scroll-left',
+      'scroll-with-animation',
+      'refresher-triggered',
+      'refresher-enabled',
+      'refresher-default-style',
+      'refresher-background',
+      'children',
+      'enhanced',
+      'binddragstart',
+      'binddragging',
+      'binddragend',
+      'bindscroll',
+      'bindscrolltoupper',
+      'bindscrolltolower',
+      'bindrefresherrefresh'
+    ], { layoutRef })
+
+  const ScrollViewComponent = enableSticky ? AnimatedScrollView : ScrollView
 
   const withRefresherScrollView = createElement(
     GestureDetector,
     { gesture: panGesture },
     createElement(
-      ScrollView,
+      ScrollViewComponent,
       innerProps,
       createElement(
         Animated.View,
@@ -736,8 +760,8 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
   )
 
   const commonScrollView = createElement(
-    ScrollView,
-    extendObject(innerProps, {
+    ScrollViewComponent,
+    extendObject({}, innerProps, {
       refreshControl: refresherEnabled
         ? createElement(RefreshControl, extendObject({
           progressBackgroundColor: refresherBackground,