@mpxjs/webpack-plugin 2.10.3 → 2.10.4-beta.11

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

@@ -10,7 +10,7 @@
  * ✔ enable-back-to-top
  * ✘ enable-passive
  * ✔ refresher-enabled
- * ✘ refresher-threshold
+ * ✔ refresher-threshold(仅自定义下拉节点样式支持)
  * ✔ refresher-default-style(仅 android 支持)
  * ✔ refresher-background(仅 android 支持)
  * ✔ refresher-triggered
@@ -31,14 +31,14 @@
  * ✔ bindscrolltolower
  * ✔ bindscroll
  */
-import { ScrollView, RefreshControl } from 'react-native-gesture-handler'
-import { View, NativeSyntheticEvent, NativeScrollEvent, LayoutChangeEvent, ViewStyle } from 'react-native'
-import { JSX, ReactNode, RefObject, useRef, useState, useEffect, forwardRef, useContext, createElement, useMemo } from 'react'
-import { useAnimatedRef } from 'react-native-reanimated'
+import { ScrollView, RefreshControl, Gesture, GestureDetector } from 'react-native-gesture-handler'
+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'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, extendObject, flatGesture, GestureHandler } from './utils'
+import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, extendObject, flatGesture, GestureHandler, HIDDEN_STYLE } from './utils'
 import { IntersectionObserverContext, ScrollViewContext } from './context'
 
 interface ScrollViewProps {
@@ -58,6 +58,7 @@ interface ScrollViewProps {
   'refresher-enabled'?: boolean;
   'refresher-default-style'?: 'black' | 'white' | 'none';
   'refresher-background'?: string;
+  'refresher-threshold'?: number;
   'scroll-top'?: number;
   'scroll-left'?: number;
   'enable-offset'?: boolean;
@@ -68,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;
@@ -85,27 +87,29 @@ 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;
-  scrollEventThrottle: number;
-  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)
   const {
@@ -129,6 +133,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     'refresher-enabled': refresherEnabled,
     'refresher-default-style': refresherDefaultStyle,
     'refresher-background': refresherBackground,
+    'refresher-threshold': refresherThreshold = 45,
     'show-scrollbar': showScrollbar = true,
     'scroll-into-view': scrollIntoView = '',
     'scroll-top': scrollTop = 0,
@@ -141,18 +146,31 @@ 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)
 
-  const [refreshing, setRefreshing] = useState(true)
-
   const snapScrollTop = useRef(0)
   const snapScrollLeft = useRef(0)
 
+  const [refreshing, setRefreshing] = useState(false)
+
+  const [enableScroll, setEnableScroll] = useState(true)
+  const enableScrollValue = useSharedValue(true)
+
+  const [scrollBounces, setScrollBounces] = useState(false)
+  const bouncesValue = useSharedValue(!!false)
+
+  const translateY = useSharedValue(0)
+  const isAtTop = useSharedValue(true)
+  const refresherHeight = useSharedValue(0)
+
   const scrollOptions = useRef({
     contentLength: 0,
     offset: 0,
@@ -168,6 +186,14 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
 
   const firstScrollIntoViewChange = useRef<boolean>(false)
 
+  const refreshColor = {
+    black: ['#000'],
+    white: ['#fff']
+  }
+
+  const { refresherContent, otherContent } = getRefresherContent(props.children)
+  const hasRefresher = refresherContent && refresherEnabled
+
   const {
     normalStyle,
     hasVarDec,
@@ -195,14 +221,19 @@ 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 完成前先隐藏，避免安卓闪烁问题
+  const refresherLayoutStyle = useMemo(() => { return !hasRefresherLayoutRef.current ? HIDDEN_STYLE : {} }, [hasRefresherLayoutRef.current])
   const lastOffset = useRef(0)
 
   if (scrollX && scrollY) {
@@ -222,12 +253,6 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     }
   }, [scrollTop, scrollLeft])
 
-  useEffect(() => {
-    if (refreshing !== refresherTriggered) {
-      setRefreshing(!!refresherTriggered)
-    }
-  }, [refresherTriggered])
-
   useEffect(() => {
     if (scrollIntoView && __selectRef) {
       if (!firstScrollIntoViewChange.current) {
@@ -239,7 +264,23 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     firstScrollIntoViewChange.current = true
   }, [scrollIntoView])
 
-  function scrollTo ({ top = 0, left = 0, animated = false } : { top?: number; left?: number; animated?: boolean }) {
+  useEffect(() => {
+    if (refresherEnabled) {
+      setRefreshing(!!refresherTriggered)
+
+      if (!refresherContent) return
+
+      if (refresherTriggered) {
+        translateY.value = withTiming(refresherHeight.value)
+        resetScrollState(false)
+      } else {
+        translateY.value = withTiming(0)
+        resetScrollState(true)
+      }
+    }
+  }, [refresherTriggered])
+
+  function scrollTo ({ top = 0, left = 0, animated = false }: { top?: number; left?: number; animated?: boolean }) {
     scrollToOffset(left, top, animated)
   }
 
@@ -249,7 +290,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     const { nodeRef } = refs.getNodeInstance()
     nodeRef.current?.measureLayout(
       scrollViewRef.current,
-      (left: number, top:number) => {
+      (left: number, top: number) => {
         scrollToOffset(left, top)
       }
     )
@@ -333,6 +374,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     const { bindscroll } = props
     const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset
     const { width: scrollWidth, height: scrollHeight } = e.nativeEvent.contentSize
+    isAtTop.value = scrollTop <= 0
     bindscroll &&
       bindscroll(
         getCustomEvent('scroll', e, {
@@ -359,6 +401,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     const { bindscrollend } = props
     const { x: scrollLeft, y: scrollTop } = e.nativeEvent.contentOffset
     const { width: scrollWidth, height: scrollHeight } = e.nativeEvent.contentSize
+    isAtTop.value = scrollTop <= 0
     bindscrollend &&
       bindscrollend(
         getCustomEvent('scrollend', e, {
@@ -394,14 +437,6 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     }
   }
 
-  function onRefresh () {
-    const { bindrefresherrefresh } = props
-    bindrefresherrefresh &&
-      bindrefresherrefresh(
-        getCustomEvent('refresherrefresh', {}, { layoutRef }, props)
-      )
-  }
-
   function onScrollTouchStart (e: NativeSyntheticEvent<TouchEvent>) {
     const { bindtouchstart } = props
     bindtouchstart && bindtouchstart(e)
@@ -456,12 +491,172 @@ 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
     onScrollDrag(e)
   }
 
+  // 处理刷新
+  function onRefresh () {
+    if (hasRefresher && refresherTriggered === undefined) {
+      // 处理使用了自定义刷新组件，又没设置 refresherTriggered 的情况
+      setRefreshing(true)
+      setTimeout(() => {
+        setRefreshing(false)
+        translateY.value = withTiming(0)
+        if (!enableScrollValue.value) {
+          resetScrollState(true)
+        }
+      }, 500)
+    }
+    const { bindrefresherrefresh } = props
+    bindrefresherrefresh &&
+      bindrefresherrefresh(
+        getCustomEvent('refresherrefresh', {}, { layoutRef }, props)
+      )
+  }
+
+  function getRefresherContent (children: ReactNode) {
+    let refresherContent = null
+    const otherContent: ReactNode[] = []
+
+    Children.forEach(children, (child) => {
+      if (isValidElement(child) && child.props.slot === 'refresher') {
+        refresherContent = child
+      } else {
+        otherContent.push(child)
+      }
+    })
+
+    return {
+      refresherContent,
+      otherContent
+    }
+  }
+
+  // 刷新控件的动画样式
+  const refresherAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      top: -refresherHeight.value, // 初始隐藏在顶部
+      transform: [{ translateY: Math.min(translateY.value, refresherHeight.value) }],
+      backgroundColor: refresherBackground || 'transparent'
+    }
+  })
+
+  // 内容区域的动画样式 - 只有内容区域需要下移
+  const contentAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{
+        translateY: translateY.value > refresherHeight.value
+          ? refresherHeight.value
+          : translateY.value
+      }]
+    }
+  })
+
+  function onRefresherLayout (e: LayoutChangeEvent) {
+    const { height } = e.nativeEvent.layout
+    refresherHeight.value = height
+    hasRefresherLayoutRef.current = true
+  }
+
+  function updateScrollState (newValue: boolean) {
+    'worklet'
+    if (enableScrollValue.value !== newValue) {
+      enableScrollValue.value = newValue
+      runOnJS(setEnableScroll)(newValue)
+    }
+  }
+
+  const resetScrollState = (value: boolean) => {
+    enableScrollValue.value = value
+    setEnableScroll(value)
+  }
+
+  function updateBouncesState (newValue: boolean) {
+    'worklet'
+    if (bouncesValue.value !== newValue) {
+      bouncesValue.value = newValue
+      runOnJS(setScrollBounces)(newValue)
+    }
+  }
+
+  // 处理下拉刷新的手势
+  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)
+        }
+      }
+
+      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)
+        }
+      }
+    })
+    .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(setRefreshing)(false)
+        } else {
+          translateY.value = withTiming(refresherHeight.value)
+        }
+      } else if (event.translationY >= refresherHeight.value) {
+        // 触发刷新
+        translateY.value = withTiming(refresherHeight.value)
+        runOnJS(onRefresh)()
+      } else {
+        // 回弹
+        translateY.value = withTiming(0)
+        updateScrollState(true)
+        runOnJS(setRefreshing)(false)
+      }
+    })
+    .simultaneousWithExternalGesture(scrollViewRef)
+
   const scrollAdditionalProps: ScrollAdditionalProps = extendObject(
     {
       style: extendObject({}, innerStyle, layoutStyle),
@@ -473,9 +668,10 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
       scrollsToTop: enableBackToTop,
       showsHorizontalScrollIndicator: scrollX && showScrollbar,
       showsVerticalScrollIndicator: scrollY && showScrollbar,
-      scrollEnabled: scrollX || scrollY,
+      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,
@@ -491,68 +687,102 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
 
   if (enhanced) {
     Object.assign(scrollAdditionalProps, {
-      bounces,
+      bounces: hasRefresher ? scrollBounces : !!bounces,
       pagingEnabled
     })
   }
 
-  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 refreshColor = {
-    black: ['#000'],
-    white: ['#fff']
-  }
+  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(
+      ScrollViewComponent,
+      innerProps,
+      createElement(
+        Animated.View,
+        { style: [refresherAnimatedStyle, refresherLayoutStyle], onLayout: onRefresherLayout },
+        refresherContent
+      ),
+      createElement(
+        Animated.View,
+        { style: contentAnimatedStyle },
+        createElement(
+          ScrollViewContext.Provider,
+          { value: contextValue },
+          wrapChildren(
+            extendObject({}, props, { children: otherContent }),
+            {
+              hasVarDec,
+              varContext: varContextRef.current,
+              textStyle,
+              textProps
+            }
+          )
+        )
+      )
+    )
+  )
 
-  return createElement(
-    ScrollView,
+  const commonScrollView = createElement(
+    ScrollViewComponent,
     extendObject({}, innerProps, {
       refreshControl: refresherEnabled
         ? createElement(RefreshControl, extendObject({
           progressBackgroundColor: refresherBackground,
           refreshing: refreshing,
           onRefresh: onRefresh
-        }, (refresherDefaultStyle && refresherDefaultStyle !== 'none' ? { colors: refreshColor[refresherDefaultStyle] } : null)))
+        }, refresherDefaultStyle && refresherDefaultStyle !== 'none'
+          ? { colors: refreshColor[refresherDefaultStyle] }
+          : {}))
         : undefined
     }),
-    createElement(ScrollViewContext.Provider,
-      { value: contextValue },
-      wrapChildren(
-        props,
-        {
-          hasVarDec,
-          varContext: varContextRef.current,
-          textStyle,
-          textProps
-        }
-      )
+    createElement(ScrollViewContext.Provider, { value: contextValue },
+      wrapChildren(props, {
+        hasVarDec,
+        varContext: varContextRef.current,
+        textStyle,
+        textProps
+      })
     )
   )
+
+  return hasRefresher ? withRefresherScrollView : commonScrollView
 })
 
 _ScrollView.displayName = 'MpxScrollView'

package/lib/runtime/components/react/mpx-simple-text.tsx

@@ -1,18 +1,27 @@
 import { Text, TextProps } from 'react-native'
 import { JSX, createElement } from 'react'
-
+import useInnerProps from './getInnerListeners'
 import { extendObject } from './utils'
 
-const _Text2 = (props: TextProps): JSX.Element => {
+const SimpleText = (props: TextProps): JSX.Element => {
   const {
-    allowFontScaling = false
+    allowFontScaling = false,
+    children
   } = props
 
-  return createElement(Text, extendObject({}, props, {
-    allowFontScaling
-  }))
+  const innerProps = useInnerProps(
+    extendObject(
+      {},
+      props,
+      {
+        allowFontScaling
+      }
+    )
+  )
+
+  return createElement(Text, innerProps, children)
 }
 
-_Text2.displayName = 'MpxSimpleText'
+SimpleText.displayName = 'MpxSimpleText'
 
-export default _Text2
+export default SimpleText

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

@@ -1,23 +1,24 @@
 import { View, ViewProps, TextStyle } from 'react-native'
-import { createElement, forwardRef, useRef } from 'react'
-import useNodesRef, { HandlerRef } from './useNodesRef'
-import { extendObject, splitProps, splitStyle, wrapChildren } from './utils'
-
-const _View2 = forwardRef<HandlerRef<View, ViewProps>, ViewProps>((simpleViewProps: ViewProps, ref) => {
-  const nodeRef = useRef(null)
+import { createElement } from 'react'
+import { splitProps, splitStyle, wrapChildren, extendObject } from './utils'
+import useInnerProps from './getInnerListeners'
 
+const SimpleView = (simpleViewProps: ViewProps): JSX.Element => {
   const { textProps, innerProps: props = {} } = splitProps(simpleViewProps)
 
   const { textStyle, innerStyle = {} } = splitStyle(props.style || {})
 
-  useNodesRef(props, ref, nodeRef, {
-    style: innerStyle || {}
-  })
+  const innerProps = useInnerProps(
+    extendObject(
+      {},
+      props,
+      {
+        style: innerStyle
+      }
+    )
+  )
 
-  return createElement(View, extendObject({}, props, {
-    style: innerStyle,
-    ref: nodeRef
-  }), wrapChildren(
+  return createElement(View, innerProps, wrapChildren(
     props,
     {
       hasVarDec: false,
@@ -25,8 +26,8 @@ const _View2 = forwardRef<HandlerRef<View, ViewProps>, ViewProps>((simpleViewPro
       textProps
     }
   ))
-})
+}
 
-_View2.displayName = 'MpxSimpleView'
+SimpleView.displayName = 'MpxSimpleView'
 
-export default _View2
+export default SimpleView