@mpxjs/webpack-plugin 2.10.5 → 2.10.6-beta.2

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

@@ -1,7 +1,7 @@
-import React, { forwardRef, useRef, useState, useMemo, useEffect, useCallback } from 'react'
+import React, { forwardRef, useRef, useState, useMemo, useEffect, useCallback, createElement } from 'react'
 import { GestureResponderEvent, LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent, ScrollView, StyleSheet, View } from 'react-native'
 import Reanimated, { AnimatedRef, useAnimatedRef, useScrollViewOffset } from 'react-native-reanimated'
-import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious, isAndroid, isIOS, isHarmony } from '../utils'
+import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious, isAndroid, isIOS, isHarmony, extendObject } from '../utils'
 import useNodesRef, { HandlerRef } from '../useNodesRef'
 import PickerIndicator from './pickerViewIndicator'
 import PickerMask from './pickerViewMask'
@@ -302,33 +302,36 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
     })
 
   const renderScollView = () => {
-    return (
-      <PickerViewColumnAnimationContext.Provider value={offsetYShared}>
-        <Reanimated.ScrollView
-          ref={scrollViewRef}
-          bounces={true}
-          horizontal={false}
-          nestedScrollEnabled={true}
-          removeClippedSubviews={false}
-          showsVerticalScrollIndicator={false}
-          showsHorizontalScrollIndicator={false}
-          scrollEventThrottle={16}
-          {...layoutProps}
-          onTouchEnd={onClickOnceItem}
-          style={[{ width: '100%' }]}
-          decelerationRate="fast"
-          snapToOffsets={snapToOffsets}
-          onScroll={onScroll}
-          onScrollBeginDrag={onScrollBeginDrag}
-          onScrollEndDrag={onScrollEndDrag}
-          onMomentumScrollBegin={onMomentumScrollBegin}
-          onMomentumScrollEnd={onMomentumScrollEnd}
-          onContentSizeChange={onContentSizeChange}
-          contentContainerStyle={contentContainerStyle}
-        >
-          {renderInnerchild()}
-        </Reanimated.ScrollView>
-      </PickerViewColumnAnimationContext.Provider>
+    const innerProps = extendObject({}, layoutProps, {
+      ref: scrollViewRef,
+      bounces: true,
+      horizontal: false,
+      nestedScrollEnabled: true,
+      removeClippedSubviews: false,
+      showsVerticalScrollIndicator: false,
+      showsHorizontalScrollIndicator: false,
+      scrollEventThrottle: 16,
+      style: styles.scrollView,
+      decelerationRate: 'fast',
+      snapToOffsets: snapToOffsets,
+      onTouchEnd: onClickOnceItem,
+      onScroll,
+      onScrollBeginDrag,
+      onScrollEndDrag,
+      onMomentumScrollBegin,
+      onMomentumScrollEnd,
+      onContentSizeChange,
+      contentContainerStyle
+    }) as React.ComponentProps<typeof Reanimated.ScrollView>
+
+    return createElement(
+      PickerViewColumnAnimationContext.Provider,
+      { value: offsetYShared },
+      createElement(
+        Reanimated.ScrollView,
+        innerProps,
+        renderInnerchild()
+      )
     )
   }
 
@@ -356,7 +359,8 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
 })
 
 const styles = StyleSheet.create({
-  wrapper: { display: 'flex', flex: 1 }
+  wrapper: { display: 'flex', flex: 1 },
+  scrollView: { width: '100%' }
 })
 
 _PickerViewColumn.displayName = 'MpxPickerViewColumn'

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

@@ -22,6 +22,7 @@ import { FormContext, FormFieldValue, RadioGroupContext, GroupValue } from './co
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { useLayout, useTransformStyle, wrapChildren, extendObject } from './utils'
+import Portal from './mpx-portal'
 
 export interface RadioGroupProps {
   name: string
@@ -71,6 +72,7 @@ const radioGroup = forwardRef<
   const styleObj = extendObject({}, defaultStyle, style)
 
   const {
+    hasPositionFixed,
     hasSelfPercent,
     normalStyle,
     hasVarDec,
@@ -156,18 +158,27 @@ const radioGroup = forwardRef<
     }
   )
 
-  return createElement(View, innerProps, createElement(
-    RadioGroupContext.Provider,
-    { value: contextValue },
-    wrapChildren(
-      props,
+  const finalComponent = createElement(View, innerProps,
+    createElement(
+      RadioGroupContext.Provider,
       {
-        hasVarDec,
-        varContext: varContextRef.current
-      }
+        value: contextValue
+      },
+      wrapChildren(
+        props,
+        {
+          hasVarDec,
+          varContext: varContextRef.current
+        }
+      )
     )
   )
-  )
+
+  if (hasPositionFixed) {
+    return createElement(Portal, null, finalComponent)
+  }
+
+  return finalComponent
 })
 
 radioGroup.displayName = 'MpxRadioGroup'

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

@@ -12,6 +12,7 @@ import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject } from './utils'
 import Icon from './mpx-icon'
+import Portal from './mpx-portal'
 
 export interface RadioProps {
   value?: string
@@ -117,6 +118,7 @@ const Radio = forwardRef<HandlerRef<View, RadioProps>, RadioProps>(
     }
 
     const {
+      hasPositionFixed,
       hasSelfPercent,
       normalStyle,
       hasVarDec,
@@ -192,7 +194,7 @@ const Radio = forwardRef<HandlerRef<View, RadioProps>, RadioProps>(
       }
     }, [checked])
 
-    return createElement(View, innerProps,
+    const finalComponent = createElement(View, innerProps,
       createElement(
         View,
         { style: defaultStyle },
@@ -213,6 +215,12 @@ const Radio = forwardRef<HandlerRef<View, RadioProps>, RadioProps>(
         }
       )
     )
+
+    if (hasPositionFixed) {
+      return createElement(Portal, null, finalComponent)
+    }
+
+    return finalComponent
   }
 )
 

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

@@ -9,6 +9,7 @@ import useNodesRef, { HandlerRef } from '../useNodesRef' // 引入辅助函数
 import { useTransformStyle, useLayout, extendObject } from '../utils'
 import { WebView, WebViewMessageEvent } from 'react-native-webview'
 import { generateHTML } from './html'
+import Portal from '../mpx-portal'
 
 type Node = {
   type: 'node' | 'text'
@@ -69,7 +70,8 @@ const _RichText = forwardRef<HandlerRef<View, _RichTextProps>, _RichTextProps>((
     normalStyle,
     hasSelfPercent,
     setWidth,
-    setHeight
+    setHeight,
+    hasPositionFixed
   } = useTransformStyle(Object.assign({
     width: '100%',
     height: webViewHeight
@@ -109,7 +111,7 @@ const _RichText = forwardRef<HandlerRef<View, _RichTextProps>, _RichTextProps>((
 
   const html: string = typeof nodes === 'string' ? nodes : jsonToHtmlStr(nodes)
 
-  return createElement(View, innerProps,
+  let finalComponent: JSX.Element = createElement(View, innerProps,
     createElement(WebView, {
       source: { html: generateHTML(html) },
       onMessage: (event: WebViewMessageEvent) => {
@@ -117,6 +119,12 @@ const _RichText = forwardRef<HandlerRef<View, _RichTextProps>, _RichTextProps>((
       }
     })
   )
+
+  if (hasPositionFixed) {
+    finalComponent = createElement(Portal, null, finalComponent)
+  }
+
+  return finalComponent
 })
 
 _RichText.displayName = 'mpx-rich-text'

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

@@ -32,58 +32,59 @@
  * ✔ 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'
+import { warn, hasOwn } from '@mpxjs/utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, extendObject, flatGesture, GestureHandler, HIDDEN_STYLE } from './utils'
 import { IntersectionObserverContext, ScrollViewContext } from './context'
+import Portal from './mpx-portal'
 
 interface ScrollViewProps {
-  children?: ReactNode
-  enhanced?: boolean
-  bounces?: boolean
-  style?: ViewStyle
-  scrollEventThrottle?: number
-  'scroll-x'?: boolean
-  'scroll-y'?: boolean
-  'enable-back-to-top'?: boolean
-  'show-scrollbar'?: boolean
-  'paging-enabled'?: boolean
-  'upper-threshold'?: number
-  'lower-threshold'?: number
-  'scroll-with-animation'?: boolean
-  'refresher-triggered'?: boolean
-  'refresher-enabled'?: boolean
-  'refresher-default-style'?: 'black' | 'white' | 'none'
-  'refresher-background'?: string
-  'refresher-threshold'?: number
-  'scroll-top'?: number
-  'scroll-left'?: number
-  'enable-offset'?: boolean
-  'scroll-into-view'?: string
-  'enable-trigger-intersection-observer'?: boolean
-  'enable-var'?: boolean
-  'external-var-context'?: Record<string, any>
-  'parent-font-size'?: number
-  'parent-width'?: number
-  'parent-height'?: number
-  'wait-for'?: Array<GestureHandler>
-  'simultaneous-handlers'?: Array<GestureHandler>
-  'scroll-event-throttle'?: number
-  bindscrolltoupper?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void
-  bindscrolltolower?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void
-  bindscroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void
-  bindrefresherrefresh?: (event: NativeSyntheticEvent<unknown>) => void
-  binddragstart?: (event: NativeSyntheticEvent<DragEvent>) => void
-  binddragging?: (event: NativeSyntheticEvent<DragEvent>) => void
-  binddragend?: (event: NativeSyntheticEvent<DragEvent>) => void
-  bindtouchstart?: (event: NativeSyntheticEvent<TouchEvent>) => void
-  bindtouchmove?: (event: NativeSyntheticEvent<TouchEvent>) => void
-  bindtouchend?: (event: NativeSyntheticEvent<TouchEvent>) => void
-  bindscrollend?: (event: NativeSyntheticEvent<TouchEvent>) => void
+  children?: ReactNode;
+  enhanced?: boolean;
+  bounces?: boolean;
+  style?: ViewStyle;
+  'scroll-x'?: boolean;
+  'scroll-y'?: boolean;
+  'enable-back-to-top'?: boolean;
+  'show-scrollbar'?: boolean;
+  'paging-enabled'?: boolean;
+  'upper-threshold'?: number;
+  'lower-threshold'?: number;
+  'scroll-with-animation'?: boolean;
+  'refresher-triggered'?: boolean;
+  'refresher-enabled'?: boolean;
+  'refresher-default-style'?: 'black' | 'white' | 'none';
+  'refresher-background'?: string;
+  'refresher-threshold'?: number;
+  'scroll-top'?: number;
+  'scroll-left'?: number;
+  'enable-offset'?: boolean;
+  'scroll-into-view'?: string;
+  'enable-trigger-intersection-observer'?: boolean;
+  'enable-var'?: boolean;
+  'external-var-context'?: Record<string, any>;
+  '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;
+  bindscrolltoupper?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+  bindscrolltolower?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+  bindscroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+  bindrefresherrefresh?: (event: NativeSyntheticEvent<unknown>) => void;
+  binddragstart?: (event: NativeSyntheticEvent<DragEvent>) => void;
+  binddragging?: (event: NativeSyntheticEvent<DragEvent>) => void;
+  binddragend?: (event: NativeSyntheticEvent<DragEvent>) => void;
+  bindtouchstart?: (event: NativeSyntheticEvent<TouchEvent>) => void;
+  bindtouchmove?: (event: NativeSyntheticEvent<TouchEvent>) => void;
+  bindtouchend?: (event: NativeSyntheticEvent<TouchEvent>) => void;
+  bindscrollend?: (event: NativeSyntheticEvent<TouchEvent>) => void;
   __selectRef?: (selector: string, nodeType: 'node' | 'component', all?: boolean) => HandlerRef<any, any>
 }
 type ScrollAdditionalProps = {
@@ -108,6 +109,8 @@ type ScrollAdditionalProps = {
   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 {
@@ -144,10 +147,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)
 
@@ -194,6 +200,7 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     hasVarDec,
     varContextRef,
     hasSelfPercent,
+    hasPositionFixed,
     setWidth,
     setHeight
   } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
@@ -216,14 +223,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 完成前先隐藏，避免安卓闪烁问题
@@ -485,6 +493,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
@@ -643,7 +661,11 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
 
   const scrollAdditionalProps: ScrollAdditionalProps = extendObject(
     {
-      style: extendObject({}, innerStyle, layoutStyle),
+      style: extendObject(hasOwn(innerStyle, 'flex') || hasOwn(innerStyle, 'flexGrow')
+        ? {}
+        : {
+            flexGrow: 0
+          }, innerStyle, layoutStyle),
       pinchGestureEnabled: false,
       alwaysBounceVertical: false,
       alwaysBounceHorizontal: false,
@@ -655,7 +677,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,
@@ -710,11 +732,13 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
       'bindrefresherrefresh'
     ], { layoutRef })
 
+  const ScrollViewComponent = enableSticky ? AnimatedScrollView : ScrollView
+
   const withRefresherScrollView = createElement(
     GestureDetector,
     { gesture: panGesture },
     createElement(
-      ScrollView,
+      ScrollViewComponent,
       innerProps,
       createElement(
         Animated.View,
@@ -742,8 +766,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,
@@ -764,7 +788,12 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     )
   )
 
-  return hasRefresher ? withRefresherScrollView : commonScrollView
+  let scrollViewComponent = hasRefresher ? withRefresherScrollView : commonScrollView
+
+  if (hasPositionFixed) {
+    scrollViewComponent = createElement(Portal, null, scrollViewComponent)
+  }
+  return scrollViewComponent
 })
 
 _ScrollView.displayName = 'MpxScrollView'

package/lib/runtime/components/react/mpx-sticky-header.tsx

@@ -0,0 +1,179 @@
+import { useEffect, useRef, useContext, forwardRef, useMemo, createElement, ReactNode, useId } from 'react'
+import { Animated, StyleSheet, View, NativeSyntheticEvent, ViewStyle, LayoutChangeEvent, useAnimatedValue } from 'react-native'
+import { ScrollViewContext, StickyContext } from './context'
+import useNodesRef, { HandlerRef } from './useNodesRef'
+import { splitProps, splitStyle, useTransformStyle, wrapChildren, useLayout, extendObject } from './utils'
+import { error } from '@mpxjs/utils'
+import useInnerProps, { getCustomEvent } from './getInnerListeners'
+
+interface StickyHeaderProps {
+  children?: ReactNode;
+  style?: ViewStyle;
+  padding?: [number, number, number, number];
+  'offset-top'?: number;
+  'enable-var'?: boolean;
+  'external-var-context'?: Record<string, any>;
+  'parent-font-size'?: number;
+  'parent-width'?: number;
+  'parent-height'?: number;
+  bindstickontopchange?: (e: NativeSyntheticEvent<unknown>) => void;
+}
+
+const _StickyHeader = forwardRef<HandlerRef<View, StickyHeaderProps>, StickyHeaderProps>((stickyHeaderProps: StickyHeaderProps = {}, ref): JSX.Element => {
+  const { textProps, innerProps: props = {} } = splitProps(stickyHeaderProps)
+  const {
+    style,
+    bindstickontopchange,
+    padding = [0, 0, 0, 0],
+    'offset-top': offsetTop = 0,
+    'enable-var': enableVar,
+    'external-var-context': externalVarContext,
+    'parent-font-size': parentFontSize,
+    'parent-width': parentWidth,
+    'parent-height': parentHeight
+  } = props
+
+  const scrollViewContext = useContext(ScrollViewContext)
+  const stickyContext = useContext(StickyContext)
+  const { scrollOffset } = scrollViewContext
+  const { registerStickyHeader, unregisterStickyHeader } = stickyContext
+  const headerRef = useRef<View>(null)
+  const isStickOnTopRef = useRef(false)
+  const id = useId()
+
+  const {
+    normalStyle,
+    hasVarDec,
+    varContextRef,
+    hasSelfPercent,
+    setWidth,
+    setHeight
+  } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+
+  const { layoutRef, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: headerRef, onLayout })
+
+  const { textStyle, innerStyle = {} } = splitStyle(normalStyle)
+
+  const headerTopAnimated = useAnimatedValue(0)
+  // harmony animatedValue 不支持通过 _value 访问
+  const headerTopRef = useRef(0)
+
+  useEffect(() => {
+    registerStickyHeader({ key: id, updatePosition })
+    return () => {
+      unregisterStickyHeader(id)
+    }
+  }, [])
+
+  function updatePosition () {
+    if (headerRef.current) {
+      const scrollViewRef = scrollViewContext.gestureRef
+      if (scrollViewRef && scrollViewRef.current) {
+        headerRef.current.measureLayout(
+          scrollViewRef.current,
+          (left: number, top: number) => {
+            Animated.timing(headerTopAnimated, {
+              toValue: top,
+              duration: 0,
+              useNativeDriver: true
+            }).start()
+            headerTopRef.current = top
+          }
+        )
+      } else {
+        error('StickyHeader measureLayout error: scrollViewRef is not a valid native component reference')
+      }
+    }
+  }
+
+  function onLayout (e: LayoutChangeEvent) {
+    updatePosition()
+  }
+
+  useNodesRef(props, ref, headerRef, {
+    style: normalStyle
+  })
+
+  useEffect(() => {
+    if (!bindstickontopchange) return
+
+    const listener = scrollOffset.addListener((state: { value: number }) => {
+      const currentScrollValue = state.value
+      const newIsStickOnTop = currentScrollValue > headerTopRef.current
+      if (newIsStickOnTop !== isStickOnTopRef.current) {
+        isStickOnTopRef.current = newIsStickOnTop
+        bindstickontopchange(
+          getCustomEvent('stickontopchange', {}, {
+            detail: {
+              isStickOnTop: newIsStickOnTop
+            },
+            layoutRef
+          }, props))
+      }
+    })
+
+    return () => {
+      scrollOffset.removeListener(listener)
+    }
+  }, [])
+
+  const animatedStyle = useMemo(() => {
+    const translateY = Animated.subtract(scrollOffset, headerTopAnimated).interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, 1],
+      extrapolateLeft: 'clamp',
+      extrapolateRight: 'extend'
+    })
+
+    const finalTranslateY = offsetTop === 0
+      ? translateY
+      : Animated.add(
+        translateY,
+        Animated.subtract(scrollOffset, headerTopAnimated).interpolate({
+          inputRange: [0, 1],
+          outputRange: [0, offsetTop],
+          extrapolate: 'clamp'
+        })
+      )
+
+    return {
+      transform: [{ translateY: finalTranslateY }]
+    }
+  }, [scrollOffset, headerTopAnimated, offsetTop])
+
+  const innerProps = useInnerProps(extendObject({}, props, {
+    ref: headerRef,
+    style: extendObject({}, styles.content, innerStyle, animatedStyle, {
+      paddingTop: padding[0] || 0,
+      paddingRight: padding[1] || 0,
+      paddingBottom: padding[2] || 0,
+      paddingLeft: padding[3] || 0
+    })
+  }, layoutProps), [], { layoutRef })
+
+  return (
+    createElement(
+      Animated.View,
+      innerProps,
+      wrapChildren(
+        props,
+        {
+          hasVarDec,
+          varContext: varContextRef.current,
+          textStyle,
+          textProps
+        }
+      )
+    )
+  )
+})
+
+const styles = StyleSheet.create({
+  content: {
+    width: '100%',
+    zIndex: 10
+  }
+})
+
+_StickyHeader.displayName = 'MpxStickyHeader'
+export default _StickyHeader