@mpxjs/webpack-plugin 2.10.24-test.1 → 2.11.0

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

@@ -97,7 +97,6 @@ export interface InputProps {
   'placeholder-style'?: { color?: string }
   'enable-offset'?: boolean
   'enable-var'?: boolean
-  'parent-font-size'?: number
   'parent-width'?: number
   'parent-height'?: number
   // 只有 RN 环境读取
@@ -147,7 +146,6 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     'selection-start': selectionStart = -1,
     'selection-end': selectionEnd = -1,
     'enable-var': enableVar,
-    'parent-font-size': parentFontSize,
     'parent-width': parentWidth,
     'parent-height': parentHeight,
     'adjust-position': adjustPosition = true,
@@ -210,7 +208,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     normalStyle,
     setWidth,
     setHeight
-  } = useTransformStyle(styleObj, { enableVar, parentFontSize, parentWidth, parentHeight })
+  } = useTransformStyle(styleObj, { enableVar, parentWidth, parentHeight })
 
   const nodeRef = useRef(null)
   useNodesRef(props, ref, nodeRef, {
@@ -293,7 +291,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     setKeyboardAvoidContext()
   }
 
-  const onTouchEnd = (evt: NativeSyntheticEvent<NativeTouchEvent & { origin?: string }>) => {
+  const markEventOrigin = (evt: NativeSyntheticEvent<NativeTouchEvent & { origin?: string }>) => {
     evt.nativeEvent.origin = 'input'
   }
 
@@ -471,7 +469,18 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
   // React Native 的 TextInput 在 textAlign center + placeholder 时光标会跑到右边
   // 这个问题只在 Android 上出现
   // 参考：https://github.com/facebook/react-native/issues/28794 (Android only)
-  const needMultilineFix = isAndroid && !multiline
+  const conditionalTextInputProps: {
+    multiline?: boolean
+    numberOfLines?: number
+    enterKeyHint?: ConfirmType
+  } = {}
+  if (isAndroid && !multiline && props.placeholder && normalStyle.textAlign === 'center') {
+    conditionalTextInputProps.multiline = true
+    conditionalTextInputProps.numberOfLines = 1
+  }
+  if (!multiline || confirmType !== 'return') {
+    conditionalTextInputProps.enterKeyHint = confirmType
+  }
 
   const innerProps = useInnerProps(
     extendObject(
@@ -492,13 +501,14 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
         autoFocus: isAutoFocus,
         selection: selectionStart > -1 || typeof cursor === 'number' ? selection : undefined,
         selectionColor: cursorColor,
-        blurOnSubmit: multiline ? confirmType !== 'return' : !confirmHold,
+        submitBehavior: multiline ? (confirmType === 'return' ? 'newline' : 'blurAndSubmit') : (confirmHold ? 'submit' : 'blurAndSubmit'),
         underlineColorAndroid: 'rgba(0,0,0,0)',
         textAlignVertical: textAlignVertical,
         placeholderTextColor: placeholderStyle?.color,
-        multiline: multiline || needMultilineFix,
+        multiline,
         onTouchStart,
-        onTouchEnd,
+        onTouchEnd: markEventOrigin,
+        onTouchMove: markEventOrigin,
         onFocus,
         onBlur,
         onChange,
@@ -506,8 +516,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
         onContentSizeChange,
         onSubmitEditing: bindconfirm && onSubmitEditing
       },
-      needMultilineFix ? { numberOfLines: 1 } : {},
-      !!multiline && confirmType === 'return' ? {} : { enterKeyHint: confirmType }
+      conditionalTextInputProps
     ),
     [
       'name',

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

@@ -16,7 +16,6 @@ export interface LabelProps {
   'enable-offset'?: boolean
   'enable-var'?: boolean
   'enable-text-pass-through'?: boolean
-  'parent-font-size'?: number
   'parent-width'?: number
   'parent-height'?: number
   children: ReactNode
@@ -32,7 +31,6 @@ const Label = forwardRef<HandlerRef<View, LabelProps>, LabelProps>(
       style = {},
       'enable-var': enableVar,
       'enable-text-pass-through': enableTextPassThrough,
-      'parent-font-size': parentFontSize,
       'parent-width': parentWidth,
       'parent-height': parentHeight
     } = props
@@ -51,7 +49,7 @@ const Label = forwardRef<HandlerRef<View, LabelProps>, LabelProps>(
       varContextRef,
       setWidth,
       setHeight
-    } = useTransformStyle(style, { enableVar, parentFontSize, parentWidth, parentHeight, defaultStyle })
+    } = useTransformStyle(style, { enableVar, parentWidth, parentHeight, defaultStyle })
 
     const nodeRef = useRef(null)
     useNodesRef(props, ref, nodeRef, { style: normalStyle })

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

@@ -17,13 +17,12 @@ interface MovableAreaProps {
   height?: number
   'enable-offset'?: boolean
   'enable-var'?: boolean
-  'parent-font-size'?: number
   'parent-width'?: number
   'parent-height'?: number
 }
 
 const _MovableArea = forwardRef<HandlerRef<View, MovableAreaProps>, MovableAreaProps>((props: MovableAreaProps, ref): JSX.Element => {
-  const { style = {}, 'enable-var': enableVar, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props
+  const { style = {}, 'enable-var': enableVar, 'parent-width': parentWidth, 'parent-height': parentHeight } = props
 
   const {
     hasSelfPercent,
@@ -33,7 +32,7 @@ const _MovableArea = forwardRef<HandlerRef<View, MovableAreaProps>, MovableAreaP
     hasPositionFixed,
     setWidth,
     setHeight
-  } = useTransformStyle(style, { enableVar, parentFontSize, parentWidth, parentHeight })
+  } = useTransformStyle(style, { enableVar, parentWidth, parentHeight })
 
   const movableViewRef = useRef(null)
   useNodesRef(props, ref, movableViewRef, {

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

@@ -180,7 +180,6 @@ interface MovableViewProps {
   inertia?: boolean
   'enable-var'?: boolean
   'enable-text-pass-through'?: boolean
-  'parent-font-size'?: number
   'parent-width'?: number
   'parent-height'?: number
   'disable-event-passthrough'?: boolean
@@ -214,7 +213,6 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
     'out-of-bounds': outOfBounds = false,
     'enable-var': enableVar,
     'enable-text-pass-through': enableTextPassThrough,
-    'parent-font-size': parentFontSize,
     'parent-width': parentWidth,
     'parent-height': parentHeight,
     direction = 'none',
@@ -243,7 +241,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
     varContextRef,
     setWidth,
     setHeight
-  } = useTransformStyle(Object.assign({}, style, styles.container), { enableVar, parentFontSize, parentWidth, parentHeight })
+  } = useTransformStyle(Object.assign({}, style, styles.container), { enableVar, parentWidth, parentHeight })
 
   const navigation = useNavigation()
 

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

@@ -95,7 +95,7 @@ const MpxNav = memo(({ pageConfig, navigation }: MpxNavProps) => {
   }
   const isCustom = innerPageConfig.navigationStyle === 'custom'
   const navigationBarTextStyle = useMemo(() => validBarTextStyle(innerPageConfig.navigationBarTextStyle), [innerPageConfig.navigationBarTextStyle])
-  // 状态栏的颜色
+  // 状态栏由 MpxNav 根据页面配置统一控制，避免 native-stack screenOptions 在页面切换时覆盖页面级配置。
   const statusBarElement = (
     <StatusBar
       translucent

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

@@ -6,10 +6,11 @@ import PickerMultiSelector from './multiSelector'
 import PickerTime from './time'
 import PickerDate from './date'
 import PickerRegion from './region'
+import Portal from '../mpx-portal'
 import { FormContext, FormFieldValue, RouteContext } from '../context'
 import useNodesRef, { HandlerRef } from '../useNodesRef'
 import useInnerProps, { getCustomEvent } from '../getInnerListeners'
-import { extendObject, useLayout } from '../utils'
+import { extendObject, splitProps, splitStyle, useLayout, useTextPassThrough, useTransformStyle, wrapChildren } from '../utils'
 import { createPopupManager } from '../mpx-popup'
 import { EventType, LanguageCode, PickerMode, PickerProps } from './type'
 
@@ -78,13 +79,13 @@ const styles = StyleSheet.create({
   }
 })
 
-const pickerModalMap: Record<PickerMode, React.ComponentType<PickerProps>> = {
+const pickerModalMap = {
   [PickerMode.SELECTOR]: PickerSelector,
   [PickerMode.MULTI_SELECTOR]: PickerMultiSelector,
   [PickerMode.TIME]: PickerTime,
   [PickerMode.DATE]: PickerDate,
   [PickerMode.REGION]: PickerRegion
-}
+} satisfies Record<PickerMode, React.ComponentType<any>>
 
 const getDefaultValue = (mode: PickerMode) => {
   switch (mode) {
@@ -111,17 +112,26 @@ const buttonTextMap: Record<LanguageCode, { cancel: string; confirm: string }> =
 }
 
 const Picker = forwardRef<HandlerRef<View, PickerProps>, PickerProps>(
-  (props: PickerProps, ref): React.JSX.Element => {
+  (pickerProps: PickerProps, ref): React.JSX.Element => {
+    const { textProps, innerProps: splitInnerProps } = splitProps(pickerProps)
+    const props = (splitInnerProps || {}) as PickerProps
     const {
       mode,
       value,
-      range = null,
+      range = [],
       children,
       disabled,
       bindcancel,
       bindchange,
-      'header-text': headerText = ''
+      'header-text': headerText = '',
+      style,
+      'enable-var': enableVar,
+      'enable-text-pass-through': enableTextPassThrough,
+      'parent-width': parentWidth,
+      'parent-height': parentHeight
     } = props
+    const modalProps = props as any
+    const rangeKey = modalProps['range-key']
 
     const { pageId } = useContext(RouteContext) || {}
     const buttonText = buttonTextMap[(global.__mpx?.i18n?.locale as LanguageCode) || 'zh-CN']
@@ -129,12 +139,31 @@ const Picker = forwardRef<HandlerRef<View, PickerProps>, PickerProps>(
     pickerValue.current = Array.isArray(value) ? value.slice() : value
     const nodeRef = useRef<View>(null)
     const pickerRef = useRef<any>(null)
-    const { open, show, hide, remove } = useRef(createPopupManager()).current
+    const { open, show, hide, remove, update } = useRef(createPopupManager()).current
+    const {
+      normalStyle,
+      hasVarDec,
+      varContextRef,
+      hasSelfPercent,
+      hasPositionFixed,
+      setWidth,
+      setHeight
+    } = useTransformStyle(style, { enableVar, parentWidth, parentHeight })
+    const { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle)
+    const textPassThrough = useTextPassThrough(textStyle, textProps, { enableTextPassThrough })
 
-    useNodesRef<View, PickerProps>(props, ref, nodeRef)
-    const { layoutRef, layoutProps } = useLayout({
+    if (backgroundStyle) {
+      warn('Picker does not support background image-related styles!')
+    }
+
+    useNodesRef<View, PickerProps>(props, ref, nodeRef, {
+      style: normalStyle
+    })
+    const { layoutRef, layoutProps, layoutStyle } = useLayout({
       props,
-      hasSelfPercent: false,
+      hasSelfPercent,
+      setWidth,
+      setHeight,
       nodeRef
     })
 
@@ -143,7 +172,8 @@ const Picker = forwardRef<HandlerRef<View, PickerProps>, PickerProps>(
         {},
         props,
         {
-          ref: nodeRef
+          ref: nodeRef,
+          style: extendObject({}, innerStyle, layoutStyle)
         },
         layoutProps
       ),
@@ -151,6 +181,12 @@ const Picker = forwardRef<HandlerRef<View, PickerProps>, PickerProps>(
         'mode',
         'value',
         'range',
+        'range-key',
+        'start',
+        'end',
+        'fields',
+        'level',
+        'custom-item',
         'disabled',
         'bindcancel',
         'bindchange',
@@ -163,9 +199,9 @@ const Picker = forwardRef<HandlerRef<View, PickerProps>, PickerProps>(
 
     useEffect(() => {
       if (range && pickerRef.current && mode === PickerMode.MULTI_SELECTOR) {
-        pickerRef.current.updateRange?.(range)
+        pickerRef.current.updateRange?.(range, rangeKey)
       }
-    }, [JSON.stringify(range)])
+    }, [JSON.stringify(range), rangeKey, mode])
 
     /** --- form 表单组件内部方法 --- */
     const getValue = () => {
@@ -228,15 +264,9 @@ const Picker = forwardRef<HandlerRef<View, PickerProps>, PickerProps>(
       hide()
     }
 
-    const specificProps = extendObject({}, innerProps, {
-      mode,
-      children,
-      bindchange: onChange,
-      bindcolumnchange: onColumnChange,
-      getRange: () => range
-    })
+    const getContentHeight = () => headerText ? 350 : 310
 
-    const renderPickerContent = () => {
+    const getPickerContent = () => {
       if (disabled) {
         return null
       }
@@ -244,9 +274,21 @@ const Picker = forwardRef<HandlerRef<View, PickerProps>, PickerProps>(
       if (!(_mode in pickerModalMap)) {
         return warn(`[Mpx runtime warn]: Unsupported <picker> mode: ${mode}`)
       }
+      const specificProps = {
+        mode: _mode,
+        range,
+        'range-key': rangeKey,
+        start: modalProps.start,
+        end: modalProps.end,
+        fields: modalProps.fields,
+        level: modalProps.level,
+        'custom-item': modalProps['custom-item'],
+        bindchange: onChange,
+        bindcolumnchange: onColumnChange
+      } as PickerProps
       const _value: any = value
-      const PickerModal = pickerModalMap[_mode]
-      const renderPickerModal = (
+      const PickerModal = pickerModalMap[_mode] as React.ComponentType<PickerProps>
+      return (
         <>
           {headerText && (
             <View style={[styles.header]}>
@@ -270,22 +312,51 @@ const Picker = forwardRef<HandlerRef<View, PickerProps>, PickerProps>(
           </View>
         </>
       )
-      const contentHeight = headerText ? 350 : 310
-      open(renderPickerModal, pageId, { contentHeight })
+    }
+
+    const openPickerContent = () => {
+      const renderPickerModal = getPickerContent()
+      if (!renderPickerModal) {
+        return
+      }
+      open(renderPickerModal, pageId, { contentHeight: getContentHeight() })
     }
 
     useEffect(() => {
-      renderPickerContent()
+      openPickerContent()
       return () => {
         remove()
       }
     }, [])
 
-    return createElement(
+    const showPicker = () => {
+      const renderPickerModal = getPickerContent()
+      if (!renderPickerModal) {
+        return
+      }
+      update(renderPickerModal, { contentHeight: getContentHeight() })
+      show()
+    }
+
+    const finalComponent = createElement(
       TouchableWithoutFeedback,
-      { onPress: show },
-      createElement(View, innerProps, children)
+      { onPress: showPicker },
+      createElement(
+        View,
+        innerProps,
+        wrapChildren(children, {
+          hasVarDec,
+          varContext: varContextRef.current,
+          textPassThrough
+        })
+      )
     )
+
+    if (hasPositionFixed) {
+      return createElement(Portal, null, finalComponent)
+    }
+
+    return finalComponent
   }
 )
 

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

@@ -23,7 +23,7 @@ const styles = StyleSheet.create({
 })
 
 const formatRangeFun = (range: RangeItem[], rangeKey = '') =>
-  rangeKey ? range.map((item: Obj) => item[rangeKey]) : range
+  rangeKey ? range.map((item) => (item as Obj)[rangeKey]) : range
 
 const formatValueFn = (value: number | number[]) => {
   return Array.isArray(value) ? value : [value]
@@ -54,8 +54,8 @@ const PickerMultiSelector = forwardRef<
     }
   }, [formatValue])
 
-  const updateRange = (newRange: RangeItem[]) => {
-    const range = formatRangeFun(newRange.slice(), props['range-key'])
+  const updateRange = (newRange: RangeItem[], rangeKey?: string) => {
+    const range = formatRangeFun(newRange.slice(), rangeKey)
     setFormatRange(range)
   }
 

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

@@ -24,7 +24,7 @@ const styles = StyleSheet.create({
 })
 
 const formatRangeFun = (range: RangeItem[], rangeKey = '') =>
-  rangeKey ? range.map((item: Obj) => item[rangeKey]) : range
+  rangeKey ? range.map((item) => (item as Obj)[rangeKey]) : range
 
 const formatValueFn = (value: number | number[] = 0) => {
   const _value = Array.isArray(value) ? value[0] : value

package/lib/runtime/components/react/mpx-picker/type.ts

@@ -28,6 +28,10 @@ export interface BasePickerProps {
   /** 作为表单组件时的名称 */
   name?: string
   style?: Record<string, any>
+  'enable-var'?: boolean
+  'enable-text-pass-through'?: boolean
+  'parent-width'?: number
+  'parent-height'?: number
   children?: React.ReactNode
   range?: RangeItem[]
   ref?: any

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

@@ -11,7 +11,6 @@ import {
   extendObject,
   useTextPassThrough
 } from '../utils'
-import { PickerViewStyleContext } from './pickerVIewContext'
 import Portal from '../mpx-portal'
 import type { AnyFunc } from '../types/common'
 /**
@@ -76,6 +75,7 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
     'mask-style': pickerMaskStyle = {},
     'enable-var': enableVar,
     'enable-text-pass-through': enableTextPassThrough
+
   } = props
   const { height: indicatorH, ...pickerIndicatorStyle } = indicatorStyle
   const nodeRef = useRef(null)
@@ -187,15 +187,7 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
         enableWheelAnimation
       }
     )
-    const realElement = React.cloneElement(child, wrappedProps)
-    return wrapChildren(
-      realElement,
-      {
-        hasVarDec,
-        varContext: varContextRef.current,
-        textPassThrough
-      }
-    )
+    return React.cloneElement(child, wrappedProps)
   }
 
   const validateChildInitialIndex = (index: number, data: React.ReactNode[]) => {
@@ -230,15 +222,18 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
   }
 
   const finalComponent = createElement(
-    PickerViewStyleContext.Provider,
-    { value: textStyle },
+    View,
+    innerProps,
     createElement(
       View,
-      innerProps,
-      createElement(
-        View,
-        { style: [styles.wrapper] },
-        renderPickerColumns()
+      { style: [styles.wrapper] },
+      wrapChildren(
+        renderPickerColumns(),
+        {
+          hasVarDec,
+          varContext: varContextRef.current,
+          textPassThrough
+        }
       )
     )
   )

package/lib/runtime/components/react/mpx-picker-view/pickerVIewContext.ts

@@ -16,12 +16,3 @@ export const usePickerViewColumnAnimationContext = () => {
   }
   return value
 }
-
-export const PickerViewStyleContext = createContext<
-    Record<string, any> | undefined
->(undefined)
-
-export const usePickerViewStyleContext = () => {
-  const value = useContext(PickerViewStyleContext)
-  return value
-}

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

@@ -1,7 +1,7 @@
 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, extendObject } from '../utils'
+import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious, isAndroid, isIOS, isHarmony, extendObject, useTextPassThrough, wrapChildren } from '../utils'
 import useNodesRef, { HandlerRef } from '../useNodesRef'
 import PickerIndicator from './pickerViewIndicator'
 import PickerMask from './pickerViewMask'
@@ -26,6 +26,7 @@ interface ColumnProps {
   pickerMaskStyle: Record<string, any>
   pickerIndicatorStyle: Record<string, any>
   enableWheelAnimation?: boolean
+  'enable-text-pass-through'?: boolean
 }
 
 const visibleCount = 5
@@ -41,17 +42,22 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
     pickerMaskStyle,
     pickerIndicatorStyle,
     enableWheelAnimation = true,
-    'enable-var': enableVar
+    'enable-var': enableVar,
+    'enable-text-pass-through': enableTextPassThrough
+
   } = props
 
   const {
     normalStyle,
+    hasVarDec,
+    varContextRef,
     hasSelfPercent,
     setWidth,
     setHeight
   } = useTransformStyle(style, { enableVar })
-  const { textStyle = {} } = splitStyle(normalStyle)
-  const { textProps = {} } = splitProps(props)
+  const { textStyle } = splitStyle(normalStyle)
+  const { textProps } = splitProps(props)
+  const textPassThrough = useTextPassThrough(textStyle, textProps, { enableTextPassThrough })
   const scrollViewRef = useAnimatedRef<Reanimated.ScrollView>()
   const offsetYShared = useScrollViewOffset(scrollViewRef as AnimatedRef<Reanimated.ScrollView>)
 
@@ -60,14 +66,14 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
   })
 
   const { height: pickerH, itemHeight } = wrapperStyle
-  const [itemRawH, setItemRawH] = useState(itemHeight)
+  const [itemRawH, setItemRawH] = useState(Math.round(itemHeight))
   const maxIndex = useMemo(() => columnData.length - 1, [columnData])
   const prevScrollingInfo = useRef({ index: initialIndex, y: 0 })
   const dragging = useRef(false)
   const scrolling = useRef(false)
-  const timerResetPosition = useRef<NodeJS.Timeout | null>(null)
-  const timerScrollTo = useRef<NodeJS.Timeout | null>(null)
-  const timerClickOnce = useRef<NodeJS.Timeout | null>(null)
+  const timerResetPosition = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const timerScrollTo = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const timerClickOnce = useRef<ReturnType<typeof setTimeout> | null>(null)
   const activeIndex = useRef(initialIndex)
   const prevIndex = usePrevious(initialIndex)
   const prevMaxIndex = usePrevious(maxIndex)
@@ -83,8 +89,8 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
   })
 
   const paddingHeight = useMemo(
-    () => Math.round((pickerH - itemHeight) / 2),
-    [pickerH, itemHeight]
+    () => (pickerH - itemRawH) / 2,
+    [pickerH, itemRawH]
   )
 
   const snapToOffsets = useMemo(
@@ -134,6 +140,16 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
     }
   }, [])
 
+  // `contentOffset` prop sets visual position but does not fire scroll events,
+  // so `offsetYShared` (from `useScrollViewOffset`) stays at 0 until the user scrolls.
+  // Directly sync it whenever `itemRawH` is established so wheel animation renders correctly.
+  useEffect(() => {
+    if (!itemRawH || dragging.current || scrolling.current) {
+      return
+    }
+    offsetYShared.value = activeIndex.current * itemRawH
+  }, [itemRawH])
+
   useEffect(() => {
     if (
       !scrollViewRef.current ||
@@ -158,13 +174,20 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
     }, isIOS ? 0 : 200)
   }, [itemRawH, maxIndex, initialIndex])
 
+  useEffect(() => {
+    const roundedH = Math.round(itemHeight)
+    if (roundedH) {
+      setItemRawH(roundedH)
+    }
+  }, [itemHeight])
+
   const onItemLayout = useCallback((e: LayoutChangeEvent) => {
     const { height: rawH } = e.nativeEvent.layout
     const roundedH = Math.round(rawH)
-    if (roundedH && roundedH !== itemRawH) {
+    if (roundedH) {
       setItemRawH(roundedH)
     }
-  }, [itemRawH])
+  }, [])
 
   const resetScrollPosition = useCallback((y: number) => {
     if (dragging.current || scrolling.current) {
@@ -287,9 +310,7 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
           key={index}
           item={item}
           index={index}
-          itemHeight={itemHeight}
-          textStyle={textStyle}
-          textProps={textProps}
+          itemHeight={itemRawH}
           visibleCount={visibleCount}
           onItemLayout={onItemLayout}
         />)
@@ -297,9 +318,7 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
           key={index}
           item={item}
           index={index}
-          itemHeight={itemHeight}
-          textStyle={textStyle}
-          textProps={textProps}
+          itemHeight={itemRawH}
           onItemLayout={onItemLayout}
         />)
     })
@@ -333,21 +352,25 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
       createElement(
         Reanimated.ScrollView,
         innerProps,
-        renderInnerchild()
+        wrapChildren(renderInnerchild(), {
+          hasVarDec,
+          varContext: varContextRef.current,
+          textPassThrough
+        })
       )
     )
   }
 
   const renderIndicator = () => (
     <PickerIndicator
-      itemHeight={itemHeight}
+      itemHeight={itemRawH}
       indicatorItemStyle={pickerIndicatorStyle}
     />
   )
 
   const renderMask = () => (
     <PickerMask
-      itemHeight={itemHeight}
+      itemHeight={itemRawH}
       maskContainerStyle={pickerMaskStyle}
     />
   )