@mpxjs/webpack-plugin 2.10.5 → 2.10.6

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 })
@@ -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

@@ -147,6 +147,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 +215,13 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
             })
             : newY
         }
-        runOnJS(handleTriggerChange)({
-          x: newX,
-          y: newY,
-          type: 'setData'
-        })
+        if (propsRef.current.bindchange) {
+          runOnJS(handleTriggerChange)({
+            x: newX,
+            y: newY,
+            type: 'setData'
+          })
+        }
       }
     })()
   }, [x, y])
@@ -230,19 +233,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]
@@ -426,6 +416,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 +432,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 +446,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 +454,12 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
             offsetY.value = newY
           }
         }
+        if (propsRef.current.bindchange) {
+          runOnJS(handleTriggerChange)({
+            x: offsetX.value,
+            y: offsetY.value
+          })
+        }
       })
       .onTouchesUp((e: GestureTouchEvent) => {
         'worklet'
@@ -464,31 +468,41 @@ 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 (propsRef.current.bindchange) {
+              runOnJS(handleTriggerChange)({
+                x,
+                y
               })
-              : x
-          }
-          if (y !== offsetY.value) {
-            offsetY.value = animation
-              ? withSpring(y, {
-                duration: 1500,
-                dampingRatio: 0.8
-              })
-              : y
+            }
           }
+          return
         }
-      })
-      .onFinalize((e: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
-        'worklet'
-        isMoving.value = false
-        if (!inertia || disabled || !animation) return
+        // 惯性处理
         if (direction === 'horizontal' || direction === 'all') {
           xInertialMotion.value = true
           offsetX.value = withDecay({
@@ -497,6 +511,12 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
             clamp: draggableXRange.value
           }, () => {
             xInertialMotion.value = false
+            if (propsRef.current.bindchange) {
+              runOnJS(handleTriggerChange)({
+                x: offsetX.value,
+                y: offsetY.value
+              })
+            }
           })
         }
         if (direction === 'vertical' || direction === 'all') {
@@ -507,10 +527,23 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
             clamp: draggableYRange.value
           }, () => {
             yInertialMotion.value = false
+            if (propsRef.current.bindchange) {
+              runOnJS(handleTriggerChange)({
+                x: offsetX.value,
+                y: offsetY.value
+              })
+            }
           })
         }
       })
       .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'

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'