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

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

@@ -17,6 +17,7 @@ import Cancel from './icons/cancel.png'
 import Download from './icons/download.png'
 import Search from './icons/search.png'
 import Clear from './icons/clear.png'
+import Portal from '../mpx-portal'
 
 export type IconType =
   | 'success'
@@ -75,6 +76,7 @@ const Icon = forwardRef<HandlerRef<Text, IconProps>, IconProps>(
     const styleObj = extendObject({}, defaultStyle, style)
 
     const {
+      hasPositionFixed,
       hasSelfPercent,
       normalStyle,
       setWidth,
@@ -103,7 +105,13 @@ const Icon = forwardRef<HandlerRef<Text, IconProps>, IconProps>(
       }
     )
 
-    return createElement(Image, innerProps)
+    const finalComponent = createElement(Image, innerProps)
+
+    if (hasPositionFixed) {
+      return createElement(Portal, null, finalComponent)
+    }
+
+    return finalComponent
   }
 )
 

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

@@ -27,6 +27,7 @@ import { SvgCssUri } from 'react-native-svg/css'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { SVG_REGEXP, useLayout, useTransformStyle, renderImage, extendObject } from './utils'
+import Portal from './mpx-portal'
 
 export type Mode =
   | 'scaleToFill'
@@ -159,7 +160,13 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
     }
   }
 
-  const { normalStyle, hasSelfPercent, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
+  const {
+    hasPositionFixed,
+    hasSelfPercent,
+    normalStyle,
+    setWidth,
+    setHeight
+  } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
 
   const { layoutRef, layoutStyle, layoutProps } = useLayout({
     props,
@@ -356,25 +363,31 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
 
   useEffect(() => {
     if (!isSvg && isLayoutMode) {
-      RNImage.getSize(src, (width: number, height: number) => {
-        state.current.imageWidth = width
-        state.current.imageHeight = height
-        state.current.ratio = !width ? 0 : height / width
-
-        if (isWidthFixMode
-          ? state.current.viewWidth
-          : isHeightFixMode
-            ? state.current.viewHeight
-            : state.current.viewWidth && state.current.viewHeight) {
-          state.current.viewWidth && setViewWidth(state.current.viewWidth)
-          state.current.viewHeight && setViewHeight(state.current.viewHeight)
-          setRatio(!width ? 0 : height / width)
-          setImageWidth(width)
-          setImageHeight(height)
-          state.current = {}
+      RNImage.getSize(
+        src,
+        (width: number, height: number) => {
+          state.current.imageWidth = width
+          state.current.imageHeight = height
+          state.current.ratio = !width ? 0 : height / width
+
+          if (isWidthFixMode
+            ? state.current.viewWidth
+            : isHeightFixMode
+              ? state.current.viewHeight
+              : state.current.viewWidth && state.current.viewHeight) {
+            state.current.viewWidth && setViewWidth(state.current.viewWidth)
+            state.current.viewHeight && setViewHeight(state.current.viewHeight)
+            setRatio(!width ? 0 : height / width)
+            setImageWidth(width)
+            setImageHeight(height)
+            state.current = {}
+            setLoaded(true)
+          }
+        },
+        () => {
           setLoaded(true)
         }
-      })
+      )
     }
   }, [src, isSvg, isLayoutMode])
 
@@ -441,7 +454,13 @@ const Image = forwardRef<HandlerRef<RNImage, ImageProps>, ImageProps>((props, re
 
   const LayoutImage = createElement(View, innerProps, loaded && BaseImage)
 
-  return isSvg ? SvgImage : isLayoutMode ? LayoutImage : BaseImage
+  const finalComponent = isSvg ? SvgImage : isLayoutMode ? LayoutImage : BaseImage
+
+  if (hasPositionFixed) {
+    return createElement(Portal, null, finalComponent)
+  }
+
+  return finalComponent
 })
 
 Image.displayName = 'mpx-image'

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

@@ -58,6 +58,7 @@ import { useUpdateEffect, useTransformStyle, useLayout, extendObject, isIOS } fr
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { FormContext, FormFieldValue, KeyboardAvoidContext } from './context'
+import Portal from './mpx-portal'
 
 type InputStyle = Omit<
   TextStyle & ViewStyle & Pick<FlexStyle, 'minHeight'>,
@@ -202,6 +203,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
   )
 
   const {
+    hasPositionFixed,
     hasSelfPercent,
     normalStyle,
     setWidth,
@@ -481,7 +483,14 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
       layoutRef
     }
   )
-  return createElement(TextInput, innerProps)
+
+  const finalComponent = createElement(TextInput, innerProps)
+
+  if (hasPositionFixed) {
+    return createElement(Portal, null, finalComponent)
+  }
+
+  return finalComponent
 })
 
 Input.displayName = 'MpxInput'

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

@@ -48,7 +48,7 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
           const { ref, cursorSpacing = 0 } = keyboardAvoid.current
           setTimeout(() => {
             ref?.current?.measure((x: number, y: number, width: number, height: number, pageX: number, pageY: number) => {
-              const aboveOffset = pageY + height - endCoordinates.screenY
+              const aboveOffset = offset.value + pageY + height - endCoordinates.screenY
               const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing
               const belowValue = Math.min(endCoordinates.height, aboveOffset + cursorSpacing)
               const value = aboveOffset > 0 ? belowValue : aboveValue

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

@@ -8,6 +8,7 @@ import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject } from './utils'
 import { LabelContext, LabelContextValue } from './context'
+import Portal from './mpx-portal'
 
 export interface LabelProps {
   for?: string
@@ -45,6 +46,7 @@ const Label = forwardRef<HandlerRef<View, LabelProps>, LabelProps>(
     const styleObj = extendObject({}, defaultStyle, style)
 
     const {
+      hasPositionFixed,
       hasSelfPercent,
       normalStyle,
       hasVarDec,
@@ -91,7 +93,7 @@ const Label = forwardRef<HandlerRef<View, LabelProps>, LabelProps>(
       }
     )
 
-    return createElement(View, innerProps, createElement(
+    const finalComponent = createElement(View, innerProps, createElement(
       LabelContext.Provider,
       { value: contextRef },
       wrapChildren(
@@ -104,6 +106,12 @@ const Label = forwardRef<HandlerRef<View, LabelProps>, LabelProps>(
         }
       )
     ))
+
+    if (hasPositionFixed) {
+      return createElement(Portal, null, finalComponent)
+    }
+
+    return finalComponent
   }
 )
 

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

@@ -8,6 +8,7 @@ import useNodesRef, { HandlerRef } from './useNodesRef'
 import useInnerProps from './getInnerListeners'
 import { MovableAreaContext } from './context'
 import { useTransformStyle, wrapChildren, useLayout, extendObject } from './utils'
+import Portal from './mpx-portal'
 
 interface MovableAreaProps {
   style?: Record<string, any>
@@ -30,6 +31,7 @@ const _MovableArea = forwardRef<HandlerRef<View, MovableAreaProps>, MovableAreaP
     normalStyle,
     hasVarDec,
     varContextRef,
+    hasPositionFixed,
     setWidth,
     setHeight
   } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight })
@@ -52,7 +54,7 @@ const _MovableArea = forwardRef<HandlerRef<View, MovableAreaProps>, MovableAreaP
       props,
       layoutProps,
       {
-        style: extendObject({ height: contextValue.height, width: contextValue.width, overflow: 'hidden' }, normalStyle, layoutStyle),
+        style: extendObject({ height: contextValue.height, width: contextValue.width }, normalStyle, layoutStyle),
         ref: movableViewRef
       }
     ),
@@ -60,7 +62,7 @@ const _MovableArea = forwardRef<HandlerRef<View, MovableAreaProps>, MovableAreaP
     { layoutRef }
   )
 
-  return createElement(MovableAreaContext.Provider, { value: contextValue }, createElement(
+  let movableComponent: JSX.Element = createElement(MovableAreaContext.Provider, { value: contextValue }, createElement(
     View,
     innerProps,
     wrapChildren(
@@ -71,6 +73,10 @@ const _MovableArea = forwardRef<HandlerRef<View, MovableAreaProps>, MovableAreaP
       }
     )
   ))
+  if (hasPositionFixed) {
+    movableComponent = createElement(Portal, null, movableComponent)
+  }
+  return movableComponent
 })
 
 _MovableArea.displayName = 'MpxMovableArea'

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

@@ -114,7 +114,8 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
     catchvtouchmove,
     catchtouchmove,
     bindtouchend,
-    catchtouchend
+    catchtouchend,
+    bindchange
   } = props
 
   const {
@@ -140,6 +141,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
     x: 0,
     y: 0
   })
+
   const draggableXRange = useSharedValue<[min: number, max: number]>([0, 0])
   const draggableYRange = useSharedValue<[min: number, max: number]>([0, 0])
   const isMoving = useSharedValue(false)
@@ -147,6 +149,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
   const yInertialMotion = useSharedValue(false)
   const isFirstTouch = useSharedValue(true)
   const touchEvent = useSharedValue<string>('')
+  const initialViewPosition = useSharedValue({ x: x || 0, y: y || 0 })
 
   const MovableAreaLayout = useContext(MovableAreaContext)
 
@@ -214,11 +217,13 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
             })
             : newY
         }
-        runOnJS(handleTriggerChange)({
-          x: newX,
-          y: newY,
-          type: 'setData'
-        })
+        if (bindchange) {
+          runOnJS(handleTriggerChange)({
+            x: newX,
+            y: newY,
+            type: 'setData'
+          })
+        }
       }
     })()
   }, [x, y])
@@ -230,19 +235,6 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
     }
   }, [MovableAreaLayout.height, MovableAreaLayout.width])
 
-  useAnimatedReaction(
-    () => ({
-      offsetX: offsetX.value,
-      offsetY: offsetY.value
-    }),
-    (currentValue: { offsetX: any; offsetY: any }) => {
-      const { offsetX, offsetY } = currentValue
-      runOnJS(handleTriggerChange)({
-        x: offsetX,
-        y: offsetY
-      })
-    })
-
   const getTouchSource = useCallback((offsetX: number, offsetY: number) => {
     const hasOverBoundary = offsetX < draggableXRange.value[0] || offsetX > draggableXRange.value[1] ||
       offsetY < draggableYRange.value[0] || offsetY > draggableYRange.value[1]
@@ -366,12 +358,14 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
   }, [])
 
   const triggerStartOnJS = ({ e }: { e: GestureTouchEvent }) => {
+    const { bindtouchstart, catchtouchstart } = propsRef.current
     extendEvent(e, 'start')
     bindtouchstart && bindtouchstart(e)
     catchtouchstart && catchtouchstart(e)
   }
 
   const triggerMoveOnJS = ({ e, hasTouchmove, hasCatchTouchmove, touchEvent }: { e: GestureTouchEvent; hasTouchmove: boolean; hasCatchTouchmove: boolean; touchEvent: string }) => {
+    const { bindhtouchmove, bindvtouchmove, bindtouchmove, catchhtouchmove, catchvtouchmove, catchtouchmove } = propsRef.current
     extendEvent(e, 'move')
     if (hasTouchmove) {
       if (touchEvent === 'htouchmove') {
@@ -393,6 +387,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
   }
 
   const triggerEndOnJS = ({ e }: { e: GestureTouchEvent }) => {
+    const { bindtouchend, catchtouchend } = propsRef.current
     extendEvent(e, 'end')
     bindtouchend && bindtouchend(e)
     catchtouchend && catchtouchend(e)
@@ -426,6 +421,13 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
           runOnJS(triggerStartOnJS)({ e })
         }
       })
+      .onStart(() => {
+        'worklet'
+        initialViewPosition.value = {
+          x: offsetX.value,
+          y: offsetY.value
+        }
+      })
       .onTouchesMove((e: GestureTouchEvent) => {
         'worklet'
         const changedTouches = e.changedTouches[0] || { x: 0, y: 0 }
@@ -435,11 +437,12 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
           isFirstTouch.value = false
         }
         handleTriggerMove(e)
+      })
+      .onUpdate((e: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
+        'worklet'
         if (disabled) return
-        const changeX = changedTouches.x - startPosition.value.x
-        const changeY = changedTouches.y - startPosition.value.y
         if (direction === 'horizontal' || direction === 'all') {
-          const newX = offsetX.value + changeX
+          const newX = initialViewPosition.value.x + e.translationX
           if (!outOfBounds) {
             const { x } = checkBoundaryPosition({ positionX: newX, positionY: offsetY.value })
             offsetX.value = x
@@ -448,7 +451,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
           }
         }
         if (direction === 'vertical' || direction === 'all') {
-          const newY = offsetY.value + changeY
+          const newY = initialViewPosition.value.y + e.translationY
           if (!outOfBounds) {
             const { y } = checkBoundaryPosition({ positionX: offsetX.value, positionY: newY })
             offsetY.value = y
@@ -456,6 +459,12 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
             offsetY.value = newY
           }
         }
+        if (bindchange) {
+          runOnJS(handleTriggerChange)({
+            x: offsetX.value,
+            y: offsetY.value
+          })
+        }
       })
       .onTouchesUp((e: GestureTouchEvent) => {
         'worklet'
@@ -464,53 +473,82 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
         if (bindtouchend || catchtouchend) {
           runOnJS(triggerEndOnJS)({ e })
         }
+      })
+      .onEnd((e: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
+        'worklet'
+        isMoving.value = false
         if (disabled) return
-        if (!inertia) {
+        // 处理没有惯性且超出边界的回弹
+        if (!inertia && outOfBounds) {
           const { x, y } = checkBoundaryPosition({ positionX: offsetX.value, positionY: offsetY.value })
-          if (x !== offsetX.value) {
-            offsetX.value = animation
-              ? withSpring(x, {
-                duration: 1500,
-                dampingRatio: 0.8
+          if (x !== offsetX.value || y !== offsetY.value) {
+            if (x !== offsetX.value) {
+              offsetX.value = animation
+                ? withSpring(x, {
+                  duration: 1500,
+                  dampingRatio: 0.8
+                })
+                : x
+            }
+            if (y !== offsetY.value) {
+              offsetY.value = animation
+                ? withSpring(y, {
+                  duration: 1500,
+                  dampingRatio: 0.8
+                })
+                : y
+            }
+            if (bindchange) {
+              runOnJS(handleTriggerChange)({
+                x,
+                y
               })
-              : x
+            }
           }
-          if (y !== offsetY.value) {
-            offsetY.value = animation
-              ? withSpring(y, {
-                duration: 1500,
-                dampingRatio: 0.8
-              })
-              : y
+        } else if (inertia) {
+          // 惯性处理
+          if (direction === 'horizontal' || direction === 'all') {
+            xInertialMotion.value = true
+            offsetX.value = withDecay({
+              velocity: e.velocityX / 10,
+              rubberBandEffect: outOfBounds,
+              clamp: draggableXRange.value
+            }, () => {
+              xInertialMotion.value = false
+              if (bindchange) {
+                runOnJS(handleTriggerChange)({
+                  x: offsetX.value,
+                  y: offsetY.value
+                })
+              }
+            })
+          }
+          if (direction === 'vertical' || direction === 'all') {
+            yInertialMotion.value = true
+            offsetY.value = withDecay({
+              velocity: e.velocityY / 10,
+              rubberBandEffect: outOfBounds,
+              clamp: draggableYRange.value
+            }, () => {
+              yInertialMotion.value = false
+              if (bindchange) {
+                runOnJS(handleTriggerChange)({
+                  x: offsetX.value,
+                  y: offsetY.value
+                })
+              }
+            })
           }
-        }
-      })
-      .onFinalize((e: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
-        'worklet'
-        isMoving.value = false
-        if (!inertia || disabled || !animation) return
-        if (direction === 'horizontal' || direction === 'all') {
-          xInertialMotion.value = true
-          offsetX.value = withDecay({
-            velocity: e.velocityX / 10,
-            rubberBandEffect: outOfBounds,
-            clamp: draggableXRange.value
-          }, () => {
-            xInertialMotion.value = false
-          })
-        }
-        if (direction === 'vertical' || direction === 'all') {
-          yInertialMotion.value = true
-          offsetY.value = withDecay({
-            velocity: e.velocityY / 10,
-            rubberBandEffect: outOfBounds,
-            clamp: draggableYRange.value
-          }, () => {
-            yInertialMotion.value = false
-          })
         }
       })
       .withRef(movableGestureRef)
+
+    if (direction === 'horizontal') {
+      gesturePan.activeOffsetX([-5, 5]).failOffsetY([-5, 5])
+    } else if (direction === 'vertical') {
+      gesturePan.activeOffsetY([-5, 5]).failOffsetX([-5, 5])
+    }
+
     if (simultaneousHandlers && simultaneousHandlers.length) {
       gesturePan.simultaneousWithExternalGesture(...simultaneousHandlers)
     }

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

@@ -1,4 +1,4 @@
-import React, { forwardRef, useRef, useContext, useEffect } from 'react'
+import React, { forwardRef, useRef, useContext, useEffect, createElement } from 'react'
 import { StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native'
 import { warn } from '@mpxjs/utils'
 import PickerSelector from './selector'
@@ -9,7 +9,7 @@ import PickerRegion from './region'
 import { FormContext, FormFieldValue, RouteContext } from '../context'
 import useNodesRef, { HandlerRef } from '../useNodesRef'
 import useInnerProps, { getCustomEvent } from '../getInnerListeners'
-import { extendObject } from '../utils'
+import { extendObject, useLayout } from '../utils'
 import { createPopupManager } from '../mpx-popup'
 import { EventType, LanguageCode, PickerMode, PickerProps } from './type'
 
@@ -127,26 +127,29 @@ const Picker = forwardRef<HandlerRef<View, PickerProps>, PickerProps>(
     const buttonText = buttonTextMap[(global.__mpx?.i18n?.locale as LanguageCode) || 'zh-CN']
     const pickerValue = useRef(value)
     pickerValue.current = Array.isArray(value) ? value.slice() : value
-    const innerLayout = useRef({})
-    const nodeRef = useRef(null)
+    const nodeRef = useRef<View>(null)
     const pickerRef = useRef<any>(null)
     const { open, show, hide, remove } = useRef(createPopupManager()).current
 
     useNodesRef<View, PickerProps>(props, ref, nodeRef)
+    const { layoutRef, layoutProps } = useLayout({
+      props,
+      hasSelfPercent: false,
+      nodeRef
+    })
+
     const innerProps = useInnerProps(
       extendObject(
         {},
         props,
         {
           ref: nodeRef
-        }
+        },
+        layoutProps
       ),
       [],
-      { layoutRef: innerLayout }
+      { layoutRef }
     )
-    const getInnerLayout = (layout: React.MutableRefObject<{}>) => {
-      innerLayout.current = layout.current
-    }
 
     useEffect(() => {
       if (range && pickerRef.current && mode === PickerMode.MULTI_SELECTOR) {
@@ -195,7 +198,7 @@ const Picker = forwardRef<HandlerRef<View, PickerProps>, PickerProps>(
       const eventData = getCustomEvent(
         'columnchange',
         {},
-        { detail: { column: columnIndex, value }, layoutRef: innerLayout }
+        { detail: { column: columnIndex, value }, layoutRef }
       )
       props.bindcolumnchange?.(eventData)
     }
@@ -209,7 +212,7 @@ const Picker = forwardRef<HandlerRef<View, PickerProps>, PickerProps>(
       const eventData = getCustomEvent(
         'change',
         {},
-        { detail: { value: pickerValue.current }, layoutRef: innerLayout }
+        { detail: { value: pickerValue.current }, layoutRef }
       )
       bindchange?.(eventData)
       hide()
@@ -220,7 +223,6 @@ const Picker = forwardRef<HandlerRef<View, PickerProps>, PickerProps>(
       children,
       bindchange: onChange,
       bindcolumnchange: onColumnChange,
-      getInnerLayout,
       getRange: () => range
     })
 
@@ -269,10 +271,10 @@ const Picker = forwardRef<HandlerRef<View, PickerProps>, PickerProps>(
       }
     }, [])
 
-    return (
-      <TouchableWithoutFeedback onPress={show}>
-        {children}
-      </TouchableWithoutFeedback>
+    return createElement(
+      TouchableWithoutFeedback,
+      { onPress: show },
+      createElement(View, innerProps, children)
     )
   }
 )

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

@@ -1,5 +1,5 @@
 import { View } from 'react-native'
-import React, { forwardRef, useRef } from 'react'
+import React, { createElement, forwardRef, useRef } from 'react'
 import useInnerProps, { getCustomEvent } from '../getInnerListeners'
 import useNodesRef, { HandlerRef } from '../useNodesRef'
 import {
@@ -11,6 +11,7 @@ import {
   extendObject
 } from '../utils'
 import { PickerViewStyleContext } from './pickerVIewContext'
+import Portal from '../mpx-portal'
 import type { AnyFunc } from '../types/common'
 /**
  * ✔ value
@@ -86,7 +87,8 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
     varContextRef,
     hasSelfPercent,
     setWidth,
-    setHeight
+    setHeight,
+    hasPositionFixed
   } = useTransformStyle(style, { enableVar, externalVarContext })
 
   useNodesRef<View, PickerViewProps>(props, ref, nodeRef, {
@@ -222,13 +224,25 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
     return renderColumns
   }
 
-  return (
-    <PickerViewStyleContext.Provider value={textStyle}>
-      <View {...innerProps}>
-        <View style={[styles.wrapper]}>{renderPickerColumns()}</View>
-      </View>
-    </PickerViewStyleContext.Provider>
+  const finalComponent = createElement(
+    PickerViewStyleContext.Provider,
+    { value: textStyle },
+    createElement(
+      View,
+      innerProps,
+      createElement(
+        View,
+        { style: [styles.wrapper] },
+        renderPickerColumns()
+      )
+    )
   )
+
+  if (hasPositionFixed) {
+    return createElement(Portal, null, finalComponent)
+  }
+
+  return finalComponent
 })
 
 _PickerView.displayName = 'MpxPickerView'